Menu jest najważniejszą częścią serwisu internetowego. To ono kieruje odwiedzające osoby do odpowiednich działów i dzięki niemu wyszukiwarki są w stanie przejrzeć całość, zindeksować i pokazać odpowiedni link na liście wyników. Menu może być zrobione z samego tekstu, z obrazków lub z obrazków i tekstu.

Wstęp

Menu jest najważniejszą częścią serwisu internetowego. To ono kieruje odwiedzające osoby do odpowiednich działów i dzięki niemu wyszukiwarki są w stanie przejrzeć całość, zindeksować i pokazać odpowiedni link na liście wyników. Menu może być zrobione z samego tekstu, z obrazków lub z obrazków i tekstu. Najczęściej stosowane są znaczniki <a href> oraz listy <ul> lub <ol>.

Przyjmijmy, że menu będzie miało następującą postać:

<ul>
<li><a href="adres">tekst</a></li>
</ul>

Naszym celem jest uzyskanie menu zawierającego elementy graficzne (reagujące na kursor myszki) oraz elementy tekstowe (w przypadku wyłączenia obrazków w przeglądarce internetowej).

Html

Na początek zrobimy proste menu składające się z jednego elementu:

<ul>
<li><a href="adres">tekst<span></span></a></li>
</ul>

Jak widać nie różni się ono zbytnio od wcześniejszego, dodany został jedynie element span. To w nim umieścimy grafikę. Teraz należy dodać do poszczególnych elementów style, dzięki którym menu ożyje. Zanim do tego przejdziemy zmodyfikujmy menu jeszcze raz – dodamy kilka elementów oraz identyfikatory ułatwiające przypisanie css:


<ul id="menu">
<li><a href="adres1">tekst1<span id="m1"></span></a></li>
<li><a href="adres2">tekst2<span id="m2"></span></a></li>
<li><a href="adres3">tekst3<span id="m3"></span></a></li>
</ul>

CSS

Menu może być ułożone w pionie (wtedy nie trzeba zbyt wiele robić) lub w poziomie. W tym przypadku należy ułożyć wszystkie elementy obok siebie:

#menu {
 list-style:none ;
}
#menu li {
 float: left ;
 width: 100px ;
 height: 20px ;
}

Następnie należy ustawić elementy span tak, aby zakryły one sąsiedni tekst. W tym celu posłużymy się stylem położenia:

#menu a {
 position: relative ;
}
#menu span {
 position: absolute ;
 top: 0 ;
 left: 0 ;
}

Położenie absolute wymusza ustawienie się elementu w określonym miejscu ekranu.  Wszystkie elementy span wyświetliły by się w lewym górnym rogu ekranu, gdyby nie położenie relative przypisane do rodzicielskich elementów a. Dzięki temu span ustawiają się bezwzględnie wewnątrz linków.

Skasowane dane to nie zawsze tragedia - ściągnij program i odzyskaj dane

Span jest elementem liniowym, dlatego też przyjmuje wymiary tego, co jest umieszczone wewnątrz niego. Trzeba zmienić to zachowanie i spowodować, żeby span umieszczony w menu miał określoną wysokość i szerokość.

#menu span {
 display: block ;
 width: 100px ;
 height: 20px ;
}

Pora na określenie grafiki jaka ma się pojawiać w menu (przy okazji możemy określić kolor tła):

#menu span {
 background: #f00 url( gfx/menu.png ) no-repeat 0 0 ;
}

Jak widać do elementów span przypisany będzie jeden obrazek (css-sprites). Po odświeżeniu strony zobaczymy menu złożone z tych samych kawałków. Trzeba się tym zająć:

#menu #m2 {
 background-position: -100px 0 ;
}
#menu #m3 {
 background-position: -200px 0 ;
}

Przesunięcie wymagane jest jedynie w przypadku kolejnych elementów menu, dlatego też do #m1 nie jest konieczne dodawanie stylu.

Na koniec należy zatroszczyć się o zmianę grafiki po najechaniu myszką na element menu:

#menu #m1:hover {
 background-position: 0 -20px ;
}
#menu #m2:hover {
 background-position: -100px -20px ;
}
#menu #m3:hover {
 background-position: -200px -20px ;
}

W przypadku IE6 należy zadbać dodatkowo o naprawienie :hover :

body {
 behavior: url("csshover3.htc");
}

Uwagi końcowe

Menu może być także pozbawione elementów span. Wtedy to do znaczników a przypisuje się w stylu przesunięcie tekstu:

a {
text-indent: -999em;
}

Spowoduje to wyrzucenie tekstu poza ekran.

W przypadku Firefoxa można zobaczyć kropkowaną otoczkę pojawiającą się przy kliknięciu na poszczególne elementy menu. Aby ją usunąć należy dodać do styli następujący wpis:

a:focus {
outline:none;
}

Jeżeli menu generowane jest poprzez Smarty, to wystarczy poniższy zapis:

<ul id="menu">
{section name=m loop=$menu}
<li><a href="{$menu[m].adres}">{$menu[m].tekst}<span id="m{$smarty.section.m.iteration}"></span></a></li>
{/section}
</ul>