Jump to content

Menu i podmenu - jako obrazek


Recommended Posts

Od dłuższego czasu kombinuje z stworzeniem menu i podmenu ale, które działałoby w sposób który opisałem na dołączonym obrazku.

W skrócie:

Jest menu z kilkoma przyciskami (obrazkowymi) , klikamy na 1 z nich, poniżej wysuwa się lub po prostu pokazuje podmenu, które ma też przyciski obrazkowe, gdy klikniemy na jakiś przycisk z pod menu, pod menu znika i przenosi nas do innej zakładki.

Menu miałoby formę 1 obrazka, opcje żeby kliknąć na jakąś część obrazka, może jako mape obrazu, tam da się wyznaczyć punkty współrzedne.

Jednak nie umiem tego wszystkiego zgrać, żeby działało.

Mógłby mi ktoś pomoc? Oczywiście sprawę dokombinuje sam, po prostu chociaż wstępny projekt, jak to dziala.

Pozdrawiam i z góry dziękuje za pomoc :)

menu_i_minimenu.png

Link to post
Share on other sites

cześć, możesz wykorzystać sam CSS, jeśli będzie to efekt :hover, natomiast jeżeli rozpatrujesz tylko kliknięcia myszki, to musisz posłużyć się Javascriptem, takie coś skleiłem na szybko:

http://jsbin.com/aFEnatOG/3/

a kod możesz podglądnąć tutaj http://jsbin.com/aFEnatOG/3/edit?html,css,js,output, JS'a nie musisz używać tylko odkomentuj w CSS'ie jedną regułę

mam nadzieję, że o to chodziło :)

Link to post
Share on other sites

Jest git to co napisałeś tylko jeśli mógłbym Cię jeszcze pytaniem pomęczyć, jest 1 sprawa, mam z przodu taki element okrągły i on nie ma wchodzić do menu, spokojnie jakoś go można od stylować i po prostu go tam umieścić ale chciałbym żeby te obrazki które się rozwijają nie były wyglądu głównego menu, u Ciebie był te zacne kotki, ale jak rozwijałeś on kopiował wygląd kotków na dół, a ja potrzebuje inne elementy nowe gdzie to zmienic? :)

image.png

Link to post
Share on other sites

No wystarczy dodać nowe klasy buttonów w css'ie np .button.nowy1 i ustawić tam background oraz zamiast np klasy first w html'u wpisać nowy1

tutaj masz wynik:

http://jsbin.com/aFEnatOG/8/

oraz kod:

http://jsbin.com/aFEnatOG/8/edit?html,css,js,output

pozdro

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. Terms of Use Privacy Policy