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:
Pisanie kodu CSS warto zacząć od wyzerowania wszystkich marginesów i paddingów oraz dodania pliku csshover2.htc:
* {
padding: 0;
margin: 0
}
body {
behavior:url(\"csshover2.htc\")
}
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:
#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:
#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:
#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:
#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 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ą i nadaną jej wysokością:
.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.
