Rozwijane poziome menu w HTML 5 i CSS 3
Jeszcze parę lat temu stworzenie rozwijanego menu na stronie internetowej było dla webmasterów zmorą. Bez kodu JavaScript, który zazwyczaj miał kilkaset linijek nikt nawet nie pokusił by się o zaimplementowanie takiego rozwiązania. Dzisiaj w dobie CSS 3 stworzenie rozwijanego menu to czysta przyjemności i co najważniejsze nie musimy już stosować żadnych skryptów działających po stronie klienta.
Tworzenie naszego menu rozpoczynamy oczywiście od zrobienia szkieletu w HTML 5:
<ul>
<li><a href="#">Strona główna</a></li>
<li><a href="#">Newsy</a>
<ul>
<li><a href="#">Internet</a></li>
<li><a href="#">Sprzęt</a>
<ul>
<li><a href="#">Komputery</a></li>
<li><a href="#">Tablety</a></li>
<li><a href="#">Telefony</a></li>
</ul>
</li>
<li><a href="#">Oprogramowanie</a></li>
<li><a href="#">Wydarzenia</a></li>
</ul>
</li>
<li><a href="#">Programowanie</a>
<ul>
<li><a href="#">C++</a></li>
<li><a href="#">C#</a></li>
<li><a href="#">Java</a></li>
</ul>
</li>
<li><a href="#">Poradniki</a>
<ul>
<li><a href="#">CMS</a>
<ul>
<li><a href="#">Drupal</a></li>
<li><a href="#">Joomla</a></li>
<li><a href="#">WordPress</a></li>
</ul>
</li>
<li><a href="#">HTML 5</a></li>
<li><a href="#">CSS 3</a></li>
</ul>
</li>
<li><a href="#">Kontakt</a></li>
</ul>Jak widać, mamy tutaj 3 poziomowe menu oparte o zagnieżdżoną listę punktową. Obecnie jest ona normalnie wyświetlana, a poszczególne elementy ustawione są jeden pod drugim. Końcowy efekt rozwijanego menu jaki chcemy uzyskać będzie możliwy dopiero po dodaniu odpowiednich stylów CSS. Przechodzimy więc teraz do naszego arkusza stylów zaimportowanego do pliku html i tam będziemy dalej pracować.
Początkowy efekt przy domyślnym formatowaniu listy:
Zaczniemy od zmiany orientacji naszej listy z pionowej na poziomą oraz ukrycia „punktów” oznaczających nowy element:
ul {
list-style: none;
}
ul > li {
float: left;
}W linijce drugiej wyłączamy styl listy (punktory), natomiast w linijce 5 dla każdego elementu li, którego rodzicem jest element ul (ul > li) ustawiamy opływanie z lewej strony czyli całą listę „układamy” poziomo.
Dla każdego pojedynczego elementu listy (li) dodamy jeszcze wyzerowany margines zewnętrzny i wewnętrzny oraz ustawimy pozycje wyświetlania na relative (relatywne), dzięki temu mamy możliwość przesuwania elementu o dowolną liczbę punktów. Przyda się to przy wyświetlaniu rozwijanego pod-menu:
ul > li {
margin: 0;
padding: 0;
float: left;
position: relative;
height: 30px;
}Każdy element li zawiera w sobie link. Znacznik a (ang. anchor, pl. kotwica) wykorzystamy go do tego, aby oddzielić poszczególne elementy menu od siebie. W tym celu musimy ustawić odpowiedni margines wewnętrzny (nie możemy dać tutaj marginesu zewnętrznego, gdyż kliknięcie w polu menu poza tekstem nie powodowało by przejścia do strony, którą wskazuje dana pozycja):
ul > li > a {
padding: 10px;
color: #444;
text-decoration: none;
}Jak widać powyżej, ja jeszcze dodałem kilka kosmetycznych zmian, czyli ustawiłem kolor odnośnika (tekstu) oraz wyłączyłem podkreślenie.
Teraz zabierzemy się za element ul, który tworzy rozwijane pod-menu. Musimy tutaj ustawić pozycję absolutną, tak aby „wyciągnąć” ten obiekt z normalnego układu strony i ustawić tam gdzie go potrzebujemy za pomocą stylów left oraz top. Dodatkowo musimy pamiętać, że normalnie on nie jest wyświetlany czyli przypisujemy jeszcze display: none:
ul > li ul {
padding: 0;
position: absolute;
display: none;
left: 0px;
top: 30px;
width: 200px;
text-align: left;
background-color: #fcfcfc;
border: 1px solid #ccc;
}Możemy również dodać parę dodatków wizualnych, czyli obramowanie, oraz tło.
Proszę jeszcze zwrócić uwagę na styl width gdzie określiliśmy szerokość listy na 200px. Tą wartość możemy ustalić według własnych potrzeb, ale warto zrobić tak, żeby dostosować to do najszerszego elementu w menu. Drugą ważną rzeczą jest znacznik top, ustawiony na 30px – ta wartość oznacza, że przesuwamy w dół całą rozwijaną listę o 30px, musi to być więc dostosowane do wysokości głównego menu.
Pozostało nam teraz „przesunąć” nasze pod-menu 3 stopnia (czyli ul li ul li ul) tak aby obok zmieściła się już rozwinięta lista 2 stopnia (ul li ul):
ul > li ul ul {
left: 200px;
top: -1px;
}I analogicznie dodajemy dla poszczególnych elementów menu 3 stopnia odpowiednie style:
ul > li ul li {
margin: 0;
padding: 0;
position: relative;
float: none;
height: auto;
}Należy tutaj pamiętać, że jest to już menu pionowe, czyli float (opływanie) ustawiamy na none gdyż wcześniej dla głównej listy ustawiliśmy left.
Teraz znowu analogicznie jak dla poprzednich elementów listy ustawiamy style dla znacznika a:
ul > li ul li a {
padding: 10px 20px;
color: #505050;
text-decoration: none;
display: block;
}Menu jest już prawie gotowe. Teraz pozostało nam tylko dodanie najważniejszych rzeczy czyli spowodowanie efektu rozwijania listy w momencie najechania na dany element.
Na początek trochę kosmetycznych zmian:
ul > li > a:hover,
ul > li:hover > a {
color: #de5f44;
text-decoration: underline;
}Czyli dla każdego elementu a, na którym jest właśnie kursor myszki i którego rodzicem jest li oraz elementu a, którego rodzicem jest element li na którym jest kursor myszki, dodajemy odpowiedni kolor tekstu oraz podkreślenie.
Nie możemy oczywiście zapomnieć o tym, żeby wyświetlić daną listę w momencie najechania myszką na odpowiednią opcję:
ul li:hover > ul {
display: block;
}Na samym końcu dodajemy parę stylów dla aktywnych elementów rozwijanych list 2 i 3 stopnia:
ul > li ul li a:hover,
ul > li ul li:hover > a {
text-decoration: none;
color: #fff;
background-color: #f26c4f;
}Cały kod:
ul {
list-style: none;
float: left;
}
ul > li {
margin: 0;
padding: 0;
float: left;
position: relative;
height: 30px;
}
ul > li > a {
padding: 10px;
color: #444;
text-decoration: none;
}
ul > li > a:hover,
ul > li:hover > a {
color: #de5f44;
text-decoration: underline;
}
ul > li ul {
padding: 0;
position: absolute;
display: none;
left: 0px;
top: 30px;
width: 200px;
text-align: left;
background-color: #fcfcfc;
border: 1px solid #ccc;
}
ul li:hover > ul {
display: block;
}
ul > li ul ul {
left: 200px;
top: -1px;
}
ul > li ul li {
margin: 0;
padding: 0;
position: relative;
float: none;
height: auto;
}
ul > li ul li a {
padding: 10px 20px;
color: #505050;
text-decoration: none;
display: block;
}
ul > li ul li a:hover,
ul > li ul li:hover > a {
text-decoration: none;
color: #fff;
background-color: #f26c4f;
}Demo
>> Zobacz demo – menu rozwijane w HTML 5 i CSS 3 <<
Przeczytaj również:
Efekt animacji wysuwania rozwijanego menu w CSS 3
Bardzo dobry wpis ;)