Am observat că sunt destul de mulți programatori în devenire ce nu știu (sau întâmpină greutăți) să facă o bară de navigare cu fundal diferit la hover. Este o metodă ce o folosesc foarte des, fără să am probleme în diferite browsere.
PASUL I
Meniul propriu zis este realizat folosind o listă neordonată:
<ul id="slidingDemo"> <li><a href="#"><span>Home</span></a></li> <li><a href="#"><span>About</span></a></li> <li><a href="#"><span>Faq</span></a></li> <li><a href="#"><span>Contact</span></a></li> </ul>
Primul pas este așezarea orizontală a listei:
#slidingDemo li{
list-style:none;
float:left;
margin:0 10px;
}
Întrucât IE6 tratează un pic diferit float-urile și marginile, adăugăm și
* html #slidingDemo li {display:inline}
Este un hack ce este interpretat doar de IE6, neafectând funcționarea în browserele adevărate.
PASUL II
Imaginea de fundal trebuie să fie mai lată decât textul și este necesar să aibe două „stări” (normal și hover), după care purcedem la stilizarea link-urilor.
#slidingDemo li a{
display:block;
background:url(buton.gif) no-repeat left top;
height:26px;
padding-left:10px;
color:#fff;
font:700 .88em/26px Arial, Helvetica, sans-serif;
text-decoration:none;
}
Un stil asemănător se aplică si la elementul SPAN din interiorul link-ului:
#slidingDemo li a span {
display:block;
background:url(buton.gif) no-repeat right top;
height:26px;
line-height:26px;
margin-right:-3px;
padding-right:10px
}
Dacă imaginea nu este transparentă, marginea negativă NU este necesară!
În momentul de față, rezultatul arată cam așa (click).
PASUL III
După ce meniul arată corespunzător, este necesar să-i face și un efect la hover. Cum am zis mai devreme, imaginea are două stări: una normală (default, folosită mai sus) și una pentru hover, ce o vom folosi în continuare:
#slidingDemo li a:hover {background-position:left bottom}
#slidingDemo li a:hover span {background-position:right bottom}
PASUL III.1
Întrucât IE6 este un pic mai… special, are nevoie de o atenție deosebită. Elementele de tip block au lățime 100% și se comportă ca atare. Pentru a rezolva acest bug, ne vom folosi de un alt bug: width (ca și height) se comportă ca și min-width. Soluția fiind așadar:
* html #slidingDemo li a,
* html #slidingDemo li a span {
width:1%;
white-space:nowrap;
cursor:pointer;
}
white-space:nowrap este folosit pentru a evita experiențe neplăcute.
O altă problemă este atunci când span are margine negativă, depășind lățimea elementului părinte (a). Soluția cea mai la îndemână găsită a fost un z-index mărit și o poziționare relativă (pentru a permite funcționarea z-index):
* html #slidingDemo li a span {
position: relative;
z-index: 2;
}
Rezultatul final aici (click).
nice…tnx
simplu si la obiect…super
Simpatic:D
Nice, de mult cautam asa ceva.
Si cum pastrezi backgroundul de hover pentru un item activ?
îi dai o clasă la link-ul activ, de ex. class=”s” iar în css adaugi:
#slidingDemo li a:hover, #slidingDemo li a.s {background-position:left bottom} #slidingDemo li a:hover span, #slidingDemo li a.s span {background-position:right bottom}Pregătesc un tutorial și mai frumos (tot despre meniuri) dar cu puțin jQuery (sau orice altă librărie). Š¢ine aproape!
Gracias
Buna sunt Nanni mi-ai raspuns cu acest exemplu la o intrebare pe care am pus-o pe forumul php, am incercat sa copiez exemplul in calac si nu imi apare????? am internet explorer 6 de ce???
nanni, acum am vazut si eu intrebarea ta…pai cum observi..ionut foloseste 2 imagini..background:url(buton.gif) deci iei imaginile si le salvezi in folderul cu codul css …. sper ca team ajutat…foarte frumos tutorial.:)
PS : de adaugat la cele 2 hovere un cursor:pointer; Pare mai intregit (asta pentru IE)