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



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 :D Momentan e gata, dar e în teste o perioadă. Vei afla imediat ce e gata dacă m-ai adăugat în RSS reader ;)

9 Comentarii

Staicu Ionuț Bogdan a scris

Cool .. cand vedeam astfel de meniuri credeam ca sunt facute in flash

este posibil ca acele meniuri chiar sa fi fost facute in flash :)

Noroc cu Ionutz ca isi mai face pomana cu noi astia mai micii

Mishto! Chiar acum ma chinui la un meniu

cu placere. ma bucur sa vad ca am ajutat pe cineva ;)
In viitor voi incerca sa mai fac diverse tutoriale in limita timpului. si a ideilor.
Daca are cineva vreo idee sau request de tutorial neintalnit nicaieri, shoot me :D

flipper. a scris

salut. ai putea totusi, sa ne dai o idee.. poate nu ai timp sa faci un intreg tutorial pe tema asta… avem un meniu simplu

    Home
    About
    Faq
    Contact

sa i se schimbe automat class din „simplu” in „automat”, in functie de pagina in care se afla? e ceva legat mai mult de php, dar ma intereseaza pentru ca tine si de css… un lucru destul de important zic eu… chestia asta nu am vazut pe nici un site, si o caut de mult… multumesc.

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