C
S
S

sevencats

seven-cats.com

artykuły

+home √ +artykuły √ +linki √ +email √
08.09.2004

Menu z ruchomym wskaźnikiem

Menu z ruchomym wskaźnikiem z lewej strony standardowo wykonuje się z użyciem prostego javascriptu wyświetlającego bądź ukrywającego obrazek umieszczony po lewej stronie opcji po najechaniu wskaźnika na opcję. Sprawia to wrażenie przesuwającego się wzdłuż listy opcji ruchomego wskaźnika.

Zaznaczanie już odwiedzonych opcji menu zwykle osiąga się przez zmianę kolru wyświetlania opcji lub przez zmianę odcienia tego koloru.

Jest jednak inny sposób na osiągnięcie tych efektów wyłącznie za pomocą Kaskadowych Arkuszy Stylów (CSS) bez użycia ani jednej linijki kodu javascript. Menu tej strony zostało tak właśnie stworzone.

Rozwiązanie takie możliwe jest właśnie z powodu "kaskadowości" CSS. Często używa się kaskady w rodzaju:

DIV.menu A {font-weight: bold;}

Do formatowania hiperłącza używa się pseudoklas A:link, A:visited, A:active i A:hover. Nic nie stoi na przeszkodzie wykorzystaniu takiego oto rozwiązania:

SPAN.wskaznik {visibility: hidden;}
SPAN.bylem {visibility: hidden;}
A:hover SPAN.wskaznik {visibility: visible;}
A:visited SPAN.bylem {visibility: visible;}

a w kodzie HTML:

<A HREF="index.html">
<SPAN CLASS="wskaznik">></SPAN>
home
<SPAN CLASS="bylem">&radic;</SPAN>
</A>

Taki zestaw znaczników jednak nie zadziała. Pseudoklasy muszą być wypełnione czyli musi być nadana uprzednio chociaż jedna właściwość, np.: kolor. Prawidłowy kod CSS powinien więc wyglądać tak:

SPAN.wskaznik {visibility: hidden;}
SPAN.bylem {visibility: hidden;}
A:hover {color: #F90;}
A:visited {color: #CCC;}
A:hover SPAN.wskaznik {visibility: visible;}
A:visited SPAN.bylem {visibility: visible;}

Ten kod zadziała w każdej przeglądarce w połączeniu z powyższym kodem HTML.

Wskaźniki ruchome mogą być tekstowe i graficzne tzn. kod HTML może wyglądać jak wyżej, ale może też wyglądać tak:

<A HREF="index.html">
<SPAN CLASS="wskaznik">
<IMG SRC="obrazek.gif">
</SPAN>
home
<SPAN CLASS="bylem">
<IMG SRC="obrazek.gif">
</SPAN>
</A>

Niestety, ten kod HTML nie zadziała w Internet Explorerze nawet w wersji 6.0 ServicePack1. IE nie wyświetli obrazków. Zarezerwuje dla nich miejsce ale nie wyświetli ich. IE musi mieć bezpośrednio podane bez SPAN:

<A HREF="index.html">
<IMG CLASS="wskaznik" SRC="obrazek.gif">
home
<IMG CLASS="bylem" SRC="obrazek.gif">
</A>

Oczywiście możemy skorzystać z PHP aby, zależnie od przeglądarki, zamieniać odpowiednie kawałki kodu. Tak to jest zrobione w stronie głównej tego serwisu. W stronie głównej działu CSS wykorzystane są tylko znaki tekstowe.

do góry
© Copyright 2004-2005, all rights reserved: seven-cats.com