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

10 Comentarii

Staicu Ionuț Bogdan a scris

î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!

xdetective a scris

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

Adaugă un comentariurăspuns pentru

Link-urile în context sunt binevenite. Comentariile fără nume/email valid sunt șterse.
PS: Comentariul NU este editabil.

Site-ul blog.iamntz.com utilizează cookie-uri. Continuarea navigării presupune acceptarea lor. Mai multe informații.

windows apple dropbox facebook twitter
windows apple dropbox facebook twitter