Rozwijane menu w 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. <ul id="menu">
 2.     <li><a href="">Jeden</a>
 3.      <ul class="one">
 4.      <li><a href="">Jeden-jeden</a></li>
 5.      <li><a href="">Jeden-dwa</a></li>
 6.      <li><a href="">Jeden-trzy</a></li>
 7.      <li><a href="">Jeden-cztery</a></li>
 8.      <li><a href="">Jeden-pięć</a></li>
 9.      </ul>
10.     </li>
11.     <li><a href="">Dwa</a>
12.      <ul id="two">
13.      <li><a href="">Dwa-jeden</a></li>
14.      <li><a href="">Dwa-dwa</a></li>
15.      <li><a href="">Dwa-trzy</a></li>
16.      <li><a href="">Dwa-cztery</a></li>
17.      <li><a href="">Dwa-pięć</a></li>
18.      </ul>
19.     </li>
20.     <li><a href="">Trzy</a>
21.      <ul id="three">
22.      <li><a href="">Trzy-jeden</a></li>
23.      <li><a href="">Trzy-dwa</a></li>
24.      <li><a href="">Trzy-trzy</a></li>
25.      <li><a href="">Trzy-cztery</a></li>
26.      <li><a href="">Trzy-pięć</a></li>
27.      </ul>
28.     </li>
29.     <li><a href="">Cztery</a>
30.      <ul id="four">
31.      <li><a href="">Cztery-jeden</a></li>
32.      <li><a href="">Cztery-dwa</a></li>
33.      <li><a href="">Cztery-trzy</a></li>
34.      <li><a href="">Cztery-cztery</a></li>
35.      <li><a href="">Cztery-pięć</a></li>
36.      </ul>
37.     </li>
38.     <li><a href="">Pięć</a>
39.      <ul id="five">
40.      <li><a href="">Pięć-jeden</a></li>
41.      <li><a href="">Pięć-dwa</a></li>
42.      <li><a href="">Pięć-trzy</a></li>
43.      <li><a href="">Pięć-cztery</a></li>
44.      <li><a href="">Pięć-pięć</a></li>
45.      </ul>
46.     </li>
47. </ul>

Listing zwinięty - 49 linii

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

[+]

[-]

 

 

 

1. * {
2. padding: 0;
3. margin: 0
4. }
5. body {
6. behavior:url("csshover2.htc")
7. }

Listing zwinięty - 8 linii

Plik csshover2.htc jest przeznaczony dla Internet Explorera. Dzięki niemu możesz stosować pseudoklasę :hover 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ść position:relative 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. #menu {
2. position: absolute;
3. list-style-type: none;
4. }
5. #menu ul {
6. list-style-type: none;
7. }

Listing zwinięty - 7 linii

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. #menu li {
2. float: left
3. }
4. #menu li li {
5. float: none
6. }

Listing zwinięty - 7 linii

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. #menu li a {
 2. display: block;
 3. width: 150px;
 4. text-align: center;
 5. background: #E6E7E8;
 6. color: #656E75;
 7. padding: 3px 0;
 8. text-decoration: underline
 9. }
10.  
11. #menu li a:hover {
12. background: #CDCECF;
13. color: #383D41;
14. text-decoration: none
15. }

Listing zwinięty - 16 linii

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

[+]

[-]

 

 

 

1. #menu li ul {
2. position: absolute;
3. height: 1px;
4. overflow:hidden
5. }
6.  
7. #menu li:hover ul {
8. height:200px
9. }

Listing zwinięty - 9 linii

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 csshover2.htc. 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ą:

 

 

 

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

i nadaną jej wysokością:

[+]

[-]

 

 

 

1. .przerwa {
2. height: 30px;
3. }

Listing zwinięty - 4 linii

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.