HTML5 & CSS3

Rozwijane menu z wykorzystaniem CSS3

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:

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title>Rozwijane menu w CSS3</title>
    <link href="arkusz.css" rel="stylesheet">

</head>
<body>
<div id="kontener">

<ul id="menu">
    <li><a href="#">Home</a></li>
    <li><a href="https://webroad.pl">Portfolio</a>
    <ul>
    <li><a href="#">Strony www</a></li>
    </ul>
    </li>
    <li><a href="https://webroad.pl">WEBroad.pl</a></li>
    <li><a href="#">Informacje</a>
    <ul>
    <li><a href="#">O mnie</a></li>
    <li><a href="#">Aktualności</a></li>
    </ul>
    </li>
    <li><a href="#">Webdesign</a></li>
    <li><a href="#">Kontakt</a>
    <ul>
    <li><a href="#">Formularz kontaktowy</a></li>
    <li><a href="#">Pomoc</a></li>
    </ul>
    </li>
    <li><a href="#">Współpraca</a>
    <ul>
    <li><a href="#">Wymiana linkiem</a></li>
    </ul>
    </li>
</ul>

</div>
</body>
</html>

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:

<link href="arkusz.css" rel="stylesheet">

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

/*PODSTAWOWE USTAWIENIA*/
body {font-family: calibri, tahoma; background: #e6e6e6;}

#kontener {width: 960px; margin: 0 auto;}
#menu {display: table; padding: 0 10px 0; margin: 0 auto; overflow: hidden; font-size: 14px; background: #242424;}
#menu li {list-style-type: none; margin: 0 auto; float: left; }
#menu li:hover {background: #404040;}
#menu li a {display: block; color: silver; text-decoration: none; padding: 7px 10px 7px;}
#menu li a:hover {background: #404040; color: white;}
#menu li li a {width: 160px;}
#menu li ul {overflow: hidden; display: none; background: #242424;}
#menu li:hover ul {position: absolute; padding: 0; display: block; width: 160px;}

/*ANIMACJA - tylko CSS3*/
#menu *:hover {transition: 0.3s ease-in;}

/*ZAOKRĄGLONE ROGI - tylko CSS3*/
#menu {border-radius: 3px;}
#menu li ul {border-radius: 0 0 3px 3px;}

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 

komentarze 42

  • Awatar
    Mateusz

    22 kwietnia 2012 22:24

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

    Odpowiedz
    • Awatar
      Michał Kortas

      23 kwietnia 2012 10:35

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

      Odpowiedz
      • Awatar
        Mateusz

        24 kwietnia 2012 00:51

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

        Odpowiedz
      • Awatar
        Mateusz

        24 kwietnia 2012 01:26

        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.

        Odpowiedz
      • Awatar
        Michał Kortas

        24 kwietnia 2012 06:24

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

        Odpowiedz
      • Awatar
        Mateusz

        24 kwietnia 2012 12:24

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

        Odpowiedz
  • Awatar
    Arek

    6 maja 2012 19:27

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

    Odpowiedz
    • Awatar
      Michał Kortas

      6 maja 2012 19:51

      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;}

      Odpowiedz
  • Awatar
    dickw

    21 lipca 2012 13:57

    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…

    Odpowiedz
  • Awatar
    ptr

    30 sierpnia 2012 10:27

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

    Odpowiedz
    • Awatar
      Michał Kortas

      30 sierpnia 2012 10:42

      Wystarczy nie floatować #menu li {list-style-type: none; margin: 0 auto; float: left; } i nadać stałą szerokość.

      Odpowiedz
      • Awatar
        ptr

        30 sierpnia 2012 10:51

        można część rozwijaną podnieść do góry do poziomu menu wyższego stopnia i przesunąć w prawo?

        Odpowiedz
  • Awatar
    Krystian

    30 sierpnia 2012 13:00

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

    Odpowiedz
  • Awatar
    Krzysiek

    7 października 2012 17:19

    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

    Odpowiedz
    • Awatar
      Michał Kortas

      7 października 2012 18:30

      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.

      Odpowiedz
      • Awatar
        krzysiek

        7 października 2012 22:42

        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.

        Odpowiedz
      • Awatar
        Maniek

        22 października 2012 11:51

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

        Odpowiedz
      • Awatar
        kil

        22 października 2012 19:37

        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;
        }

        Odpowiedz
      • Awatar
        Maniek

        22 października 2012 20:36

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

        Odpowiedz
  • Awatar
    BooBoo

    17 października 2012 07:15

    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

    Odpowiedz
    • Awatar
      Michał Kortas

      17 października 2012 08:18

      Witaj, możesz pokazać na jakiej stronie występuje ten problem? Chętnie się temu przyjrzę…

      Odpowiedz
  • Awatar
    Vinci

    27 grudnia 2012 20:42

    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! :)

    Odpowiedz
    • Awatar
      Michał Kortas

      27 grudnia 2012 20:51

      Witaj, w „#menu li a {}” zmień siódemki w atrybucie „padding” na mniejsze. Pozdrawiam :-)

      Odpowiedz
  • Awatar
    jamo

    30 stycznia 2013 13:14

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

    Odpowiedz
    • Awatar
      Michał Kortas

      30 stycznia 2013 14:27

      Proszę założyć odpowiedni temat na naszym forum webmasterskim. Tam udzielamy wszelkiej pomocy na problemy związane z zagadnieniami poruszanymi w artykułach.

      Odpowiedz
      • Awatar
        Pat

        18 stycznia 2016 15:14

        czemu… wszyscy uzyskali odpowiedzi na swoje głupie pytania..

        Odpowiedz
      • Awatar
        Michał Kortas

        18 stycznia 2016 15:22

        Jeśli coś da się szybko wytłumaczyć to odpowiadam w komentarzu. Jeśli, potrzeba więcej miejsca, np. na kod to lepszym miejscem jest forum.

        Żadne pytania nie są głupie :)

        Odpowiedz
  • Awatar
    Kinga

    27 marca 2013 18:10

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

    Odpowiedz
  • Awatar
    Kamil K.

    28 marca 2013 21:03

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

    Odpowiedz
    • Awatar
      Michał Kortas

      28 marca 2013 21:53

      Płynne rozwijanie bez CSS? Chociażby przy użyciu jQuery, ale to trochę mija się z celem, bo menu ma wykorzystywać tylko i wyłącznie CSS3.

      Odpowiedz
  • Awatar
    Orches

    10 maja 2013 22:59

    /*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.

    Odpowiedz
    • Awatar
      Michał Kortas

      11 maja 2013 22:25

      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.

      Odpowiedz
  • Awatar
    Loki

    21 października 2013 19:28

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

    Odpowiedz
  • Awatar
    Marcin

    30 października 2013 14:10

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

    Odpowiedz
  • Awatar
    Piotrek

    4 lutego 2014 20:00

    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.

    Odpowiedz
  • Awatar
    pietrzek

    13 marca 2014 00:54

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

    Odpowiedz
  • Awatar
    Michał Kortas

    18 marca 2014 10:32

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

    Odpowiedz
  • Awatar
    Emil Doliński

    9 października 2014 12:28

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

    Odpowiedz
  • Awatar
    Emil Doliński

    10 października 2014 11:51

    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

    Odpowiedz
  • Awatar
    Salvation

    18 lutego 2016 20:42

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

    transition dodaje się do elementów bez hover

    Odpowiedz

Zostaw odpowiedź