Tworzymy div-a jako kontener dla menu i nadajemy mu identyfikator id:
<div id="menu"> </div>
Wstawiamy do kontenera potrzebne odnośniki:
<div id="menu"> <a href="http://www.onet.pl">Mój ulubiony portal</a> <a href="http://www.goole.pl">Fajna wyszukiwarka</a> <a href="http://www.stachu.pl">Strona wuja Stacha</a> </div>
Przechodzimy do arkusza stylów i tam piszemy na przykład tak:
#menu
{ width: 200 px;
height: 200px;
background-color: silver; }
Teraz div pełniący funkcję menu staje się szarym kwadratem 200 x 200 pikseli. Ograniczenie szerokości jest potrzebne, ponieważ zwykle nie chcemy, by menu zajmowało 100% szerokości strony. Możemy także dodać następującą linię:
#menu
{ width: 200 px;
height: 200px;
background-color: silver;
overflow: auto; }
Deklaracja overflow: auto; spowoduje pojawienie się suwaków w kontenerze menu, jeśli zawartość przestanie się w nim z jakiegoś powodu mieścić. Nie jest to wskazane w przypadku akurat menu i warto pozostawić zapas miejsca na wszelki wypadek*, ale dzięki temu strona nie utraci funkcjonalności nawet kiedy Wasz niedowidzący wuj Stach powiększy tekst do granic możliwości w swojej przeglądarce. Możecie upiększyć swój kontener na menu dowolnymi stylami, ja jednak przejdę do sedna.
Tworzymy style dla odnośników w menu - poniższa konstrukcja umożliwia nadanie stylu wszystkim <a href=""> znajdujących się wewnątrz pojemnika oznaczonego jako id="menu":
#menu a:link { }
#menu a:visited { }
#menu a:hover { }
Pseudoklasa a:hover oznaczająca stan, w którym wskaźnik myszy jest nad odnośnikiem, musi być na końcu bo inaczej nie zadziała - ale jak dotąd nie udało mi się dowiedzieć czemu tak się dzieje**. Jeśli ktoś wie - niech powie. I teraz klucz do sukcesu:
#menu a:link
{ display:block;
color: red;
background-color: black; }
#menu a:visited
{ display:block;
color: red;
background-color: black; }
#menu a:hover
{ display:block;
color: white;
background-color: red; }
Deklaracja display:block jest tu najistotniejsza - sprawia że element jest wyświetlany jako blokowy - dzięki temu kolor tła wypełnia całą dostępną szerokość i nie kończy się razem z końcem tekstu. Teraz linki w menu są wyświetlane pod sobą bez konieczności dodawania <br /> i mają formę schludnych, czarnych prostokątów z czerwonym tekstem. Zamiana kolorów w stanie "hover" sprawia że tło zmienia się na czerwone a tekst robi się biały. Ot i cała filozofia. Możemy także dodać komendy definiujące parametry ramki i zmienić te parametry w stanie najazdu, podobnie jak uczyniliśmy z kolorem tła w przykładzie. Niezły efekt daje na przykład pogrubienie ramki z lewej lub prawej strony, w celu uzyskania kwadratu który może zmieniać kolor niezależnie od reszty obramowania. Jeśli jesteśmy zdolnymi grafikami możemy się także pokusić o dodanie w tle przycisku obrazka i podmienianie go w analogiczny sposób. Co więcej - tło można wypozycjonować względem prostokąta przycisku.
Opisany sposób tworzenia przycisków z efektem najazdu ma wiele zalet - nie trzeba pisać żadnych skryptów, menu nie sprawia problemów w żadnym rodzaju urządzenia oferującego dostęp do internetu, nawet jeśli to będzie internetowa lodówka. Jest przyjazne dla wyszukiwarek i osób używających oprogramowania czytającego tekst, z uwagi na użycie tekstu zamiast obrazka. Ponadto tak zrobione menu możemy łatwo przerabiać i uzupełniać, ponieważ nie trzeba za każdym razem robić nowych obrazków z napisami - to miła cecha oszczędzająca czas i pieniądze.
Spis poleceń css można znaleźć w nieśmiertelnym kursie Pawła Wimmera na stronie wydawnictwa HELION - http://webmaster.helion.pl To samo wydawnictwo oferuje też stosowne podręczniki.
Małgorzata 'Asfodel' Jakubiak*Żeby sprawdzić o czym piszę można wejść za pomocą Mozilli (IE 6.0 nie skaluje tekstu opisanego w pikselach) na przykład na stronę onetu i maksymalnie powiększyć tekst. Uważam jednak, że użytkownik ma prawo powiększać sobie literki jeśli niedowidzi, w związku z czym zabezpieczam użyteczność stron za pomocą dodawania opcjonalnych suwaków w niezbędnych miejscach.
**Proszę pamiętać, że nie mam informatycznego wykształcenia.
