Rozwijane menu z wykorzystaniem CSS3


14 lutego 2012 / Michał Kortas


Jako, że nasz poprzedni artykuł na temat rozwijanego menu, z wykorzystaniem CSS ma już ponad rok, postanowiliśmy go nieco zaktualizować, dostosowując go do dzisiejszych standardów, a mianowicie HTML5 i CSS3. W czasach obecnych, prawidłowo wykonana nawigacja, znacząco poprawia komfort pracy i użytkowania strony www. Kiedy internauta bez problemów odnajdzie interesujące go informacje, są większe szanse, że do nas wróci. Tym razem postaramy się o bardziej eleganckie menu, które posiadać będzie stylistycznie dopasowane, zaokrąglone rogi (przy rozwijaniu), oraz delikatne przejścia, dla koloru odnośników i tła, po najechaniu na każdą z pozycji. Na końcu artykułu znajdziecie DEMO oraz przykład do pobrania.

Zobacz, jak zbudować menu wielopoziomowe > Rozwijane menu wielopoziomowe

Na początek przygotujmy sobie nowy dokument HTML, który zawierać będzie listę, z wybranymi odnośnikami. W naszym przypadku będzie wyglądać to w taki sposób:

Teraz wystarczy to wszystko odpowiednio sformatować. Kod CSS wpisujemy oczywiście do zewnętrznego arkusza, w tym przypadku o nazwie arkusz.css. Jak widzimy w naszym szkielecie HTML, zaimportowaliśmy go już za pomocą takiej instrukcji:

Sam kod odpowiedzialny za formatowanie jest następujący:

W ostatnim bloku dodaliśmy instrukcje, dostępne tylko w CSS3 – w starszych przeglądarkach nie wpłyną one na układ menu, jednak będzie ono pozbawione zaokrągleń i efektu przejścia.

ZOBACZ DEMO POBIERZ 



43 odpowiedzi na “Rozwijane menu z wykorzystaniem CSS3”

  1. Mateusz pisze:

    Super kod!:) Ale mam problem ze zmianą czasu oraz animacją wysuwania się bloków podmenu.

    • Wydaje mi się, że trzeba ustawić animację, oraz jej czas, dla elementu #menu li ul {}

      • Mateusz pisze:

        Niestety nie bardzo wiem jak utworzyć tę animację.

      • Mateusz pisze:

        Coś mi się udało zrobić ale nie do końca działa. Zrobiłem coś takiego:

        #menu li ul {
        -moz-border-radius: 0 0 3px 3px;
        -webkit-border-radius: 0 0 3px 3px;
        -o-border-radius: 0 0 3px 3px;
        border-radius: 0 0 3px 3px;
        -webkit-animation: wyjazd 2s;
        }
        @-webkit-keyframes wyjazd {
        0%{display: block; height: 0%;}
        100%{display: block; height: 100%;}
        }

        Ale wtedy rozwija mi menu na całą wysokość strony, zamiast na wysokość bloków.

      • Spróbuj dać 100%{display: block; height: auto;}
        Nie mam teraz gdzie sprawdzić, więc nie wiem czy zadziała…

      • Mateusz pisze:

        Wtedy w ogóle nie działa, normalnie się pokazuje.

  2. Arek pisze:

    Jak przesunąć menu na środek tego paska i zwiększyć odstępy pomiędzy nimi?

    • Dostosowałem kod CSS w poradniku do wyśrodkowania (włącz demo i odśwież żeby zobaczyć).
      Co do zwiększenia odstępów zmień poniższe wartości:

      #menu li a {display: block; color: silver; text-decoration: none; padding: 7px 10px 7px;}

      Na przykład na takie:

      #menu li a {display: block; color: silver; text-decoration: none; padding: 7px 15px 7px;}

  3. dickw pisze:

    W teście podczas tworzenia strony („podgląd” z dysku) na IE 8, Mozilla Firefox i Google Chrome działa OK (poza tym, że jak dodam trzecią pozycję do rozwijanego menu to dwie pierwsze są wyrównane do lewej, a trzecia pozycja już jest na środku). Jednak po zamieszczeniu strony na serwerze IE 8 nie wyświetla animacji (jedynie napisy menu), Mozilla i Chrome nie maja z tym problemu i wszystko jest OK… Nie wiem jak zaradzić, żeby IE8 poprawnie to wyświetlał… Ssytem: Win 7 32-bit…

  4. ptr pisze:

    czy można w szybki sposób zmienić te menu w pionowe?

  5. Krystian pisze:

    Przy :hover (last-child) zapomniałeś o zaokrągleniu rogów:)

  6. Krzysiek pisze:

    Witam, to mój pierwszy komentarz tutaj. Po pierwsze muszę pogratulować autorowi strony ponieważ jest ona kapitalna i co najważniejsze często aktualizowana, za to BRAWA!

    Teraz już moje pytanie. Co muszę dodać w CSS’ie żeby mieć trójwarstwowe menu? Tzn. po najechaniu na wysunięty element, chciałbym, żeby wysuwało się kolejne sub-menu w prawo. Jak to zrobić?

    Z góry dziękuję za pomoc

    • Witam i dziękuję, Krzysztofie! Musisz dodać do CSS linijki kodu odpowiedzialne za trzeci poziom (można je skopiować z poziomu drugiego i odpowiednio zadeklarować – 10 i 11 linijka z kodem). No i pozostaje przesunięcie w prawo – to również w CSS. Nie mam możliwości sprawdzenia z poziomu smartfona efektów, dlatego daj znać czy się udało.

      • krzysiek pisze:

        No właśnie tutaj mam problem, bo nie do końca wiem jak mam to poprawnie zadeklarować:
        #menu li li a {width: 160px;} – tutaj kolejne li?
        #menu li ul {overflow: hidden; display: none; background: #242424;} – tutaj kolejne ul?
        Czy mam jakoś inaczej to wpisać? Bo jakoś w ogóle nie może się wyświetlić ten trzeci poziom menu.

      • Maniek pisze:

        Ja także mam problem z 3 poziomem menu, czy ktoś doszedł do rozwiązania?

      • kil pisze:

        Podam tu troszkę zmieniony kod, ale przynajmniej działa na trzy poziomy:)

        #menu{ list-style:none; font: 14px Trebuchet MS; display: table; padding-top:13px; text-transform: uppercase;}#menu li{ position:relative; list-style-type: none; padding-left:15px; padding-right:15px; float: left; border-right: 1px solid #dca724;}#menu li a {display: block; color: #891f00; text-decoration: none; padding: 7px 10px 7px;} #menu li a:hover {color: white;}#menu li ul{ list-style: none; visibility: hidden; position:absolute; width:210px; top:32px; left:0; background: url(images/hoverBg.png) repeat; list-style-type: circle; z-index:99999; text-transform: none;}#menu li ul li{ position: relative;}#menu li li a {width: 160px;font-size: 14px;color:#fff;} #menu li ul li ul{ list-style: none; visibility: hidden; position: absolute; width: 210px; top:0; left: 210px;}#menu li li:hover{ background:#a50b0b url(images/over.jpg) repeat-y;}#menu li:hover >ul{ visibility: visible !important;}*:hover {-moz-transition: 0.2s ease-in; -webkit-transition: 0.2s ease-in; -o-transition: 0.2s ease-in; transition: 0.2s ease-in;}

      • Maniek pisze:

        dzięki za odpowiedz, jednak dalej męczę się z tym kodem :)

  7. BooBoo pisze:

    witam – super menu ! Po wstawieniu go na strone wyswietla sie ladnie.niestety jak chce wejsc do drugiej pozycji – po rozwinieciu menu – ono znika. Pierwsza pozycja po rozwinieciu sie menu w dol laduje sie ok a druga nie da sie kliknac – prosze o pomoc i z gory dzieki

  8. Vinci pisze:

    Co trzeba dodać by menu było węższe, nie krótsze. Chodzi mi o to by odległość dolnej i górnej krawędzi menu była bliżej tekstu będącym linkiem… Pozdrawiam super menu! :)

  9. jamo pisze:

    Witam a jak zrobić aby to menu nie było przykrywane przez inne elementy na stronie?

  10. Kinga pisze:

    Witam!Co mam usunąc,aby menu nie było wyśrodkowane?

  11. Kamil K. pisze:

    Ja ostatnio próbowałem, lecz nie wiem. Da radę zrobić płynnie rozwijane menu bez CSS? :)

  12. Orches pisze:

    /*ANIMACJA – tylko CSS3*/

    *:hover {-moz-transition: 0.3s ease-in; -webkit-transition: 0.3s ease-in; -o-transition: 0.3s ease-in; transition: 0.3s ease-in;}
    Przed *:hover polecam wpisać #menu. Na Google Chrome niezłe kwiatki mi się działy. Tekst przy powiększaniu (artykułu!) robił się jakby animowany – „pływał”, żeby ustawić się do powiększenia.

    • Dokładnie. W przykładzie nie ma innych elementów, które zmieniają stan, dlatego mogłem użyć :hover dla wszystkich (*), ale na innych stronach spowoduje to dodanie efektu przejścia dla wszystkiego co może zmieniać swoje stany po najechaniu kursorem. Dziękuję za komentarz. Kod w artykule poprawiam.

  13. Loki pisze:

    A czy przy użyciu CSS3 można uzyskać efekt animacj gdy pojawia się drugi poziom menu?

  14. Marcin pisze:

    w css menu width ustawiłem na 100%. Tekst jest od lewej a jak zrobić żeby był wyśrodkowany ?

  15. Piotrek pisze:

    Witam, jak można przesunac w lewo drugi poziom menu. chodzi o to ze jak najezdzam na menu to co sie wysuwa jest rowno z lewa strona gory a chcialbym zeby wysunieta czesc(razem z tlem ) byla wyposrodkowana pod gorna.

  16. pietrzek pisze:

    Swietne menu, dziala elegancko. Jak zrobic zeby okreslony przycisk uznany byl za aktywny/wcisniety? bo chcialem mu przypisac inny kolor

  17. Najlepiej przypisać mu odpowiednią klasę, a potem sformatować ją za pomocą CSS.

  18. Emil Doliński pisze:

    Świetny artykuł. Menu wykorzystamy na naszej stronie. Pozdrawiam.

  19. Emil Doliński pisze:

    Witam, nie mogę wejść na forum, pojawia się błąd: 1054 – Nieznana kolumna ‚requireReset’ w where clause SQL=SELECT id,username,password FROM j_users WHERE username = ‚Zegarmistrz’ AND requireReset = 0

  20. Salvation pisze:

    To nie zadziała:
    /*ANIMACJA – tylko CSS3*/
    #menu *:hover {transition: 0.3s ease-in;}

    transition dodaje się do elementów bez hover

  21. Krzysztof pisze:

    Mam takie pytanie. Proszę napisać o zrobić aby po najechaniu kursorem na menu rozwijane pozostał biały kolor menu głównego a nie zmieniał koloru np. Informacje.

Pozostaw odpowiedź Krzysiek Anuluj pisanie odpowiedzi

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