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 Momentan e gata, dar e în teste o perioadă. Vei afla imediat ce e gata dacă m-ai adăugat în RSS reader
Mishto! Chiar acum ma chinui la un meniu
Cool .. cand vedeam astfel de meniuri credeam ca sunt facute in flash
Noroc cu Ionutz ca isi mai face pomana cu noi astia mai micii
este posibil ca acele meniuri chiar sa fi fost facute in flash
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
Cat am cautat asa ceva.
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
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
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.
Flipper, nu prea am înțeles ce ai nevoie
Ca de obicei numai tutoriale interesant.Ai putea sa pui si niste tutoriale de php mysql .
Cred ca vrea sa zica de clasa „.s” … adica selected. Sa-ti arate pagina curenta cu efectul hover, la fel cum e si la tine pe blog : cand sunt pe pagina „home” apare efectul de hover pe home…gresesc cumva flipper?:)