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ă:

1
2
3
4
5
6

<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:

1
2
3
4
5

#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

1

* 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.

1
2
3
4
5
6
7
8
9

#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:

1
2
3
4
5
6
7
8

#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:

1
2

#slidingDemo li a:hover {background-position:left bottom}
#slidingDemo li a:hover span {background-position:right bottom}

Demo (click)

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:

1
2
3
4
5
6

* 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):

1
2
3
4

* html #slidingDemo li a span {
	position: relative;
	z-index: 2;
}

Rezultatul final aici (click).