Cu ajutorul clasicului jQuery, au fost scrise o mulțime de articole pe această temă. Am încercat să complic puțin sarcina adăugând posibilitatea de a menține secțiunile de meniu deschise (sau închise, în funcție de alegerea utilizatorului) în timpul navigării 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, deoarece atunci întregul sens al meniului derulant dispare cu totul. 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 de remarcat este că în etichetă
ar trebui să existe un titlu, când faceți clic pe care meniul se va retrage:
Cod: HTML
Și așa mai departe la infinit. Acum vine partea distractivă. Voi adăuga câteva comentarii în cod pentru a fi aproximativ clar, chopach
Cod: JS
$ (document) .gata (funcție () (
if ($. cookie ("num_open_ul")) (// a verificat dacă există o intrare în cookie-uri
dacă ($. 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");
}
};
$ ("# navigare h2.navigation_head"). faceți clic pe (funcție () (// când se face clic, această funcție va fi declanșată
dacă (! $ (acest) .next (). este (": vizibil")) (
$ ("div.navigation_body"). frați ("div.navigation_body"). slideUp (500); // dacă altele sunt deschise, închide totul, cu excepția celui actual
}
$ (acest) .next ("div.navigation_body"). slideToggle (500) .frati ("div.navigation_body"). slideUp (500);
$ (this) .toggleClass ("active_navigation"). frați ("# navigation h2.navigation_head"). removeClass ("active_navigation"); // a adăugat o clasă publicului pentru a schimba stilul
setTimeout (fncookie, 600); // scrierea în cookie-uri cu o întârziere, astfel încât scriptul să aibă timp să finalizeze lucrarea înainte de înregistrare (500 ms - viteză, întârziere - 600 ms)
});
function fncookie () (// funcția de scriere în sine
var number_open_ul = 0;
var i = 0;
$ ("div.navigation_body"). fiecare (funcție () (
i ++;
dacă ($ (acest) .este (": vizibil")) (
number_open_ul = i;
}
$ .cookie ("num_open_ul", number_open_ul, (expire: 3, cale: "/")); // păstrați 3 zile pentru întregul site.
});
}
});
Adică, acum, dacă utilizatorul a deschis meniul, a părăsit site-ul și a mers din nou la el după câteva zile, meniul va rămâne deschis pentru el.
Și, în sfârșit, mai avem o mică atingere: de fapt, css-styles. O poti face dupa bunul plac, in exemplu am luat designul finit 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;
}
.activ_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 (
afișaj: niciunul;
}
#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 conținutul: +/- proprietate când meniul este închis/deschis, dar puteți adăuga o imagine sau orice altă construcție. Puteți vedea un exemplu de ceea ce avem aici.
Ca întotdeauna, sunt gata să ascult întrebările și să încerc să răspund la ele. Toate cele bune, toate cele bune.
În acest articol, vom dezvolta un simplu meniu derulant folosind jQuery. Mai întâi aruncați o privire la fișierul demo. Sperăm că știți măcar puțin din elementele de bază ale jQuery și CSS. Aspectele cheie ale creării acestui meniu drop-down sunt aplicarea parametrilor CSS: poziție, sus, stânga, z-index.
Folosind aceste opțiuni, putem fi siguri că meniul nostru va apărea exact sub linkul peste care a trecut cursorul și va acoperi exact toate celelalte elemente. De asemenea, vom face ca meniul să apară la hover și să dispară atunci când cursorul este plasat în lateral. Pentru a implementa aceste evenimente, vom folosi funcțiile mouseenter și mouseleave ale jQuery. Și asta este tot ce avem nevoie pentru a crea un meniu drop-down!
Fișier demonstrativ al rezultatului final și link de descărcare
Cod HTML
Consultați codul HTML pentru meniul drop-down:
După cum puteți vedea, aici vom folosi liste neordonate pentru a implementa elementele de meniu. Fiecărui link de meniu i se atribuie o clasă derulantă, iar lista derulantă în sine este cuprinsă de o clasă de sub-link. Numele claselor vor fi folosite de jQuery pentru a determina ce meniu să fie afișat.
Cod CSS
Consultați codul CSS:
/ * CSS pentru meniul derulant Start * /
ul
{
stil-listă: niciunul;
umplutură: 0px;
marjă: 0px
}
ul li
{
display: inline;
plutește la stânga;
}
ul li a
{
culoare: #ffffff;
fundal: # 990E00;
margine-dreapta: 5px;
greutatea fontului: bold;
dimensiunea fontului: 12px;
font-family: verdana;
text-decor: niciuna;
afisare: bloc;
lățime: 100px;
inaltime: 25px;
înălțimea liniei: 25px;
text-align: centru;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
chenar: 1px solid # 560E00;
}
ul li a: hover
{
culoare: #cccccc;
fundal: # 560E00;
greutatea fontului: bold;
text-decor: niciuna;
afisare: bloc;
lățime: 100px;
text-align: centru;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
chenar: 1px solid # 000000;
}
ul li.sublinks a
{
culoare: # 000000;
fundal: # f6f6f6;
chenar-jos: 1px solid #cccccc;
greutatea fontului: normal;
text-decor: niciuna;
afisare: bloc;
lățime: 100px;
text-align: centru;
margine-sus: 2px;
}
ul li.sublinks a: hover
{
culoare: # 000000;
fundal: # FFEFC6;
greutatea fontului: normal;
text-decor: niciuna;
afisare: bloc;
lățime: 100px;
text-align: centru;
}
ul li.sublinks
{
afișaj: niciunul;
}
/ * CSS pentru meniul dropdown Sfârșit * /
Majoritatea CSS-ului este folosită pentru a formata meniul (puteți da aspectul meniului așa cum doriți), dar există și câteva puncte importante aici:
1 - Eliminați filele cu stil de listă: niciunul;
2 - Știm că listele sunt elemente de bloc și sunt întotdeauna afișate vertical. Pentru a le face să se poziționeze orizontal, le dăm un parametru de element inline și le aliniem la stânga cu următorul cod:
Display: inline;
plutește la stânga;
3
- Linkurile sunt elemente inline în mod implicit. Le convertim în elemente bloc folosind display: block (deci acum le putem seta o valoare a lățimii).
4 - Ascundem întregul meniu prin:
Ul li.sublinks
{
afișaj: niciunul;
}
jQuery
Imaginați-vă vremurile când meniurile drop-down erau implementate cu javascript brut și mult cod inutil. Dar astăzi tot ce avem nevoie este jQuery:
$ (funcția () (
Submeniu.css ((
poziție: „absolut”,
zIndex: 1000
});
Submeniu.stop (). SlideDown (300);
$ (acest) .slideUp (300);
});
});
});
Un lucru foarte interesant și simplu. Să vă explicăm cum funcționează. Pentru început, și ca de obicei, împachetăm codul nostru într-un controler jQuery:
$ (funcția () (
...
});
Codul nostru este activat atunci când cursorul mouse-ului este plasat peste (funcția mouseenter) peste un element căruia i se atribuie o clasă dropdown ($ ("Dropdown"). În cazul nostru, acesta este un link din meniu:
$ (funcția () (
$ (". dropdown"). mouseenter (funcție () (
........
});
});
Să ne asigurăm că ascundem () toate meniurile deschise anterior înainte ca mouse-ul să sară la următorul link:
$ (". sublink-uri"). stop (fals, adevărat) .hide ();
Acordați atenție funcției de oprire, care ne ajută să afișăm un singur meniu derulant la un moment dat când cursorul mouse-ului se deplasează peste diferite link-uri din meniu. Daca nu folosim aceasta functie, atunci fiecare meniu derulant va ramane deschis pana in momentul in care indepartam complet cursorul mouse-ului de meniu. Acest lucru va crea o suprapunere, așa că ar trebui să evităm acest lucru. În continuare, luăm meniul derulant extins în prezent și îl atribuim unei variabile:
Submeniu Var = $ (acest) .parent (). Next ();
Acesta este ceea ce va fi în codul HTML:
Când cursorul mouse-ului trece peste linkul cu clasa derulantă, ne întoarcem folosind parent () și ne oprim la „li”, apoi folosind următorul (), ne aflăm în meniul drop-down dorit și „li” va deja fi cu sub-legăturile (sublink-urile). Astfel, jQuery ne ajută să aflăm ce meniu vertical să afișăm atunci când mouse-ul este peste un anumit link.
Submeniu.css ((
poziție: „absolut”,
sus: $ (acest) .offset (). sus + $ (acest) .înălțime () + „px”,
stânga: $ (acest) .offset (). stânga + „px”,
zIndex: 1000
});
Codul este foarte important, deoarece asigură că meniul derulant este afișat exact sub linkul specificat. Dacă poziția este setată la absolut, putem poziționa elementul oriunde pe pagina noastră. Apoi, definim poziția de sus a legăturii peste care trece cursorul cu $ (this) .offset (). Top (aceasta se referă la elementul curent de meniu peste care trece cursorul) și adăugăm o valoare a înălțimii acestuia astfel încât meniul să fie afișat exact sub link. Faceți ceva similar cu parametrul din stânga. Apoi folosim z-index pentru a ne asigura că meniul nostru este afișat deasupra restului elementelor.
Submeniu.stop (). SlideDown (300);
Desigur, puteți utiliza alte opțiuni de animație, cum ar fi fadeIn, animație cu propriile stiluri și așa mai departe.
Acum trebuie să ne distragem atenția de la conceptul de afișare a meniului drop-down și să-l ascundem. Avem nevoie de următoarea bucată de cod:
Submeniu.mouseleave (funcție () (
$ (acest) .slideUp (300);
});
Pentru a ascunde meniul drop-down, folosim slideUp, care este opusul slideDown. Rețineți că submeniul este o variabilă pe care am creat-o pentru a defini un anumit meniu drop-down.
Astfel, avem un dropdown atractiv pentru frați meniul jQuery.
Astăzi aș dori să fac o selecție a unei generații relativ noi de navigare pentru site - meniuri pe tot ecranul... Sunt folosite în cazurile în care navigarea în sine nu este pe pagină, există un singur buton, când dați clic pe el, se deschide un meniu. Un principiu similar poate fi observat în cadrul -cadru, când bara de navigare încetează să se potrivească, blocul cu lista de elemente de meniu este pur și simplu ascuns. În locul său, apare un buton cu o imagine, de regulă, de trei dungi. Când este apăsat, meniul complet dispare. În multe site-uri moderne, meniul este ascuns permanent chiar și pe ecrane mari. Acest lucru se face 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. Ne-am dat seama de principiul general de lucru, dar acest tip de meniu 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 doar, ci se deschide complet pe ecran complet într-o fereastră pop-up... Ceva de genul popularelor panouri glisante, dar toată această chestiune ocupă întreaga zonă a zonei de lucru. În spatele site-urilor au început să apară indivizi. Pluginuri jQueryși soluții css3, despre care, de fapt, este vorba în 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. Site-uri cu meniuri pe tot ecranul există din ce în ce mai multe plugin-uri jQuery gratuite și din ce în ce mai multe iar conceptul devine treptat un trend.
Asa de. Pentru atenția ta 20 de pluginuri jQuery pentru meniul ecran completîn fereastra pop-up.
Navigare prin apăsare pe ecran complet
Una dintre cele mai bune gratuite de până acum script de navigare pe tot ecranul... Când faceți clic pe butonul „Meniu”, apare navigarea, plus este oferit un bloc cu contacte, acest lucru este foarte convenabil pentru un vizitator al site-ului, deoarece calea către apel devine cu 1 clic mai puțin. Vreau să remarc că scriptul de pe dispozitivele mobile devine și un bloc cu contactele sub navigare.Un plus foarte frumos la designul ferestrei este pictograma SVG animată. În mod implicit, arată ca trei dungi, dar când este făcută clic, pictograma se transformă într-o săgeată, ceea ce indică faptul că meniul poate fi ascuns.
Navigare animată rotunjită
Altul foarte tare Script de navigare jquery pe ecran complet de la aceiași dezvoltatori ca și pluginul de mai sus. Acest script are un efect de spawn 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ă excelent pe dispozitivele mobile, dar având în vedere că efectul de aspect este destul de greu, cred că va încetini pe telefoanele mai vechi (nu am testat-o, așa că m-aș bucura dacă ai scrie experiența ta în comentarii).
Navigare Vizualizare pagină în perspectivă
Un alt spectaculos script de meniu pe ecran complet... Când apăsați butonul de meniu, partea vizibilă a paginii se deplasează la o parte cu efectul, un meniu apare în spațiul eliberat. Există mai multe efecte de animație de spawn.Din păcate, nu funcționează corect pe un telefon mobil: dacă există multe 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
Destul de simplu script de meniu pe ecran complet... Nu pot spune că este foarte eficient, dar va fi convenabil pe dispozitivele mobile.
Meniu lateral Fly
Încă una meniul pe tot ecranul, în care partea vizibilă cu efect 3D este mutată în lateral, dar 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ă.
După ce am primit mai multe solicitări, am decis să scriu un articol despre cum să faci un meniu drop-down. Cel mai bun și mai ușor mod de a crea un meniu ca acesta este să te bazezi pe jQuery.
Să aruncăm o privire mai întâi la marcajul HTML.
Meniu derulant simplu
Conţinut
Există o listă simplă neordonată ul, etichetele sale li sunt coloana vertebrală a meniului de navigare. Apoi adăugați codul de mai jos la eticheta li corespunzătoare, aceasta se va structura lista verticală.
Dacă ești atent, vei observa două lucruri:
1. Eticheta li are o clasă drop-down.
2. Link-ul părinte are clasa ddIcon.
Clasa drop-down este folosită în jQuery pentru a afișa/ascunde un meniu drop-down. A doua clasă, ddIcon, este folosită pentru a afișa un indicator către meniul drop-down.
Nu există nimic special în ceea ce privește stilurile de meniu - stilurile obișnuite sunt:
Container (lățime: 960px; margine: 0 auto; padding-top: 50px;) .container h1 (dimensiune font: 30px; culoare: # 666; margin-bottom: 1em;) .container nav (border-radius: 4px; culoare de fundal: #fff; înălțime: 37px;) .container nav ul li (poziție: relativ; float: stânga;) .container nav ul li a (dimensiune font: 12px; text-decor: niciunul; font-weight: bold; text-transform: majuscule; culoare: # 545454; umplutură: 13px 15px; afișare: bloc; chenar-dreapta: 1px solid # f9f9f9;) .container nav ul li a.ddIcon (fond: URL transparent ("dd.png") ") no-repeat 86% 52%; padding: 13px 25px 13px 15px;) .container nav ul li a: hover (background-color: # cc333f; color: #fff;) .container nav ul li.active a (fundal -culoare: # cc333f; culoare: #fff;) .container nav ul li: primul copil a (border-radius: 4px 0 0 4px;) .container nav ul li .subNav (poziție: absolut; fundal-culoare: # cc333f; umplutură: 15px 15px 20px; lățime: 172px; stânga: 0px; sus: 38px; afișare: niciunul;) .container n av ul li .subNav .navSection (padding: 5px 0; ) .container nav ul li .subNav h4 (margin-bottom: 0,5em;) .container nav ul li .subNav h4 a (font-size: 11px; culoare: # edc951; text-transform: capitalize; border-bottom: 1px solid # D33B47; umplutură: 7px 10px;) .container nav ul li .subNav h4 a: hover (culoare: # edc951;) .container nav ul li .subNav h4 a span (float: dreapta; font-size: 10px; culoare : #fff; -moz-transition: color 0.5s ease 0s;) .container nav ul li .subNav h4 a span: hover (culoare: # 390206) .container nav ul li .subNav a (float: none; chenar: none ; afișare: blocare; text-transform: capitalize; culoare: #fff; padding: 7px 15px; -moz-transition: color 0,5s ease 0s; line-height: 1,3;) .container nav ul li .subNav: hover (culoare : # 390206;) .container .section (clear: ambele; umplutură: 10px;) .container .section articol p (dimensiune font: 16px; culoare: # 488fb8; line-height: 1,3;) .container .section articol antet p (padding-top: 20px; font-size: 20px; culoare: # 333; line-height: 1,3; margin-bottom: .4e m; )
Acum trebuie să revii meniu derulant... Cea mai simplă funcție jQuery ne va ajuta în acest sens.
$ (funcție () ($ ("li.dropdown"). hover (funcție () (dacă ($ ("aceasta: are (div.subNav)")) ($ (". subNav"). css ("(" afișați „:” niciunul „)); $ (". subNav ", acest lucru) .css ((" afișați „:" bloc ")); $ (" nav ul li "). css ((" poziție ":" relativ "," z-index ":" 1001 ")); $ (this) .addClass ("activ ");)), function () ($ ("". subNav "). css ((" display ":" nici unul ")); $ (this) .removeClass ("activ"); $ ("nav ul li"). css ((" poziție ":" relativă "," z-index ":" 1 "));)) ;));
Pentru fiecare element al listei, este posibil să-și creeze propriul meniu derulant: în interiorul elementului li, plasați un bloc cu clasa.subnav și, de asemenea, atribuiți clasa drop-down li-ului însuși.
