Menu to jeden z ważniejszych elementów każdej strony internetowej. Występuje w różnych odmianach, ale jego przejrzysta budowa jest jednym z istotniejszych czynników wpływających na łatwość nawigacji w serwisie. Wielu webmasterów decyduje się na menu rozwijane, wykorzystując do tego skomplikowany JavaScript. Czy nie jest to jednak strzelanie z armaty do muchy? Sprawdźmy, czy rozwijane menu można stworzyć wyłącznie za pomocą CSS.

Dlaczego warto tworzyć rozwijane menu
za pomocą CSS? Można wymienić kilka
przyczyn. Pierwsza to oszczędność czasu
poświęcanego na pisanie skomplikowanego kodu
JavaScript. Druga to mniejsza objętość kodu, Należy
też pamiętać o osobach, które mogą później
pracować ze stworzonym przez ciebie kodem.

Powinien więc być on prosty, przejrzysty, intuicyjny.
Trzecia przyczyna to ułatwienie modyfikacji strony
przez ciebie samego – np. po kilku latach niezaglądania
do jej kodu. Dodać do tego należy jeszcze, że
menu w CSS pozwala uniezależnić się od włączonej
obsługi JavaScriptu w przeglądarce internetowej
osoby odwiedzającej stronę.

Menu krok po kroku

Realizację rozwijanego menu należy zacząć
od edycji kodu HTML. Powinien on zawierać listę
nieuporządkowaną z nadanym identyfikatorem
i kilkoma zagnieżdżonymi listami:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

<ul id=\"menu\">
    <li><a href=\"\">Jeden</a>
     <ul class=\"one\">
     <li><a href=\"\">Jeden-jeden</a></li>
     <li><a href=\"\">Jeden-dwa</a></li>
     <li><a href=\"\">Jeden-trzy</a></li>
     <li><a href=\"\">Jeden-cztery</a></li>
     <li><a href=\"\">Jeden-pięć</a></li>
     </ul>
    </li>
    <li><a href=\"\">Dwa</a>
     <ul id=\"two\">
     <li><a href=\"\">Dwa-jeden</a></li>
     <li><a href=\"\">Dwa-dwa</a></li>
     <li><a href=\"\">Dwa-trzy</a></li>
     <li><a href=\"\">Dwa-cztery</a></li>
     <li><a href=\"\">Dwa-pięć</a></li>
     </ul>
    </li>
    <li><a href=\"\">Trzy</a>
     <ul id=\"three\">
     <li><a href=\"\">Trzy-jeden</a></li>
     <li><a href=\"\">Trzy-dwa</a></li>
     <li><a href=\"\">Trzy-trzy</a></li>
     <li><a href=\"\">Trzy-cztery</a></li>
     <li><a href=\"\">Trzy-pięć</a></li>
     </ul>
    </li>
    <li><a href=\"\">Cztery</a>
     <ul id=\"four\">
     <li><a href=\"\">Cztery-jeden</a></li>
     <li><a href=\"\">Cztery-dwa</a></li>
     <li><a href=\"\">Cztery-trzy</a></li>
     <li><a href=\"\">Cztery-cztery</a></li>
     <li><a href=\"\">Cztery-pięć</a></li>
     </ul>
    </li>
    <li><a href=\"\">Pięć</a>
     <ul id=\"five\">
     <li><a href=\"\">Pięć-jeden</a></li>
     <li><a href=\"\">Pięć-dwa</a></li>
     <li><a href=\"\">Pięć-trzy</a></li>
     <li><a href=\"\">Pięć-cztery</a></li>
     <li><a href=\"\">Pięć-pięć</a></li>
     </ul>
    </li>
</ul>

Pisanie kodu CSS warto zacząć od wyzerowania
wszystkich marginesów i paddingów oraz dodania
pliku {stala}csshover2.htc{/stala}:

1
2
3
4
5
6
7

* {
padding: 0;
margin: 0
}
body {
behavior:url(\"csshover2.htc\")
}

Plik csshover2.htc jest przeznaczony dla
Internet Explorera. Dzięki niemu możesz stosować
{stala}pseudoklasę :hover{/stala} dla elementów innych niż hiperłącza, czego IE domyślnie nie obsługuje. Plik
znajdziesz do pobrania na stronie http://www.xs4all.nl/~peterned/csshover.html.

Główna lista zawierająca menu musi być
pozycjonowana absolutnie, ponieważ kolejne
zagnieżdżone listy będą pozycjonowane absolutnie
właśnie w odniesieniu do niej. Niestety właściwość
{stala}position:relative{/stala} nie działa poprawnie w Internet
Explorerze. Spójrz więc na kod uzupełniony o elementy
usuwające wypunktowania we wszystkich
użytych listach nieuporządkowanych:

1
2
3
4
5
6
7

#menu {
position: absolute;
list-style-type: none;
}
#menu ul {
list-style-type: none;
}

Następnie należy sprawić, aby elementy głównej
listy układały się jeden za drugim, przywracając
zarazem normalne zachowanie elementów list
zagnieżdżonych:

1
2
3
4
5
6

#menu li {
float: left
}
#menu li li {
float: none
}

Ważnym elementem menu są odnośniki.
Zamień je w elementy blokowe tak, aby wypełniły
całą zawartość elementów list. Do poniższego
kodu dołączone zostały także odpowiednie style
reprezentacyjne:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#menu li a {
display: block;
width: 150px;
text-align: center;
background: #E6E7E8;
color: #656E75;
padding: 3px 0;
text-decoration: underline
}
 
#menu li a:hover {
background: #CDCECF;
color: #383D41;
text-decoration: none
}

Za główną sztuczkę z rozwijaniem menu odpowiedzialny
jest poniższy kod:

1
2
3
4
5
6
7
8
9

#menu li ul {
position: absolute;
height: 1px;
overflow:hidden
}
 
#menu li:hover ul {
height:200px
}

Zagnieżdżone listy o wysokości jednego
piksela z zastosowaną właściwością overflow są
praktycznie niewidoczne. Zostają rozszerzone, gdy
kursor myszy znajdzie się nad nadrzędnym dla nich
głównym elementem listy (odpowiada za to druga
reguła). Sposób ten nie zadziałałby poprawnie w
Internet Explorerze, gdyby nie dołączony wcześniej
plik {stala}csshover2.htc{/stala}. Ważną funkcję spełnia tutaj pozycjonowanie
absolutne. Dzięki niemu rozwinięte
listy układają się ponad znajdującą się pod nimi
treścią, nie rozpychając jej.

Musisz pamiętać, że wszystkie elementy menu
mają nadaną właściwość float, więc nie ma ono
określonej wysokości. Z tej przyczyny należy sztucznie
uzupełnić brakującą wysokość strony. Możesz
pod kodem zawierającym menu umieścić pudełko
z odpowiednią klasą:

1

<div class=\"przerwa\"></div>

i nadaną jej wysokością:

1
2
3

.przerwa {
height: 30px;
}

Wszystkie zagnieżdżone listy otrzymały identyfikatory,
dzięki którym można im nadać dodatkowe
style. W ten sposób łatwo przeniesiesz rozwijane
menu do swojego serwisu. Cały kod przykładu
opisanego w tym artykule znajdziesz w załącznikach do tego artykułu.

Może Cię zainteresować:

1. JavaScript: Rozwijane menu
2. GIMP i webmastering: Obrysowanie menu przy użyciu ścieżek
3. Jak stworzyć samostartujące menu na CD?