Proste rozwijane poziome menu w CSS

laptop blog

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



Reading Time: 3 minutes

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ż

5 prostych efektów na obrazkach z wykorzystaniem h... Animacje aktywowane efektem typu hover (po najechaniu kursorem myszy) są zawsze ciekawym dodatkiem na stronie internetowej. Dzięki rozwiązaniom jakie ...
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ł...
Kolorowanie co drugiego wiersza css i jQuery ̵... Istnieje wiele metod kolorowania obiektów HTML takich jak tabela czy div. W tym wpisie postaram się przedstawić kilka z nich Standardowo chcąc poko...
Trójkąty za pomocą CSS Trójkąty na stronie przeważnie umieszcza się w formie ilustracji, jest to najpopularniejsza metoda jednak nie jedyna. Trójkąty można również stworz...