Rozwijane menu poziome w CSS


27 czerwca 2010 / Michał Kortas


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:

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:

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

A oto uzyskany efekt:

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



36 odpowiedzi na “Rozwijane menu poziome w CSS”

  1. Anna pisze:

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

    • Cieszę się, że mogłem pomóc. Pozdrawiam!

      • Ja się powoli denerwowałem. Dzięki, przejrzysty Tutek ;)

      • Marcin Pyć pisze:

        A w jaki sposób można dodać przy kategoriach obrazek? np. przy kategorii O mnie obrazek z lewej strony, przy kategorii Portfolio też obrazek z lewej strony.. itd. i tak samo dla pozostałych kategorii?

        Czy ma Pan może wykonaną też wersję takiego samego menu ale pionowego oraz zakładek pionowych i poziomych?

  2. IE6 pisze:

    Niestety nie dziala pod IE6 ;-(

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

    • Rwtryb pisze:

      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

  3. Roma pisze:

    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)

  4. Damian pisze:

    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!

  5. Bula pisze:

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

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

  7. Jakub pisze:

    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ć?

  8. koniu pisze:

    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?

  9. Zoltan pisze:

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

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

  10. monika pisze:

    wogole nie dziala……

  11. Monika L pisze:

    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ć?

  12. Michas pisze:

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

  13. Piotr pisze:

    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

  14. Gościu pisze:

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

  15. Pat pisze:

    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?

  16. Revan pisze:

    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?

  17. Piotr pisze:

    Mam takie pytanie. Proszę napisać co zrobić aby kolor czcionki był żółty a po najechaniu kursorem na menu czcionka miała pomarańczowy kolor . Informacje.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.