Bară de navigare 2

2 Apr

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

1
2
3
4
5
6

<ul id="fadeMenu">
    <li><a href="#" class="m1"><span>Home</span></a></li>
    <li><a href="#" class="m2"><span>About</span></a></li>
    <li><a href="#" class="m3"><span>Faq</span></a></li>
    <li><a href="#" class="m4"><span>Contact</span></a></li>
</ul>


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

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

1
2
3
4
5
6
7
8
9

/* < ![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 ;)

Scris în categoria: Css, Tutoriale, jQuery

7 Comentarii »

  1. 2 April 2008 madalin a spus:

    Mishto! Chiar acum ma chinui la un meniu :P

  2. 2 April 2008 pixel a spus:

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

  3. 3 April 2008 Marius a spus:

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

  4. 4 April 2008 Staicu Ionuț Bogdan a spus:

    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

  5. 28 May 2008 Andrei a spus:

    Cat am cautat asa ceva. :D
    Problema mea e ca as vrea sa am si text link langa imagine(vezi site-ul meu) fara sa fie in lista.

    Meniul taiat in CSS e eficient, stiu, dar sa zicem ca vrei sa aplici efectul la o singura imagine. Trebuie sa fac un stylesheet in care sa fac #fadeMenu li ptr fiecare imagine?

    PS: Scriptul folosit de mine e aici: http://www.javascript-fx.com/fade_ro…help/help.html

  6. 7 June 2008 flipper. a spus:

    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

        <a href="#" rel="nofollow">Home</a>
    <a href="#" rel="nofollow">About</a>
    <a href="#" rel="nofollow">Faq</a>
    <a href="#" rel="nofollow">Contact</a>

    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.

  7. 7 June 2008 Staicu Ionuț Bogdan a spus:

    Flipper, nu prea am înţeles ce ai nevoie :|

Lasă un comentariu

Poţi folosi câteva taguri XHTML: <blockquote> <strong> <a> <em>

Pentru a posta secvenţe de cod, foloseşte
<pre lang="php/css/html/javascript"> CODUL TĂU <pre>