Bară de navigare 2

Așa cum am spuneam aici, puneam la cale o bară de navigare asemănătoare cu asta cu diferența că cea din urmă are și un efect drăguț.

Trebuie să precizez întâi de toate dezavantajele acestei metode (da, există niște dezavantaje):

• Fiecare link necesită o imagine. Asta înseamnă că în momentul în care vrei să schimbi textul trebuie să modifici imaginea. Dacă este pentru un site ce nu-și schimbă prea des link-urile, nu este o problemă serioasă;
• Cod suplimentar. La fel ca și prima bară de navigare de altfel. În locul unui span se poate folosi orice element inline: em, strong, etc.

Codul este asemănător cu cel anterior, cu diferența că fiecare link are o clasă:

    
Home
    
About
    
Faq
    
Contact

Așa cum am spus mai sus, pentru link-uri voi folosi imagini, dar, pentru a reduce numărul cererilor către server, voi folosi o singură imagine ce le conține pe toate (sprites):

#fadeMenu li {
	list-style:none;
	float:left;
	width:86px;
	text-align: center;
	border: 1px solid #fff;
}
#fadeMenu li a,
#fadeMenu li a span {
	display:block;
	width:86px;
	height:37px;
	background:url(images/links_03.png) no-repeat left top;
}
#fadeMenu li a.m1 {background-position:0 0}
#fadeMenu li a.m2 {background-position:-109px 0}
#fadeMenu li a.m3 {background-position:-209px 0}
#fadeMenu li a.m4 {background-position:-297px 0}

#fadeMenu li a.m1 span {background-position:0 -38px}
#fadeMenu li a.m2 span {background-position:-109px -38px}
#fadeMenu li a.m3 span {background-position:-209px -38px}
#fadeMenu li a.m4 span {background-position:-297px -38px}

#fadeMenu li a span {
	opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);
	text-indent:-9999px;
}

Rezultatul îl poți vedea aici (click) iar codul CSS consider că este destul de explicit și nu necesită explicatii suplimentare.

Scriptul necesar efectului este bazat pe jQuery (în cazul proiectelor medii sau mari consider necesară folosirea unei librării JS, fie că este jQuery, moo, prototype, dojo, etc) și este foarte scurt:

/* < ![CDATA[ */
$(document).ready(function(){
	$('ul#fadeMenu a').hover(function(){
		$(this).find('span').fadeTo(300, 1)
	}, function(){
		$(this).find('span').fadeTo(300, 0)
	});
});
/* ]]> */

În cazul unei pagini stufoase, cu multe elmente în cod, recomand (din considerente de viteză) ca selectorii folosiți în orice librărie JS să fie cât mai expliciți: $('ul#fadeMenu a'), altfel librăria „traversează” toate elementele ce pot avea un ID (aproape toate elementele pot avea un ID). În cazul în care selectorul este explicit (cum am făcut eu), librăria citește doar elementele UL și se oprește la ID-ul corespunzător.

Rezultatul îl poți vedea aici (click).

Pregătesc și un plugin pentru jQuery. Este primul meu plugin și este un star-rating mai… special Momentan e gata, dar e în teste o perioadă. Vei afla imediat ce e gata dacă m-ai adăugat în RSS reader