Proste rozwijane poziome menu w CSS

laptop blog

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



W tym tygodniu pokażę wam jak zbudować proste rozwijane menu (ang. top dropdown) z pomocą 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 swojej prostocie w bardzo prosty sposób można je zmodyfikować i wykorzystać na dowolnej stronie.

Jak zbudować poziome rozwijane menu

Menu, które stworzymy będzie jak wspomniałam dość proste i pozbawione specjalnych efektów tak aby jak najlepiej pokazać zasady jego działania. Dzięki czemu będzie je można później samodzielnie odtworzyć.

Na początek zaczniemy od części HTML:

Jak widać powyższy kod nie wygląda za ciekawie – posiadamy jedynie wypunktowaną listę z zagnieżdżonym wypunktowaniem.

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

W tej chwili nasza lista zaczyna przypominać już zwykłe menu:

To jednak nie koniec naszych prac jak widać jeszcze przed nami długa droga. Menu w CSS nie działa jak byśmy chcieli i w dalszym ciągu jest wręcz „rozjechane”.

Jeżeli chcemy by zaczęło się rozwijać dodajemy jeszcze kod:

Jak widać nie jest to zbyt skomplikowany kod.

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

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.

Przeczytaj również

Równej wysokości kolumny Dość częstym problemem przy budowaniu strony internetowej jest utworzenie kolumn o równej wysokości. Wyrównanie dwóch kolumn z pewnością nikomu nie sp...
Zmiana wielkości liter z pomocą CSS – text-t... Właściwość text-transform (z języka ang. transformacja tekstu) jest jedną z popularniejszych metod modyfikacji tekstu. Zadaniem własności jest zmiana ...
Tekst 3D na stronie internetowej – CSS Tym razem na mój warsztat trafił dość ciekawy efekt przydatny do wyróżnienia tekstu na stronie. Chodzi oczywiści o tekst 3D, a właściwie o uzyskanie e...
Umieszczanie grafiki jako tła strony Standardowo każda strona internetowa posiada białe tło. To czy budując stronę zatrzymamy ten kolor lub czy go zmienimy zależy tylko od nas. Jako nowe...