Ciekawe menu w css cz. 2
Jest to druga część artykułu o ciekawych menu w css. To rozwiązanie jest kontynuacją przykładu drugiego z pierwszej części artykułu. Tym razem stworzymy menu ze stanem current, jak i hover. Ponadto wielkość zakładek zależeć będzie od wielkości tekstu (z drobnym warunkiem, że nie może być dłuższy niż 200px). Najpierw należy pobrać dwa pliki cale0.png i cale.png. Obydwa pliki mają 200px szerokości więc tekst odnośników nie może być dłuższy niż właśnie 200px. Jeśli przewidujemy dłuższy tekst musimy po prostu stworzyć szersze obrazki. Końcowy efekt przedstawia przykład. Najpierw tworzymy kod html.
<ul id="menu"> <li><a href="#"><span>Strona główna</span></a></li> <li><a href="#"><span>Artykuły</span></a></li> <li class="current"><a href="#"><span>Portfolio</span></a></li> <li><a href="#"><span>Dodatki</span></a></li> <li><a href="#"><span>Kontakt</span></a></li> <li><a href="#"><span>Linki</span></a></li> </ul>
ul#menu {width: 800px; padding:0; margin:0; list-style:none; height:31px; background:#fff; position:relative;}
#menu li {float:left;}
Są to style dla listy i jej elementów. Dla listy określamy szerokość na 800px, zerowe marginesy (padding i margin) oraz usuwamy domyślne markery (list-style: none). Ustawiamy ponadto wysokość na 31px (jest to wysokość obrazków tła), tło koloru białego i pozycjonowanie relatywne. Dla elementów li określamy opływanie. Kolejne style są następujące.
#menu li a {display:block; float:left; height:31px; background:url(cale0.png) no-repeat; text-decoration:none; font: bold 12px /31px verdana, sans-serif; text-align:center; padding:0 0 0 12px; cursor:pointer; color: #f7941d}
#menu li a span {float:left; display:block; padding:0 9px 0 0; background:url(cale0.png) right top}
Odnośniki wyświetlamy w bloku, nadajemy im opływanie z lewej strony i wysokość. Obrazkiem tła będzie cale0.png. Ustawienia czcionki określa parametr font (ustawione są po kolei waga, wielkość, odstęp między wierszami i rodzaj czcionki). Określamy ponadto wyrównanie tekstu do środka, padding i kolor czcionki. Ustawiamy kursor na przedstawiający rączkę (bez atrybutu cursor: pointer kursor przyjmie postać kursora tekstowego, przez to, że wewnątrz znacznika a znajduje się jeszcze span). Dla elementu span dodajemy opływanie z lewej, wyświetlenie w bloku, padding i tło cale0.png wyrównane do prawej i do góry. Kolejne definicje dotyczą klasy current.
#menu li.current a:link, #menu li.current a:visited {color:#fff; background:url(cale.png) no-repeat;}
#menu li.current a:link span, #menu li.current a:visited span {background:url(cale.png) right top;}
Dla odsyłaczy umieszczonych wewnątrz znacznika li z klasą current zmieniamy kolor tekstu na biały, tło ustawiamy na cale.png (oczywiście bez jego powtarzania no-repeat). Dla znacznika span wewnątrz current ustawiamy obrazek tła na cale.png wyrównane do prawej i do góry. Pozostało nam tylko zdefiniować styl dla pseudoklasy hover.
#menu li a:hover {color: white; background:url(cale.png) no-repeat}
#menu li a:hover span {background:url(cale.png) right top}
#menu li.current a:hover {color:#fff; background:url(cale.png)}
#menu li.current a:hover span {background:url(cale.png) right top}
Dla odnośników wskazanych myszką (a:hover) nadajemy biały kolor tekstu oraz tło cale.png (tak samo jak dla klasy current). Dla elementu span wewnątrz a:hover określamy tło cale.png. Zdefiniujemy jeszcze wygląd klasy current po najechaniu myszką (jest to opcjonalne). Jak widać style są określone tak samo jak dla zwykłej pseudoklasy hover.