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 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 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ę składającą się z znaczników <ul> oraz <li>. Jest to więc tradycyjne wypunktowanie z zagnieżdżeniem – drugim wcięciem.

Dodatkowym znacznikiem jaki się tu pojawia jest <a> dzięki, któremu linkujemy do wybranych elementów (stron, podstron)

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:

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

Jeżeli chcemy by zaczęło się rozwijać, a elementy ułożyły się poprawnie 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ż

Usuwanie obramowania klikniętych linków CSS Usuwanie obramowania klikniętych linków jest dosyć proste i nie wymaga jakieś dużej wiedzy z CSS lub HTML. Używają określenia obramowanie linka mam na...
Skrócenie zbyt długiego tekstu z użyciem CSS text-... Tym razem chcę pokazać jak skrócić tekst nie mieszczący się bloku np. tytuł wpisu na blogu do jednej linii co może być przydatne na responsywnej stron...
Menu zakończone grotem / strzałką CSS Jak pisałam w poprzednim poście CSS3 daje bardzo duże możliwości twórcą stron. Wspomniałam również o możliwości zastąpienia grafiki odpowiednią formuł...
Zaokrąglenie narożników z pomocą CSS Zaokrąglanie rogów dowolnego obiektu HTML (guzika, fotografii, obrazka, div) z pomocą CSS3 jest bardzo proste. Do tego celu nie potrzebujemy żadnych d...