meniul vertical jquery. Un meniu derulant simplu bazat pe jQuery. Meniu de navigare derulant

Astăzi aș dori să fac o selecție a unei generații relativ noi de navigare pentru site - meniuri pe ecran complet. Ele sunt folosite în cazurile în care nu există navigare în sine pe pagină, există un singur buton, când se face clic, se deschide un meniu. Un principiu similar poate fi observat și în cadrul -cadru: atunci când bara de navigare nu se mai potrivește, blocul cu lista de elemente de meniu este pur și simplu ascuns. În locul său apare un buton cu o imagine de, de regulă, trei dungi. Se stinge când este apăsat meniu complet. În multe site-uri web moderne, meniul este întotdeauna ascuns, chiar și pe ecrane mari. Acest lucru a fost făcut pentru a nu încărca pagina. Deși acum nu ar trebui să faci asta pentru toate proiectele tale. Dacă meniul are o importanță secundară, îl puteți ascunde, dar dacă aveți un site mare cu o structură complexă, este mai bine să nu utilizați această opțiune. Asa de. CU principiu general munca s-a rezolvat, dar acest tip Meniul este destul de standard, vreau ceva nou. Nu cu mult timp în urmă, am început să observ site-uri în care navigarea nu se oprește, ci se deschide complet pe ecran complet într-o fereastră pop-up. Ceva asemănător cu panourile glisante populare, dar toată chestia asta ocupă întreaga zonă a zonei de lucru. Au început să apară site-uri separate Pluginul jQuery soluții s și css3, despre care este de fapt acest subiect.
Personal, îmi place foarte mult această implementare a meniului de navigare, deoarece este convenabilă pentru utilizatorii cu dispozitive mobile și arată foarte impresionant pe monitoare mari. Apar tot mai multe site-uri cu meniuri pe ecran complet, există și mai multe plugin-uri jQuery gratuite, iar conceptul devine treptat un trend.
Asa de. Vă aducem la cunoștință 20 de plugin-uri jQuery pentru meniuri pe ecran complet într-o fereastră pop-up.

Navigare pe ecran complet Unul dintre cele mai bune scripturi gratuite de navigare pe tot ecranul de astăzi. Când faceți clic pe butonul „Meniu”, apare navigarea, plus există un bloc cu contacte, acest lucru este foarte convenabil pentru vizitatorul site-ului, deoarece calea către apel devine cu 1 clic mai puțin. Aș dori să remarc că scenariul este și el activat dispozitive mobile Blocul cu contacte apare sub navigare.
Un plus foarte frumos la designul ferestrei este pictograma SVG animată. În mod implicit, arată ca trei bare, dar atunci când se dă clic, pictograma se transformă într-o săgeată, ceea ce arată că meniul poate fi ascuns.Navigație animată rotunjită Un alt unul foarte tare script jquery navigare pe ecran complet de la aceiași dezvoltatori ca și pluginul de mai sus. Acest script are un efect de aspect foarte cool și neobișnuit. Când faceți clic pe butonul de meniu, un val emană din pictogramă folosind css3 pe întregul monitor, care crește în fundalul elementelor de meniu. Același efect de ascundere.
Această navigare funcționează grozav pe dispozitivele mobile, dar având în vedere că efectul de aspect este destul de greu, cred că totul va fi lent pe telefoanele mai vechi (nu am testat-o, așa că mă bucur dacă vei scrie experiența ta în comentarii) .

Navigare Vizualizare pagină în perspectivă Un alt script de meniu spectaculos pe ecran complet. Când apăsați butonul de meniu, partea vizibilă a paginii se deplasează în lateral cu efectul și apare un meniu în spațiul liber. Există mai multe efecte de animație de apariție.
Din păcate, pe telefoane mobile nu funcționează corect: dacă există o mulțime de elemente de meniu și nu se potrivesc pe ecran, atunci derularea verticală nu apare și navigarea este pur și simplu întreruptă.

Pagina completă Introducere și navigare Un script de meniu destul de simplu pe tot ecranul. Nu pot spune că este foarte eficient, dar va fi convenabil pe dispozitivele mobile.

Fly Side MenuUn alt meniu pe ecran complet, în care partea vizibilă cu efect 3D este mutată în lateral, dar de data aceasta de la alți dezvoltatori. Spre deosebire de scriptul similar anterior, acesta ar trebui să funcționeze bine pe dispozitivele mobile, deoarece dacă meniul nu se potrivește pe ecran, apare derularea verticală.

Foarte des puteți găsi elemente de navigare drop-down în șabloane. Dezvoltatorii folosesc acest tip de meniu ascuns pentru a afișa linkuri ascunse suplimentare care sunt legate tematic de elementul principal. Puteți găsi exemple de panouri glisante sau diverse meniuri în stil acordeon care implementează acest principiu de navigare.

Dar în acest tutorial vom construi un meniu derulant simplu folosind jQuery. Va funcționa folosind o tehnică de animație pentru a genera efecte întârziate. Efectele de tranziție CSS3 sunt de asemenea aplicate împreună cu codul JavaScript. Rezultatul este un șablon pentru navigarea pe site.

HTML

Mai întâi, să construim un șablon HTML5 de bază. Necesar ultima versiune jQuery, pe care îl obținem din API-ul Google. Adăugăm și un fișier de stil styles.css, care va fi prezentat mai jos:

Orizontală bară de navigare| Site-ul de materiale ale site-ului

Acum să ne uităm la structura care este construită în jurul listei neordonate din partea de sus a paginii. Întreaga listă este plasată într-un element HTML5 pentru rezultate SEO mai bune.

Acasă
Despre noi
- Misiune
- Echipă
- Poveste
Produse
- Logotipuri
- Șabloane
- Pictograme
- Pluginuri jQuery
- internet Marketing
Internaționalizarea
- China
- Japonia
- Canada
- Australia
- America de Sud
a lua legatura

Structura codului este destul de simplă. Fiecare element din listă include un efect de evidențiere atunci când cursorul mouse-ului este plasat peste el. Toate elementele UL interne sunt conținute în elementul original din listă, astfel încât focalizarea de intrare nu este pierdută atunci când treceți la elementele din meniul derulant.

Stiluri de navigare

Foaia de stil conține cod pentru a reseta valorile proprietăților la valorile implicite. Mulți dezvoltatori includ un fișier de la Eric Meye, dar pentru uzul nostru este prea greoi. În plus, codul este stocat pe un alt server, care în sine este decizie proastaîn acest caz.

Html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronim, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, mic, grevă, puternic, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, formular, etichetă, legendă, tabel, legenda, tbody, tfoot, thead, tr, th, td, articol, deoparte, pânză, detalii, încorporare, figură, figcaption, subsol, antet, hgroup, meniu, navigare, ieșire, rubin, secțiune, rezumat, timp, marcaj, audio, video ( marjă: 0; umplutură: 0; chenar: 0; dimensiunea fontului: 100%; font: moștenire; aliniere verticală: linie de bază; contur: niciunul; -webkit-font- netezire: antialiased; -webkit-text-size-adjust: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; ) html ( înălțime : 101%; ) body ( fundal: #eaeaea url("images/bg.png"); dimensiunea fontului: 62,5%; înălțimea liniei: 1; familia fonturilor: Arial, Tahoma, sans-serif; padding-bottom : 60px; ) articol, deoparte, detalii, figcaption, figură, subsol, antet, hgroup, meniu, navigare, secțiune ( afișare: bloc; ) ol, ul ( list-style: none; ) blockquote, q ( ghilimele: niciunul; ) blockquote:before, blockquote:after, q:fore, q:after (conținut: ""; conținut: none; ) strong ( font -greutate: bold; ) tabel (border-collapse: collapse; border-spacing: 0; ) img ( chenar: 0; max-width: 100%; )

Există o proprietate interesantă în codul -webkit-font-smoothing. Este conceput pentru a netezi fonturile atunci când rulează cod în browsere care rulează Mac OS X sau iOS.

Acum să trecem la meniul nostru.

#ddmenu ( afișare: bloc; lățime: 100%; înălțime: 80px; margine: 0 automat; umplutură: 0 15px; fundal: #fff; rază-chenar: 6px; chenar: 1px solid rgba(0, 0, 0, 0,15) ); box-shadow: 0 1px 1px rgba(20, 20, 20, 0.2); cursor: pointer; contur: niciunul; font-weight: bold; culoare: #8aa8bd; ) #ddmenu li ( display: block; position: relativ; float: stânga; dimensiune font: 1.45em; text-shadow: 1px 1px 0 #fff; chenar-dreapta: 1px solid #dae0e5; ) #ddmenu li a ( afișare: bloc; float: stânga; umplutură: 0 12px ; înălțimea liniei: 78px; greutatea fontului: bold; text-decor: niciunul; culoare: #6c87c0; -webkit-transition: toate 0.2s liniară; -moz-transition: toate 0.2s liniară; -o-transition: toate 0,2 s liniar; tranziție: toate 0,2 s liniar; ) #ddmenu li:hover > a ( culoare: #7180a0; fundal: #d9e2ee; ) #ddmenu ul (poziția: absolut; sus: 88px; lățime: 130px; fundal: # fff; afișare: niciunul; marjă: 0; umplutură: 7px 0; stil listă: niciunul; chenar-rază: 3px; chenar: 1px solid rgba(0, 0, 0, 0.2); casetă-umbră: 0 0 5px rgba (0, 0, 0, 0,2); )

Adăugăm un selector #ddmenu ul pentru a selecta toate elementele interne din fiecare element din listă, deoarece este important să se determine distanța pentru ele folosind poziționarea absolută. De asemenea, adăugăm o tranziție liniară pentru toate linkurile, care apare când treceți cu mouse-ul peste ele.

Acum să ne uităm la crearea indexului elementului superior. Este format folosind proprietatea de rotație și un cadru universal cu fundal întunecat pentru umbră. Folosind poziționarea offset, un element al structurii noastre este poziționat deasupra altuia și formează reprezentarea vizuală a unui indicator într-un meniu derulant.

#ddmenu ul:after ( conținut: ""; lățime: 0; înălțime: 0; poziție: absolut; jos: 100%; stânga: 8px; lățime chenar: 0 8px 8px 8px; stil chenar: solid; culoare chenar : #fff transparent; ) #ddmenu ul:before (conținut: ""; lățime: 0; înălțime: 0; poziție: absolut; jos: 100%; stânga: 4px; lățime chenar: 0 10px 10px 10px; chenar-stil : solid; culoarea marginii: rgba(0, 0, 0, 0.1) transparent; ) #ddmenu ul li ( afișare: bloc; lățime: 100%; dimensiunea fontului: 0.9em; umbră text: 1px 1px 0 #fff ; ) #ddmenu ul li a ( afișaj: bloc; lățime: 100%; padding: 6px 7px; line-height: 1.4em; -webkit-transition: toate 0.2s liniară; -moz-transition: toate 0.2s liniară; - o-tranziție: toate 0,2 s liniare; tranziție: toate 0,2 s liniară; ) #ddmenu ul li a:hover ( fundal: #e9edf3; )

JavaScript

$(document).ready(function())( $("a").on("clic", function(e)( e.preventDefault(); )); $("#ddmenu li").hover( function () ( clearTimeout($.data(this,"timer")); $("ul",this).stop(true,true).slideDown(200); ), function () ( $.data(this) , "timer", setTimeout($.proxy(function() ( $("ul",this).stop(true,true).slideUp(200); ), this), 100)); )); )) ;

Prima parte a codului interceptează clicurile pe linkuri și oprește procesarea lor în mod implicit (încărcarea paginilor la adresa URL).

A doua parte a codului face totul actiuni magice. Atașăm un handler de evenimente pentru procesul de trecere a mouse-ului peste un element din listă. Handler-ul va opri animația activă în prezent și va scoate un nou sub folosind .slideDown() . De asemenea, am stabilit o mică întârziere, astfel încât să răspundă doar la selecția efectivă a articolului.

Dacă toate aceste elemente sunt plasate unul sub celălalt, atunci poate că meniul va deveni atât de mare încât înălțimea acestuia va depăși înălțimea conținutului principal. Din exterior nu va fi foarte frumos și, în plus, este greu să găsești ceva într-o listă atât de continuă. Pentru a grupa și a reduce totul, trebuie să creați un meniu glisant.

Principiul meniului glisant este că elementele de meniu sunt împărțite în grupuri, iar aceste grupuri sunt ascunse, doar numele grupului este vizibil. Când faceți clic pe nume, apare o listă cu un anumit număr de articole.

Cum să faci un meniu glisant? jQuery ne va ajuta cu asta. Cu el, totul va funcționa fără probleme și frumos, ca în exemplul de mai sus. Să începem implementarea meniului glisant și să completăm mai multe elemente.

Scriptul jQuery

Ca de obicei, atunci când lucrați cu jQuery, trebuie să includeți biblioteca sa. Totul este ca de obicei, în antet sau subsol facem conexiunea, cu excepția cazului în care, desigur, nu ați mai făcut acest lucru pentru alte scripturi.

După bibliotecă adăugăm scriptul. care va realiza animatia.Vor fi 3 scripturi, fiecare dintre ele realizeaza animatia diferit.

$(document).ready(function() ( $("#menu ul").hide(); $("#meniu li span").click(function() ( $("#meniu ul:vizibil") .slideUp("normal"); dacă (($(this).next().is("ul")) && (!$(this).next().is(":visible"))) ( $ (acest).next().slideDown(„normal”); ) )); ));

Acest script funcționează în așa fel încât atunci când dai clic pe numele unei categorii, apare o listă, dar când dai clic pe o altă categorie, începe să se deschidă, în timp ce prima se închide. Adică o singură categorie este întotdeauna deschisă. Dacă aveți nevoie ca categoriile deschise să nu se închidă automat, atunci înlocuiți scriptul cu cel nou enumerat mai jos.

$(document).ready(function() ( $("#menu ul").hide(); $("#meniu li span").click(function() ( $(this).next().slideToggle ("normal"); )); ));

Există un alt script cu care îl puteți înlocui pe cel principal. Trucul său este că meniul alunecă atunci când trece cu mouse-ul. Nu este nevoie să faceți clic, treceți cu mouse-ul peste numele categoriei și gata. Așa că alegeți ce scenariu este cel mai potrivit pentru dvs.

$(document).ready(function() ( $("#menu ul").hide(); $("#meniu li").hover(function() ( $(this).children("ul") .slideToggle(„normal”); )); ));

Marcaj HTML

Acum, în locul potrivit de pe site-ul dvs., trebuie să afișați marcajul HTML. Ei bine, sau reface-l puțin pe al tău, astfel încât să devină asemănător cu exemplul.

Nu este nimic complicat, totul este organizat folosind ul-lists.

Stiluri CSS

Și în sfârșit, pentru a seta aspectul corect pentru meniul nostru, trebuie să specificăm stiluri. Dacă nu este prima dată când lucrezi cu CSS, poți personaliza cu ușurință stilurile pentru tine.

Ul#menu, ul#menu ul( list-style:none; margin: 0px; padding: 0px; width: 250px; -webkit-box-shadow:0px 0px 5px 0px rgba(50, 50, 50, 0.2); - moz-box-shadow:0px 0px 5px 0px rgba(50, 50, 50, 0.2); box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.2);) ul#menu a,ul#menu span (afișare: bloc; text-decor: niciunul;) ul#menu li (margin-top: 1px;) ul#menu li a,ul#menu li span( fundal: #1ba600; culoare: #fff; padding: 7px; ) ul#menu li a:hover,ul#menu li span:hover(background: #333;) ul#meniu li ul li a( background: #eee; color: #000; padding-left: 20px;) ul# meniu li ul li a:hover(background: #ddd;)

Nu mai este nevoie de nimic. Aceasta metoda nu foarte complicat și are mai multe tipuri de implementare, totul depinde de scriptul pe care îl alegeți.

Asta e tot, mulțumesc pentru atenție. 🙂

Folosind JQuery clasic, au fost scrise o mulțime de articole pe această temă. Am încercat să complic puțin sarcina adăugând posibilitatea de a lăsa secțiunile de meniu deschise (sau închise, în funcție de alegerea utilizatorului) în timp ce mă deplasez pe site.
Pentru a rezolva această problemă, am decis să folosesc pluginul JQuery Cookie. Avantajul acestui plugin este că operațiunea este efectuată pe partea clientului, ceea ce, la rândul său, reduce sarcina pe server. Minus - dacă utilizatorul are JS dezactivat, pluginul nu va funcționa. Dar nu iau în considerare această opțiune, de atunci întregul punct al meniului derulant dispare. Deci, să începem.
În primul rând, trebuie să conectăm cadrul JQuery în sine și pluginul JQuery Cookie:

Cod: HTML

Urmează marcajul. Va arăta ca o listă simplă, nimic supranatural. Singurul lucru pe care îl voi observa este că eticheta ar trebui să conțină un titlu, când faceți clic pe ea, un meniu se va derula:

Cod: HTML

Primul titlu

Primul link

Al doilea link

Al treilea link

Al doilea titlu

Primul link

Al doilea link

Al treilea link

Al treilea titlu

Primul link

Al doilea link

Al treilea link

Al patrulea titlu

Primul link

Al doilea link

Al treilea link

Ei bine, și așa mai departe la infinit. Acum vine partea cea mai interesantă. Voi adăuga câteva comentarii în cod, astfel încât să fie aproximativ clar.

Cod: JS

$(document).gata(funcție())(
if($.cookie("num_open_ul"))( // a verificat dacă există o intrare în cookie-uri
if($.cookie("num_open_ul") != 0)( // iar această intrare nu este egală cu 0
var number_eq = parseInt($.cookie("num_open_ul")-1);
$(".navigation_body").eq(number_eq).show().prevAll("#navigation h2.navigation_head:first").addClass("active_navigation");
}
};
$("#navigation h2.navigation_head").click(function())( // când dați clic, această funcție va funcționa
dacă(!$(acest).next().este(":vizibil"))(
$("div.navigation_body").frati("div.navigation_body").slideUp(500); // dacă altele sunt deschise, închideți totul, cu excepția celui actual
}
$(this).next("div.navigation_body").slideToggle(500).frati("div.navigation_body").slideUp(500);
$(this).toggleClass("activ_navigation").frati("#navigation h2.navigation_head").removeClass("active_navigation"); // o clasă a fost adăugată la cea deschisă pentru a schimba stilul
setTimeout(fncookie, 600); //înregistrarea în sine în cookie-uri cu o întârziere, astfel încât scriptul să aibă timp să-și finalizeze activitatea înainte de înregistrare (500 ms - viteză, întârziere - 600 ms)
});
function fncookie())( // functia de inregistrare in sine
var number_open_ul = 0;
var i = 0;
$("div.navigation_body").each(function())(
i++;
dacă($(acest).este(":vizibil"))(
number_open_ul = i;
}
$.cookie("num_open_ul", number_open_ul, (expires:3, path:"/")); // depozitați timp de 3 zile pentru întregul site.
});
}
});

Adică, acum, dacă utilizatorul a deschis meniul, a părăsit site-ul și a revenit la el câteva zile mai târziu, meniul va rămâne deschis pentru el.
Și, în sfârșit, mai avem o mică atingere: de fapt, stiluri css. O poți face după gustul tău, în exemplul pe care l-am luat design gata făcut dintr-unul dintre proiecte

Cod: CSS

#navigație (
marja: 80px automat;
latime: 250px;
}
#navigation h2, #navigation h2.navigation_head (
dimensiunea fontului: 18px;
font-weight: îndrăzneț;
culoare de fundal: #ffb6c1;
imagine de fundal: -webkit-gradient(liniar,50% 0,50% 100%,color-stop(0%,#ffe9e9),color-stop(100%,#ffb6c1));
imagine de fundal: -webkit-linear-gradient(#ffe9e9,#ffb6c1);
imagine de fundal: -moz-linear-gradient(#ffe9e9,#ffb6c1);
imagine de fundal: -o-linear-gradient(#ffe9e9,#ffb6c1);
imagine de fundal: gradient liniar (#ffe9e9,#ffb6c1);

umplutură: 5px 3px 6px 3px;
margine: auto;
poziție: relativă;
}
#navigation h2.navigation_head:după (
poziție: absolută;
dreapta: 5px;
culoare: #550000;
conținut: „cssb”;
}
#navigation h2:hover, #navigation h2.navigation_head:hover (
cursor: pointer;
}
.active_navigation(
imagine de fundal: -webkit-gradient(liniar,50% 0,50% 100%,color-stop(0%,#ffb6c1),color-stop(100%,#ffe9e9)) !important;
imagine de fundal: -webkit-linear-gradient(#ffb6c1,#ffe9e9) !important;
imagine de fundal: -moz-linear-gradient(#ffb6c1,#ffe9e9) !important;
imagine de fundal: -o-linear-gradient(#ffb6c1,#ffe9e9) !important;
imagine de fundal: gradient liniar(#ffb6c1,#ffe9e9) !important;
}
.active_navigation:după (
poziție: absolută;
dreapta: 5px;
continut: "cssd" !important;
}
.navigation_body(
afisare:niciuna;
}
#navigation ul (
marja: 0;
umplutură: 0;
list-style-type: niciunul;
}
* html #navigation ul li(
înălțime: 1%;
}
#navigation div.navigation_body ul li (
margine-stânga: 10px;
}
#navigație a (
font-family: „Times New Roman”;
afisare: bloc;
culoare: #918871;
umplutură: 3px;
culoare de fundal: #ffe3e0;
chenar-jos: 1px solid #fff;
text-decor: niciuna;
}
#navigation a:hover (
culoare: #585858;
culoare de fundal: #ffb6cc;
}

Dacă cineva a observat, aici am încercat să folosesc proprietatea conținutului: +/- când este închis/ meniu deschis, dar puteți adăuga o imagine sau orice alt design. Puteți vedea un exemplu de ceea ce am venit aici

Ca întotdeauna, sunt gata să ascult întrebările și să încerc să răspund la ele. Toate cele bune, toate cele bune. 1. Meniu jQuery luminos vertical 2. Efect cool. Meniu de dans. 4. Lista derulantă folosind jQuery

Stil excelent al elementului de interfață sub forma unei liste derulante.

Când treceți mouse-ul peste buton, în partea de sus apare un panou.

6. Plugin jQuery „MobilyBlocks” pentru afișarea unui meniu radial 7. Meniu folosind sprite-uri

Meniu javascript animat cu efect de strălucire.

Meniu proaspăt, frumos folosind jQuery.

9. Meniul jQuery „GarageDoor” 10. Meniul de derulare vertical jQuery

Implementarea unui meniu cu o cantitate mare puncte. Derulează când mutați cursorul mouse-ului în sus sau în jos.

11. Designul listei derulante jQuery 12. Plugin de navigare a paginii

Derulare lină la secțiunea dorită de pe pagină. Plugin de navigare jQuery One Page.

13. Plugin „Meniu conținut animat”

Plugin nou jQuery. Implementare excelentă a navigării pe site animate. Când parcurgeți elementele de meniu, apare un bloc cu o descriere și posibile link-uri și, în funcție de elementul selectat, se schimbă fundalul paginii, care se întinde pentru a umple întregul ecran, indiferent de dimensiunea ferestrei browserului. Asigurați-vă că consultați pagina demo.

14. Plugin de meniu jQuery „Sweet Menu”.

Meniu animat cu elemente pop-up.

15. Meniul jQuery fix

Când derulați în jos în pagină, meniul rămâne fix în partea de sus a ecranului.

16. Meniuri de derulare pentru kitul de glisare

Pentru a implementa un meniu vertical cu un număr mare de articole. Derularea articolelor se face folosind rotița mouse-ului sau folosind link-urile „Anterior” și „Următorul”.

17. Meniu CSS3 elegant 18. Meniu CSS3 nou în stil Apple

Meniu nou în stil Apple. Pare mai întunecat decât înainte, dar nu mai puțin drăguț.

19. Meniul jQuery original

Meniu derulant cu efect de fundal. Subelementele din meniu se extind în sus. Când treceți cu mouse-ul peste un element de meniu, imaginea de fundal se schimbă.

20. Meniu animat cu jQuery

Meniu animat. Elementele de meniu sunt prezentate sub formă de pictograme și descrieri. Mai multe efecte grozave când treceți mouse-ul peste un element de meniu. Există 8 efecte, pentru a le vedea pe toate - urmați linkurile Exemple1-Exemple8 de pe pagina demo.

21. „Meniu derulare” Meniu XML cu defilare

Meniu de defilare pe verticală și orizontală. Buna decizie cu un număr mare de articole în meniu.

22. Meniul contextual pe un site web folosind jQuery

Un meniu apare când faceți clic dreapta pe o anumită zonă.

23. Meniu circular pe două niveluri pentru site

Când selectați un element de meniu, elementele de submeniu sunt afișate în partea dreaptă.

24. Meniul jQuery CSS3 cu efect de estompare „Blur Menu” CSS3

Meniul original jQuery CSS3 vine în 7 stiluri diferite. Când treceți mouse-ul peste unul dintre elementele de meniu, restul par să se estompeze.

25. Câteva meniuri jQuery CSS3 animate spectaculoase

10 meniuri animate creative. Meniuri CSS3 orizontale și verticale cu diferite efecte și tranziții.

Arhiva include și originalul Fișier PSD meniul.

27. Meniul MagicLine

Fundalul sau sublinierea unui element de meniu urmează mouse-ul cu o ușoară întârziere, în timp ce fundalul își schimbă ușor culoarea pe măsură ce se deplasează de la un articol la altul. Efect foarte frumos, pare neobișnuit. Atenție: efectul nu funcționează în operă

28. Bule de imagine

Un efect excelent când treceți mouse-ul peste una dintre imagini. Efectul amintește oarecum de jQDock descris mai sus.

31. Meniuri jQuery interesante cu diverse efecte

Meniu orizontal, vertical. Efecte interesante.

32. Meniu jQuery grozav în stil Apple 34. Meniu jQuery cu un efect interesant 36. Meniu proaspăt cu un efect interesant în jQuery

Un efect foarte interesant. Perfect pentru proiectarea site-urilor web de portofoliu.

Efectul interesant al miniaturilor care apar la hover.

40. Listă derulantă cu derulare automată

Efect de tranziție plăcut între articole.

42. Meniu jQuery grozav 43. Meniu jQuery grozav frumos 44. Derularea meniurilor jQuery

Elementele de meniu sunt prezentate sub formă de miniaturi.

46. Meniul de navigare jQuery Radial 47. Meniul CSS și jQuery

O bară de navigare cu o casetă de căutare care devine translucidă pe măsură ce derulați în jos pe pagină.

48. Meniul jQuery orizontal 49. Meniul jQuery vertical

Meniu vertical grozav. Când treceți cursorul, apare un element de meniu.

50. Meniul jQuery orizontal

Un efect interesant când treceți cursorul peste un element de meniu.

52. Meniul dropdown jQuery

Când treceți mouse-ul peste meniu, vor apărea elementele acestuia. Elementele care apar sunt afișate sub formă de arc, a cărui rază o puteți seta la configurarea pluginului. În unele browsere nu veți vedea un arc de afișare, meniul va fi afișat direct, dar acest lucru nu va strica impresia generală a implementării acestui meniu jQuery.

53. Bara de navigare CSS și jQuery

Un efect interesant când treceți mouse-ul peste un element de meniu.

54. Panoul pop-up jQuery

Meniu animat proaspăt în tonuri de gri.

58. Navigare pe coloană pe site folosind jQuery

O soluție interesantă pentru navigație, care este prezentată sub formă de dungi verticale. Când treceți mouse-ul peste aceste bare, apar o imagine pentru element și o listă de submeniuri. Când faceți clic pe un element de submeniu, apare o pagină cu o descriere. Această implementare este perfectă pentru site-uri promoționale sau prezentări. Asigurați-vă că verificați demo-ul pluginului.

59. Navigare jQuery pe site

Navigarea pe site este prezentată sub formă de 4 imagini, când treceți cu mouse-ul peste ele veți observa un efect animat interesant.

60. Bara de navigare derulează cu conținut

Panoul de navigare. Făcând clic pe săgeată, pagina derulează. Navigarea derulează împreună cu conținutul paginii.

61. Panoul jQuery cu diverse servicii sociale