SexyDropDownMenu


Am căutat zilele acestea un meniu jQuery simplu… şi frumos. M-am oprit până la urmă la SexyDropDownMenu prezentat de Noupe.com anul trecut. Dacă veţi fi atent veţi observa că articolul ce prezintă acest meniu este cel mai popular articol de pe Noupe, cu peste 300 de comentarii. Ei bine, un număr mare de comentarii nu înseamnă un articol foarte lăudat. Şi de fapt multe dintre comentarii, pe lângă laude şi recunoştinţă, semnalează diverse probleme. Mai exact – pentru că meniul este 100% funcţional – nu atât probleme cât personalizări pe care le-ar dori unii şi alţii.

 imagine

Meniul, căruia eu i-aş spune elegant (fiind pe negru), nu sexy (poate dacă era pe roz), este pe două niveluri. Îl puteţi vedea în acţiune aici. Pe cei mai mulţi îi deranjează faptul că: 1) submeniul care se deschide în jos apare la click şi nu la mouse-over; 2) zona care declanşează deschiderea submeniului este limitată la săgeata în jos (cu alte cuvinte zona indicată mai sus cu roşu nu declanşează meniul, doar cea cu verde). Vestea bună este că problemele sunt rezolvabile… Trebuie doar să paginaţi printre sutele de comentarii 😉 . Aşa veţi găsi o modificare ce face ca meniul să fie pe oricâte niveluri (adâncime, cu submeniuri la submeniuri), dar şi unele care eliminând săgeata fac ca meniul să se deschidă la mouseover pentru opţiunea de nivel 1.

Pentru a folosi meniul, cu jQuery desigur, va trebui să aşezaţi partea HTML acolo unde doriţi să apară meniul (în articol este Step 1); într-un fişier separat cel mai bine să puneţi partea CSS (Step 2); şi mai rămâne doar o parte de JavaScript care poate sta în secţiunea HEAD a paginii (Step 3), după includerea bibliotecii jQuery. Eu i-am modificat puţin şi culorile ca să se potrivească proiectului meu (evident, nu are legătură cu fructe, legume ş.a., ceea ce vedeţi mai jos e doar de dragul capturii).

imagine

Dacă vă place meniul poate îl veţi folosi într-un proiect viitor. Eu închei subliniind că modificarea ce mai simplă şi mai rapidă este click(funct… în hover(funct… iar una mai complexă ar fi:

[JSCRIPT]$("ul.subnav").parent().append("");
$("ul.topnav li a").hover(function() {
$(this).parent().find("ul.subnav").stop().slideDown(‘fast’).show(‘slow’, function(){
$(this).height("auto");
});
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.subnav").stop().slideUp(‘slow’);
});
}).hover(function() {
$(this).addClass("subhover");
}, function(){
$(this).removeClass("subhover");
});[/JSCRIPT]


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (2 evaluări, media: 3,00 din 5)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *