Proste rozwijane poziome menu w CSS

laptop blog

Kategoria wpisu Kurs CSS, Kurs HTML, Kursy Tagi: , , , , , , , , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (1 głosów, średnia: 4,00 z 5)
Loading...

W tym tygodniu pokażę wam jak zbudować proste poziome rozwijane menu (ang. top dropdown) korzystając z CSS i HTML. Dla nie wtajemniczonych chodzi o takie zwykłe górne menu na stronę internetową.

Nie będzie ono szczególnie imponujące gdyż skupiłam się główniej na zasadach oraz mechanice a nie na ozdobnikach. Dzięki temu będziecie mogli w łatwy sposób je zmodyfikować i wykorzystać na dowolnej stronie.

Jak zbudować poziome rozwijane menu

Menu, które stworzymy będzie jak wspomniałam dość proste i raczej pozbawione specjalnych efektów, tak aby jak najlepiej pokazać zasady jego działania. Ułatwi wam to później samodzielną budowę.

Naszą pracę zaczniemy od zbudowania szkieletu HTML naszego menu. W większości przypadków menu oparte są o zwykła listę HTML z odnośnikami. Jednak nie jest powiedziane, że tak będzie zawsze. Menu może składać się również z samych anchorów lub anchorów otoczonych <div>.

Menu na bazie listy

Na początek więc tworzymy zwykłą listę HTML (podlinkowałam wam wpis o wypunktowanych listach powyżej). I dodajemy w niej odnośniki.

W związku, że budujemy rozwijane menu część odnośników będzie musiała posiadać zagnieżdżona drugą listę. Tak jak na poniższym przykładzie:

Jak widzicie 2 punkty posiadają dodatkową drugą listę w środku. Jeśli nie wiecie jak tworzyć takie elementy nie wpadajcie w panikę 🙂 . Nie należą one w cale do zbyt skompilowanych. Nasz kod obecnie prezentuje się następująco:

Jak widać powyższy kod nie wygląda za ciekawie – posiadamy jedynie wypunktowaną listę składającą się z znaczników <ul> oraz <li>. Jest to więc tradycyjne wypunktowanie z zagnieżdżeniem – drugim wcięciem.

Po usunięciu fragmentu kodu widać, że element <li> posiada w sobie drugą listę.

Taka lista będzie dodatkowo jeszcze przesunięta w stosunku do listy obiektu nadrzędnego (rodzica).

Dodatkowym znacznikiem jaki się tu pojawia jest <a> dzięki, któremu linkujemy do wybranych elementów (stron, podstron). O tym znaczniku pisałam już w innym wpisie dlatego odsyłam was do niego.

Oscylowanie listy

Teraz w pliku ze stylami strony umieszczamy następujący kod:

W tej chwili nasza lista zaczyna przypominać już zwykłe menu, chociaż nie do końca:

Wszystko jest delikatnie mówiąc rozjechane. Powodem tej sytuacji jest nasza druga lista. Musimy coś z nią zrobić. W gotowym menu powinna się ona chować i nachodzić nad elementy strony.

Dlatego teraz uzupełnimy nasz kod CSS o kilka zmiennych.

Jak widać zmodyfikowałam „.menu li ul” poprzez dodanie mu position: absolute; oraz przesunęłam na wyższą warstwę z-index: 100;.

Druga lista ma także ustawioną opcję dislay:none; w efekcie od tej chwili jest ona na stronie niewidoczna. Status ten może jednak ulec zmianie .menu li:hover ul. O statusie :hover również pisałam już wielokrotnie. Jest to bowiem bardzo użyteczne zjawisko w CSS i chyba najczęściej wykorzystywane.

Jak widać na obrazku powyżej mamy teraz w jednym, rzędzie elementy listy (poza Link 7 – ale tym się zajmę za chwilę). Natomiast po najechaniu kursorem myszy na obiekt z drugą listą pokazuje się coś takiego.

Jak widać jeszcze musimy nad tym popracować.

Zacznę od zmniejszenia odległości pomiędzy elementami budowanego menu. W moim przypadku powodem jest margin na elementach li. Dlatego do kodu dopiszę margin:0; przy .menu li.

Kolejne zmiany to:

Tu się jednak na chwilę zatrzymam. Jakiś czas temu stworzyłam krótki kurs budowy strony internetowej. W ramach jego jednym z elementów było menu. Pojawił się tam też znacznik <nav>. <nav> to znacznik stosowany w HTML5. I wydaje mi się, że powinno się go tu dodać.

Mnie ten znacznik nie jest potrzebny, ale jeśli budujecie menu dla swojej strony to powinien się on tam znaleźć.

Jak widać nie jest to zbyt skomplikowany kod 😉

Jak widać udało nam się je uruchomić.

Poniżej możecie zobaczyć rozszerzoną wersję mojego kody o kilka animacji.

See the Pen
Easy dropdown menu
by Aura (@Julka85)
on CodePen.

Teraz może trochę objaśnień:

– stworzyliśmy poziome menu rozwijane na bazie wypunktowanej listy (można zrobić podobne z pomocą DIV)
– będzie na całą szerokość kontenera ponieważ nie zostało ograniczone
– jego wygląd w dużej mierze zależy od nas samych i naszych potrzeb
– menu działa na zasadzie hover effect – czyli efekt rozwijania uaktywnia się po najechaniu kursorem myszy w określone miejsce (obiekt)

Oczywiście, to że nie wykołatałam w tym przykładzie JavaScript nie oznacza, że nie można go dodać w kolejnych etapach np. dodając ciekawe efekty na hover. Przykładem tym chciałam jedynie pokazać, że można utworzyć prostą i funkcjonalną nawigację strony internetowej jedynie z wykorzystaniem HTML i CSS.

Dodaj komentarz

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