Wielopoziomowe rozwijane menu

Krzysiek Furtak Web Development 7 Comments

Od czasu, gdy javascript powrócił do łask webmasterów na stronach www coraz częściej i coraz śmielej zaczęła pojawiać się pozioma nawigacja. Rozwijane menu tak usytuowane na naszej witrynie pozwala odejść od oklepanego już, blokowego wyglądu strony. Poza tym pozwala zaoszczędzić masę miejsca, które możemy spożytkować na zaprezentowanie ważnych treści internaucie, który „wpadł” na naszą witrynę.


DEMO
Zbieram na serwer, domenę i kawę 🙂
Rozwijane menu – struktura HTML:

Zacznijmy może od kodu HTML. Do każdego rodzaju rozwijanego menu, czy to pionowe, czy poziome serdecznie polecam listy UL. Z resztą właśnie tak (poprzez listy uporządkowane) tworzy się nawigację na stronach lub aplikacjach webowych.

[prism key=”code1″ language=”html”]

Powyższy kod na pierwszy rzut oka może wydawać się trochę zawiły, ale sama koncepcja jest bardzo prosta. Zewnętrzna lista to menu główne, oznaczone cyframi 1-6. Wewnątrz zagnieżdżone są dwie listy tworzące pod mena (oznaczone cyframi 2.1-2.5 oraz 5.1-5.2). Najgłębiej zagnieżdżonym menu jest lista z elementami od 2.2.1-2.2.3. Całość tworzy trój-poziomowe menu.

CSS:

Skoro mamy już przygotowany kod HTML pora go trochę poukładać CSSem 🙂 Pierwsze co musimy zrobić to pozbyć się marginesów i dopełnień z listy oraz ułożyć ją w poziomie.

[prism key=”code2″ language=”css”]

Następnie musimy dopilnować, aby każdy element listy, który jest linkiem, zachowywał się jak przycisk:

[prism key=”code3″ language=”css”]

Na tym etapie powinniśmy już mieć ładnie ułożoną poziomą nawigację. Teraz musimy się zająć stylami dla pod menu. Są one trochę inaczej zbudowane. Przede wszystkim musimy pozbyć się horyzontalnego ułożenia, ponieważ znaczniki list bardzo ładnie wszystko po sobie dziedziczą, musimy dokonać odpowiednich modyfikacji „ręcznie”.

[prism key=”code4″ language=”css”]

Po pierwsze musimy wyjść poza zwykłe ułożenie zagnieżdżonej listy, czyli do znacznika UL przypisujemy pozycję absolutną. Kolejną rzeczą do wykonania jest „wyniesienie” pod menu ponad wszystkie elementy witryny. Ponieważ nasze menu będzie się rozwijać, musimy zadbać, aby przypadkiem nie przykrył go żaden element z naszej strony. Do tego celu ustalamy dla tego elementu z-index o dość wysokiej wartości.

Mając już odpowiednio przygotowany główny znacznik menu, możemy zająć się elementami listy. Ponieważ to menu będzie zawierać kolejny poziom (kolejne pod menu), musimy przypisać mu position – relative. W ten sposób, gdy kolejnemu poziomowi menu przypiszemy pozycję absolutną w prosty sposób będziemy mogli go ustawić w stosunku do nadrzędnego elementu menu. Dodatkowo to pod menu powinno się wyświetlać pionowo, zatem musimy wyłączyć float.

W identyczny sposób postępujemy przy programowaniu trzeciego poziomu menu. Jedyną różnicą jest przesunięcie trzeciego poziomu względem drugiego, tak, aby nie nachodziły na siebie całkowicie.

jQuery:

JavaScript, który obsługuje nasze menu jest wręcz banalnie prosty, ale tak naprawdę nie potrzebujemy niczego lepszego 🙂

[prism key=”code5″ language=”javascript”]

Koncepcja tego kodu jest prosta. Po najechaniu kursorem na dane pole menu skrypt sprawdza czy posiada on zagnieżdżoną listę (czyli czy do danego pola menu jest przypisane pod menu). Jeśli tak rozwija je. Po opuszczeniu przez kursor pola danego menu, pod menu jest zwijane, jeśli takowe istniało oczywiście.

Rozwijane menu – podsumowanie:

I to wszystko. W kolejnej części postaramy się trochę upiększyć nasze menu poprzez wprowadzenie CSS3. Być może dojdą jeszcze jakieś ciekawe funkcjonalności … to się okaże 🙂

Pozdrawiam! 🙂