Rozwijane menu wielopoziomowe w CSS3


17 marca 2013 / Michał Kortas


Wiele już razy otrzymywałem zapytania od Was na temat tworzenia nawigacyjnego menu, które rozwija się w kilku poziomach. Odnośnie tej kwestii dyskusja rozwinęła się w komentarzach do dwóch poprzednich wpisów (rozwijane menu i rozwijane menu w CSS3), gdzie padło kilka propozycji ku rozwiązaniu tego problemu, jednak wszystkie one pisane były „z palca”. W takim więc razie postanowiłem utworzyć nowy, osobny tutorial, zbiorczo podsumowujący wielopoziomowe nawigacje na stronach www. Oczywiście to tylko jeden sposób na osiągnięcie wymierzonego celu. Jeżeli posiadacie swoje techniki, bardzo chętnie się im przyjrzę.

Podstawowy schemat

Zaczynamy standardowo od przygotowania naszego menu za pomocą listy wypunktowanej w HTML5.

Zagnieżdżanych list chyba nie muszę nikomu tłumaczyć (jeżeli tak, to zapraszam z pytaniami na nasze forum webmasterskie). Aby uwidocznić możliwość rozwijania, przy każdym elemencie, który jest „rodzicem” i posiada elementy na niższych poziomach dodałem znacznik <i>, którego oczywiście jeszcze nie widać, ale tym zajmiemy się w części związanej z formatowaniem powyższego kodu.

Spójrzmy teraz na zrzut ekranu, który przedstawia nam obecny stan naszego kodu. Jeżeli macie podobnie, możemy przejść do kolejnej części.

Podstawowe formatowanie w CSS3

W podstawowej sekcji dodamy ukrywanie i pojawianie się danych poziomów oraz odnośniki główne ułożymy horyzontalnie.

Dzięki powyższemu zabiegowi każdy kolejny poziom, jaki dołozymy do naszej struktury menu, będzie ukryty dopóki, doputy nie najedziemy kursorem na jego „rodzica„, czyli element nadrzędny <li> (a w nim <a>). Na tę chwilę uzuskaliśmy następujący efekt:

Upiększamy menu – formatowanie rozszerzone

Jako, że nasz schemat menu już działa, nadszedł czas na dostosowanie go do ciekawszych standardów wizualnych. Przecież nikt nie chce mieć na witrynie surowego zbioru linków. Najpierw sformatujemy wygląd linków osobno na poziomie pierwszym jak i na pozostałych poziomach.

Nasz panel nawigacyjny ogląda się już duzo przyjemniej.

Nie widzimy jednak strzałek, informujących nas o tym, czy dany rodzic posiada jeszcze niższe poziomy. W tym celu wykorzystamy również możliwości CSS.

A oto efekt, który udało nam się uzyskać.

Podsumowanie tematu

Menu, które stworzyliśmy możemy rozbudowywać o kolejne poziomy. Uzyte przez nas formatowanie zapewni ku temu odpowiednią strukturę. Mam nadzieję, że dzisiejszym wpisem wyjaśniłem co niektórym zasadę budowania nawigacji w stylu „multilevel„.

Możesz podejrzeć przykład on-line lub pobrać menu na swój komputer:

Zobacz DEMO Pobierz plik źródłowy

Grafika z zajawki: freedigitalphotos.net



22 odpowiedzi na “Rozwijane menu wielopoziomowe w CSS3”

  1. Kacper Donat pisze:

    Ja bym proponował jeszcze użyć płynnych przejść dla lepszego efektu :)

    • Chodziło mi o jak największe uproszczenie kodu, aby Ci początkujący nie musieli gubić się pośród kolejnych linii. Dla bardziej doświadczonego webmastera dodanie do tego płynnych przejść nie powinno być problemem. Nie mniej jednak, w razie czego, zapraszam na nasze forum webmasterskie.

  2. Guest pisze:

    No to już twoja własna koncepcja, którą możesz umieścić u siebie :) Tutaj mamy tylko super przygotowany szablon, dzięki :P

  3. Kacper pisze:

    Nie wiem czy to działanie zamierzone czy nie ale ostatnio na webroad nie mogę otwierać stron w nowych kartach przez kliknięcie rolką myszki.

  4. Guest pisze:

    i do zrobienia strzałki? Ten tag jest przestarzały i w ogóle nie służy do tego celu. Powinien się tam znaleźć div lub span.

  5. Arek pisze:

    O ile dobrze zauważyłem to wydaje mi się, że element powinien znajdować się wewnątrz elementu np. Informacje a nie na zwewnątrz Informacje przy tym formatowaniu CSS. Bynajmniej w moim przypadku umieszczenie wewnątrz spowodowało, że strzałeczki się pokazały. Po za tym to bardzo ciekawy i praktyczny przykład menu. Dziękuję ;)

  6. Piotr pisze:

    Witam,
    a u mnie pojawił się problem że po rozwinieciu menu tworzy się taki odstep z lewej strony szerokosci 40px (skopiowalem stad) jak to usunac? ten odstep z lewej strony?

  7. Smok pisze:

    Witam.

    #mainmenu > li {float: left; margin-right: 10px; position: relative;}

    Co oznacza w powyższym fragmencie znak „>” pomiędzy „#mainmenu” a „li”?
    Szukam w google’ach, ale nie mogę znaleźć.

    Pozdrawiam

  8. Ursmar pisze:

    Witam,
    Mam takie pytanko:
    Jak, gdzie dodawać tworzyć takie (czy jakieś (jakkolwiek) inaczej sformatowane menu), aby nie powielać go/ich na każdej podstronie, do której odsyłają poszczególne poziomy menu??

    • chudym pisze:

      jedynie php, poszukaj dokładniej w internecie a na pewno znajdziesz ;-)

      • Ursmar pisze:

        Dzięki za odpowiedź… tak wstępnie już trochę szukałem i natknąłem się właśnie na takie rozwiązanie z zastosowaniem php. Wygląda to nawet jak dla mnie bardzo, bardzo początkującego w tym temacie prosto i przejrzyście..
        Ale słyszałem też, że można to zrobić przy pomocy znacznika – iframe – ?
        Co powiesz o taki rozwiązaniu… ja się niestety na tym nie znam.. a chciałbym od bardziej doświadczonych otrzymać opinię czy warto? korzystać z tego sposobu..?
        Czy tak jak już wcześniej pisałeś jedynie php? ;)

      • Mr.Mr pisze:

        Żadnych iframe’ów ;-)

  9. Marcin pisze:

    Mam następujący problem z tym menu: przy trzecim poziomie menu jest przesunięte i nie da się na niego najechać myszą (znika). Czy może mi ktoś pomóc z tym? Sprawdzałem na różnych przeglądarkach, wklejałem „czysty” kod menu z tej strony i to samo. Moja strona jest w cakePHP i myślę, że to może być problemem, niestety nie wiem jak go rozwiązać.
    Screen jak to wygląda:
    http://voila.pl/index.php?f=1777489

Pozostaw odpowiedź chudym Anuluj pisanie odpowiedzi

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *