Menu i podmenu - jako obrazek

[Teilor]

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

[waren]

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:

https://jsbin.com/aFEnatOG/3/

a kod możesz podglądnąć tutaj https://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

[Teilor]

Weszłem na telefonie sprawdzić forum, a tu Twoja odpowiedź. Idealnie - tak jak to zaplanowałem. Jesteś wielki , pełen profesionalizm, dziękuje. Jutro przetestuje u mnie. Jeszcze raz dzieki:)

[Teilor]

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?

[waren]

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:

https://jsbin.com/aFEnatOG/8/

oraz kod:

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

pozdro