HTML5 & CSS3

Rozwijane menu poziome w CSS

Ostatnimi czasy niezwykle popularne, przy tworzeniu stron www, stało się używanie rozwijanego menu. Jest to bardzo estetyczny sposób na wykonanie nawigacji, która może znacząco poprawić wygodę poruszania się po sieci. Co więcej, użytkownik strony nie zgubi się tak szybko w gąszczu różnorakich linków, co w przypadku rozbudowanego serwisu może okazać się bardzo prawdopodobne.

Rozwijane menu możemy stworzyć na 2 sposoby. Pierwszym z nich jest użycie JavaScript. Odradzam jednak tę opcję, ponieważ w przypadku gdy internauta posiadał będzie przeglądarkę z wyłączoną obsługą JS, nasze menu w nie wyświetli się na ekranie w sposób zamierzony, co spowoduje „rozjechanie się” strony. Alternatywnym sposobem jest użycie CSS.

Przeczytaj artykuł o tym, jak zbudować rozwijane menu, w oparciu o CSS3 > Rozwijane menu z wykorzystaniem CSS3

Zobacz, jak zbudować menu wielopoziomowe > Rozwijane menu wielopoziomowe

Ta metoda jest bardziej bezpieczna, więc to na niej się skupimy. W poniższym przykładzie będę operował na menu mojej poprzedniej strony.

Zacznijmy od utworzenia nowego pliku index.htm. W części body wstawmy zwykłe menu, oparte na liście wypunktowanej:

<ul id="menu">
	<li><a href="#">Start</a></li>
    <li><a href="#">Portfolio</a>
    <ul>
    <li><a href="#">Strony www</a></li>
    </ul>
    </li>
    <li><a href="#">Artykuły</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>

Powyższy listing spowoduje wyświetlenie zwyczajnej listy wypunktowanej.

Aby nasze menu przybrało kształty takie jakie chcemy osiągnąć, stwórzmy nowy plik CSS o nazwie arkusz.css. Zaimportujmy go do naszej strony. Aby to zrobić, w sekcji head wpiszmy:

<link href="arkusz.css" rel="stylesheet" type="text/css">

Teraz nadszedł czas na uzupełnienie pliku arkusz.css:

#menu {
     text-align: left;
     overflow: hidden;
     font-family: calibri, tahoma;
}

ul#menu li {
     border: 1px solid #d5d5d5;
     list-style-type: none;
     float: left;
     background: #e9e9e9;
     margin-left: 3px;
}

ul#menu li:hover {
     border: 1px solid #d5d5d5;
     list-style-type: none;
     float: left;
     background: #f0f0f0;
     margin-left: 3px;
}

ul#menu li a {
     display : block;
     padding : 4pt;
     text-decoration : none;
}

ul#menu li li a {
     width: 160px;
}

ul#menu li li:hover {
     background: white;
}

ul#menu li ul {
     overflow: hidden;
     display: none;
}

ul#menu li:hover ul {
     position: absolute;
     background: #aaa;
     padding: 0;
     display: block;
     width: 160px;
}

A oto uzyskany efekt:

W zasadzie to już wszystko. Na koniec pozostało nam jedynie sformatować menu, w zależności do naszych potrzeb.

komentarze 34

  • Awatar
    Anna

    14 maja 2012 13:53

    Świetny tutorial! Życie mi Pan uratował, bo byłam już na skraju załamania :) Dziękuję i pozdrawiam

    Odpowiedz
  • Awatar
    IE6

    25 maja 2012 19:13

    Niestety nie dziala pod IE6 ;-(

    Odpowiedz
    • Awatar
      Michał Kortas

      25 maja 2012 19:37

      Obecnie IE6 jest tak starą wersją przeglądarki, o niszowym zasięgu, że nie jest brana pod uwagę podczas projektowania stron www :-)

      Odpowiedz
    • Awatar
      Rwtryb

      26 maja 2012 17:38

      Powiem bardziej dosadnie, po co miało by działać pod IE6????
      Nie pamiętam dobrze, ale jej aktualizacja jest wymuszana chyba?
      Jeżeli nie to jest tak marna i tak mało osób z niej korzysta, że nie warto pisać pod nią kodu

      Odpowiedz
  • Awatar
    Roma

    30 czerwca 2012 16:57

    A w jakiej przeglądarce i w jakiej rozdzielczości można dobrze oglądać Pana filmowy tutorial o Joomli 2.5 ? Spróbowaam już w 3-ch (FF,IE,Safari) i za każdym razem – przy opcji pełnego ekranu – MAM NIEPEŁNY OBRAZ – jest on nieco obcięty z lewej strony w każdej przeglądarce.
    Zaznaczam, że ustawienia ekranu mam wyrównane; wszystkie inne obrazy i filmy odbieram prawidłowo. Tak bardzo chciałabym skorzystać z Pańskiego instruktażu, ale przeszkadza mi ta deformacja pełnego ekranu ! Proszę o radę.. Roma (poczatkująca)

    Odpowiedz
  • Awatar
    Damian

    11 lipca 2012 21:30

    Czy byłaby możliwość, aby dorobił Pan jeszcze do tego menu jeden lub dwa poziomy? Takie menu jest super, jednak przydałaby się funkcja dodatkowego poziomu, najlepiej dwóch… takie menu 4-poziomowe. Z góry dziękuję i pozdrawiam!

    Odpowiedz
    • Awatar
      Michał Kortas

      13 lipca 2012 07:55

      Jeżeli znajdę chwilkę czasu, mogę postarać się o przygotowanie menu wielopoziomowego. Warunkiem jest jednak znalezienie przeze mnie wolnej godziny ;-)

      Odpowiedz
      • Awatar
        Damian

        13 lipca 2012 16:55

        Super, już teraz dziękuję za zaangażowanie! :)

        Odpowiedz
  • Awatar
    Bula

    20 września 2012 12:33

    Witam,
    Super ! Mam tylko pytanie, jak to menu wyśrodkować ?

    Odpowiedz
  • Awatar
    Karol Stefański

    28 września 2012 13:44

    Dzięki. Nie rozumiałem tego, jak rozwijać. Przyczyną problemu było zamknięcie [li] przed znacznikiem [ul] :D

    Odpowiedz
    • Awatar
      Michał Kortas

      28 września 2012 13:48

      Proszę ;-) W razie czego służymy pomocą na naszym wortalowym forum. Pozdrawiam!

      Odpowiedz
  • Awatar
    Jakub

    10 listopada 2012 15:48

    Mam takie pytanie, miałem już gotowe menu i dodałem do niego tylko te rozwijane elementy. Dodałem dodałem dodatkowe ul i li, i dwie ostatnie części kodu CSS z tego tutorialu. I właściwie działa. Tylko, że po najechaniu na menu rozwija się w duł o jedno pole(powinno na 2) i ten element, który jest widoczny bez najechania po najechaniu znika i zamiast niego pojawia się pierwsza pozycja, która powinna pojawić się pod tym, a druga rozwijana pojawia się pod nią. Co powinienem zmienić?

    Odpowiedz
  • Awatar
    koniu

    3 grudnia 2012 23:38

    jest tylko jeden problem…jak sie zjedzie mysza ba li „o mnie” to znika cala lista, ktora sie rozwinela (o mnie, aktualnosci). da sie temu zaradzic jakos?

    Odpowiedz
  • Awatar
    Zoltan

    30 grudnia 2012 19:37

    a jak nalezy edytowac kod, aby w efekcie koncowym uzyskac cos takiego?

    http://screenshu.com/static/uploads/temporary/lh/4r/v6/1rf6b4.jpg

    Odpowiedz
  • Awatar
    monika

    11 lutego 2013 10:50

    wogole nie dziala……

    Odpowiedz
    • Awatar
      Michał Kortas

      11 lutego 2013 21:14

      Moniko, proszę o szczegóły. Co nie działa? Jeżeli masz problem z używaniem tego kodu, zawsze możesz założyć odpowiedni wątek na naszym forum webmasterskim.

      Odpowiedz
  • Awatar
    Monika L

    20 lutego 2013 13:24

    Pod Firefox działa bez problemu, niestety pod IE 8 nie działa wcale :( Wyświetla jedynie „martwe” nagłówki pierwszego poziomu czyli w przykładzie „Start” „Portfolio” … Co można zrobić?

    Odpowiedz
    • Awatar
      Monika L

      20 lutego 2013 13:28

      oks, sama odpowiedziałam sobie na pytanie :) Dla osób z podobnym probleme, na górze indexu zawsze wpisujemy

      :D

      Odpowiedz
      • Awatar
        Monika L

        20 lutego 2013 13:29

        !DOCTYPE html

        Odpowiedz
  • Awatar
    Michas

    13 kwietnia 2013 00:10

    Mam problem robie wszytko dobrze i zamiast rozwijanego menu mam wwalone na stronie te tematy

    Odpowiedz
  • Awatar
    Piotr

    25 kwietnia 2013 11:41

    Witam, czy wie ktoś jak przerobić to menu na takei żeby było do 3 poziomu a nie do 2giego tylko?
    Bede wdzieczny za pomoc pozdrawiam

    Odpowiedz
  • Awatar
    Gościu

    21 maja 2014 22:54

    Która część tego css’a odpowiada za położenie „podlisty”(ul) przy lewej stronie? Nie wiem jak to napisać, wywaliłem coś z niego i teraz podlisy układają się obok siebie zamiast jedna pod drugą… Co dodać do CSS’a aby było dobrze? Pozdrawiam :)

    Odpowiedz
  • Awatar
    Pat

    18 stycznia 2016 15:07

    Hej :) mam pytanie moje menu należy do nagłówka i kiedy się rozwija rozszerza nagłówek. Cała reszta strony leci w dół, nie wygląda to najlepiej. Dodałam position:absolute; ale teraz rozwijane menu chowa się za treść na stronie. Co zrobić żeby było na wierzchu? Jest taka możliwość czy musi być w tej samej części co tekst?

    Odpowiedz
  • Awatar
    Revan

    10 lutego 2016 14:35

    Witam, jeśli dodam do #menu „position:absolute;” to wówczas menu nie rozwija się wogóle, a zależy mi na zmianie położenia całego menu. Może jest jakiś inny sposób?

    Odpowiedz
    • Awatar
      Michał Kortas

      10 lutego 2016 18:54

      Proszę podać przykład (najlepiej link), a postaram się pomóc. Warto wykorzystać do tego celu nasze forum (bez rejestracji): https://webroad.pl/pytania. Będzie tam prościej przedstawić mi rozwiązanie.

      Odpowiedz

Zostaw odpowiedź