Bară de navigare

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}

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:

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