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.
Co znajdziesz w tym wpisie
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>.
Na początek więc tworzymy zwykłą listę HTML (powyżej umieściłam link do wpisu o wypunktowanych, który w razie potrzeby przeprowadzi was przez budowę takiej listy). I dodajemy w niej odnośniki – w moim przypadku użyję jedynie „Link 1” i tak dalej.
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:
<ul class="menu">
<li>
<a href="">Link 1</a>
</li>
<li>
<a href="">Link 2</a>
</li>
<li>
<a href="">Link 3</a>
<ul>
<li>
<a href="">Link 3 1</a>
</li>
<li>
<a href="">Link 3 2</a>
</li>
</ul>
</li>
<li>
<a href="">Link 4</a></li>
<li>
<a href="">Link 5</a>
</li>
<li>
<a href="">Link 6</a>
<ul>
<li>
<a href="">Link 6 1</a>
</li>
<li>
<a href="">Link 6 2</a>
</li>
</ul>
</li>
<li>
<a href="">Link 7</a>
</li>
</ul>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ę.
<li> <ul> <li> </li> </ul> </li>
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:
.menu{
padding: 0px;
margin:0px;
display: inline-block;
}
.menu li{
float:left;
list-style:none;
}
.menu li a{
padding: 20px 15px;
display: inline-block;
text-decoration:none;
color: #ff5252;
}
.menu li:hover a{
background: #333;
color: #fff;
}
.menu li ul{
margin: 0;
padding: 0;
}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.
.menu li ul{
margin: 0;
padding: 0;
position: absolute;
z-index: 100;
display:none;
}
.menu li:hover ul{
display:block;
}
.menu li ul li{
display:block;
width: 100%;
}
.menu li ul li a{
width: 100%;
}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:
.menu{
padding: 0px;
margin:0px;
position:relative;
}
.menu li{
float:left;
list-style:none;
margin:0;
}
.menu li a{
padding: 20px 15px;
display: inline-block;
text-decoration:none;
position:relative;
z-index: 1;
color: #ff5252;
text-transform:uppercase;
}
.menu li:hover a{
background: #333;
color: #fff;
}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ć.
<nav>
<ul class="menu">
<li>
<a href="">Link 1</a>
</li>
<li>
<a href="">Link 2</a>
</li>
<li>
<a href="">Link 3</a>
<ul>
<li>
<a href="">Link 3 1</a>
</li>
<li>
<a href="">Link 3 2</a>
</li>
</li>
</ul>
<li>
<a href="">Link 4</a></li>
<li>
<a href="">Link 5</a>
</li>
<li>
<a href="">Link 6</a>
<ul>
<li>
<a href="">Link 6 1</a>
</li>
<li>
<a href="">Link 6 2</a>
</li>
</ul>
</li>
<li>
<a href="">Link 7</a>
</li>
</ul>
</nav>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ć.
See the Pen
Easy dropdown menu by Aura (@Julka85)
on CodePen.0
Poniżej możecie zobaczyć rozszerzoną wersję mojego kody o kilka animacji.
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.
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.