Menu na stronie: graficzno-tekstowe

Autor: JANUZI

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.

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>