Deschidere ușoară a meniului folosind jQuery. Cum se creează un meniu derulant lateral folosind CSS și jQuery Cel mai simplu meniu derulant Jquery Hover
În zilele noastre, meniurile de navigare jQuery sunt mai mult decât simple blocuri de text cu linkuri în ele. În am împărtășit cum puteți folosi JQuery și CSS3 pentru a crea un meniu de navigare care arată foarte bine.
Folosind puterea JQuery, putem transforma meniul de navigare într-un meniu dinamic. În timp ce în prezent puteți utiliza doar CSS3 pentru a crea navigare dinamică, JQuery face meniurile și mai puternice.
Pe lângă funcțiile dinamice, designul joacă, de asemenea, un rol important. Numai pentru că asta văd primii vizitatorii când vin pe site-ul tău.
Dacă meniul este neprezentabil, acesta va oferi utilizatorilor o experiență de utilizator slabă. Design bun Meniul va crește, la rândul său, calitatea site-ului dvs. și va oferi o experiență mai bună pentru utilizator.
Astăzi vă prezint 30 grozave Exemple jQuery meniul de navigare.
1. ImpertinentPushy este un meniu de navigare receptiv, fără pânză, care utilizează transformări și tranziții CSS. Funcționează grozav pe dispozitive mobile. Asigurați-vă că urmăriți demonstrația și cu siguranță vă va plăcea.
Demo | Descărcați
2. SlinkyAcesta este un alt meniu jQuery grozav pentru a crea liste de navigare derulabile frumoase. Lui trăsătură distinctivă este dimensiunea mică a fișierelor sursă.
Demo | Descărcați
3. Meniul pop jQueryAcesta este un meniu pop-up simplu, receptiv, cu foarte caracteristici interesante. Când faceți clic pe pictograma de meniu, apare o fereastră de meniu cu pictograme de elemente. Consultați demonstrația.
Demo | Descărcați
4. SlidebarsSlidebars este un cadru JQuery pentru implementarea rapidă și ușoară a stilurilor de aplicație, fără a fi legat de o pânză. Slidebars gestionează, de asemenea, schimbările de orientare și redimensionarea.
Demo | Descărcați
5. Meniul jQuery SquareMeniul JQuery, care afișează un meniu pătrat animat de site folosind JQuery și CSS3. Asigurați-vă de acest lucru urmărind demonstrația.
Demo | Descărcați
6. Navigare Vizualizare pagină în perspectivăAcest meniu de navigare jQuery transformă o pagină într-un meniu 3D. Ideea este de a crea un design aplicație mobilă, în care atunci când dați clic pe pictograma meniului, conținutul paginii este mutat în lateral, iar meniul este adus în prim-plan.
Demo | Descărcați
7. SlickNavPlugin pentru crearea unui meniu jQuery mobil receptiv cu mai multe niveluri și setări flexibile, dar simple. Compatibil cu browsere diferite, este posibilă navigarea folosind tastatura.
Demo | Descărcați
8. MeniuMeniul jQuery pentru aplicații cu și fără legare la pânză cu sub-articole pop-up. Datorită numeroaselor opțiuni, suplimente și extensii, este posibilă personalizarea meniului foarte flexibilă.
Demo | Descărcați
9. SidrPlugin jQuery pentru crearea de meniuri și adăugarea cu ușurință de caracteristici receptive. Cu Sidr puteți crea diverse elemente ale site-ului dvs., precum și meniuri responsive.
Demo | Descărcați
10. slimMenuslimMenu este un mic plugin jQuery care vă va ajuta să dezvoltați meniuri de navigare receptive, pe mai multe niveluri. Ceea ce este interesant este că puteți avea mai multe meniuri diferite și toate vor fi complet receptive.
Demo | Descărcați
11.HorizontalNavMeniul de navigare jQuery care vă permite să setați meniu orizontal pe toată lățimea recipientului. Acest plugin îl face foarte ușor. În plus, suportul pentru IE7 poate fi implementat.
Demo | Descărcați
12.FlexNavAcesta este un exemplu de utilizare a interogărilor media și JavaScript pentru a crea un meniu excelent pe mai multe niveluri cu suport ecrane tactile, efecte de hover și navigare prin tastatură.
Demo | Descărcați
13. jQuery Menu-AimMeniu jQuery care declanșează evenimente atunci când mouse-ul trece peste un element de meniu derulant. Ideal pentru crearea de meniuri derulante receptive, cum ar fi cele ale Amazon.
Demo | Descărcați
14. Meniuri inteligenteUn plugin de meniu jQuery care oferă o modalitate simplă și intuitivă de afișare a meniurilor. Creează liste de meniuri receptive. Funcționează pe toate dispozitivele!
Demo | Descărcați
15. SchimbătorShifter este un plugin jQuery ușor de utilizat pentru mobil pentru a crea meniuri de diapozitive din care se mută partea dreaptă la apăsarea butonului comutator. Există o singură opțiune maxWidth de configurat. Vă permite să reglați rezoluția/orientarea pentru dispozitivele mobile.
Demo | Descărcați
16.HamburgerHamburger este un plugin jQuery pentru crearea de meniuri de diapozitive în stil Aplicația Android, în care se află un meniu pop-up pe marginea dreaptă a ecranului. Când meniul este extins la dimensiunea completă, acesta se suprapune pe zona de conținut, dar nu și pe bara de acțiuni.
Demo | Descărcați
17. FocusssFocucss este un meniu de navigare jQuery care creează un meniu din bara laterală fără pânză, cu caracteristici interesante de estompare, care vă pot ajuta să atrageți atenția utilizatorilor asupra secțiunilor principale ale site-ului și să facă mai puțin vizibile secțiunile mai puțin vizibile.
Demo | Descărcați
18. SertarDrawer este un plugin jQuery pentru crearea unui meniu animat, receptiv, care iese din partea laterală a ecranului când se face clic. Este posibil să fi văzut funcții similare în aplicațiile Android.
Demo | Descărcați
19.DatmenuDatmenu - jQuery premium meniu receptiv cu diverse caracteristici de animație CSS3. Ceea ce este grozav la acest plugin este capacitatea de a personalizare completă folosind opțiunile js.
Demo | Descărcați
20. jPanelMenujPanelMenu este un meniu jQuery frumos și modern care vă permite să creați un meniu de navigare în panou cu funcții de tranziție a animației CSS3. Stilul jPanelMenu seamănă versiuni mobile Facebook și Google. Pluginul poate fi folosit pentru o varietate de aplicații mobile.
Demo | Descărcați
21. Fly Side MenuFly Side Menu este un plugin grozav de meniu de navigare care folosește CSS3 pentru a crea meniul lateral cu transformări și tranziții 3D.
Demo | Descărcați
22. PageScroll jQuery Menu PluginPageScroll este un meniu jQuery mobil personalizat, recomandat pentru utilizare pe orice site web, precum și pe paginile de destinație.
Demo | Descărcați
23.Meniu pictogramă DDDD Icon Menu este un plugin jQuery care vă permite să creați meniu vertical pictograme situate pe marginea ecranului cu sub-articole din meniu care se extind atunci când treceți cu mouse-ul deasupra.
Demo | Descărcați
24. JQuery Mobile Data NavigationMeniul jQuery care vă permite să navigați după date într-un interval selectat (săptămână, lună sau an). Ideal pentru solicitarea de informații folosind apeluri AJAX.
Demo | Descărcați
25. NavobilePlugin pentru meniul de navigare jQuery care îl face foarte ușor de creat meniuri mobile. Utilizează tranziții CSS pentru a seta poziția meniului pe dispozitivele mobile.
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. Principiu similar poate fi văzut în cadrul -cadru, 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 ascuns în mod constant chiar și pe ecrane mari. Acest lucru a fost făcut pentru a nu încărca pagina. Deși nu ar trebui să faci acest lucru în toate proiectele tale acum. 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. Aşa. 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 totul ocupă întreaga zonă zona de lucru. În spatele site-urilor au început să apară pluginuri jQuery separate și soluții 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. jQuery gratuit Există și mai multe plugin-uri și conceptul devine treptat un trend.
Aşa. Iată 20 de plugin-uri jQuery pentru meniuri pe ecran complet într-o fereastră pop-up.
Un plus foarte frumos la designul ferestrei este pictograma SVG animată. În mod implicit, arată ca trei bare, dar când se face clic, pictograma se transformă într-o săgeată, ceea ce arată că meniul poate fi ascuns Navigare animată rotunjită scriptul 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) .
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ă.
În acest articol vom dezvolta un meniu derulant simplu folosind jQuery. Mai întâi, aruncați o privire la fișierul demo. Sperăm că știți măcar puțin 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 acești parametri, putem fi siguri că meniul nostru va apărea exact sub linkul peste care a trecut cursorul și va acoperi cu exactitate toate celelalte elemente. De asemenea, vom face ca meniul să apară la trecerea cursorului și să dispară atunci când cursorul este mutat. Pentru a implementa aceste evenimente, vom folosi funcțiile jQuery: mouseenter și mouseleave. Ș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 derulant:
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ă de meniu derulant, iar meniul derulant în sine este acoperit de o clasă de sublink. 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
{
list-style:none;
umplutură: 0px;
margine: 0px
}
ulli
{
display:inline;
float:stânga;
}
ulli a
{
culoare:#ffffff;
fundal:#990E00;
margine-dreapta:5px;
greutate font: bold;
dimensiunea fontului: 12px;
font-family:verdana;
text-decor:niciuna;
display:bloc;
lățime: 100px;
înălțime: 25px;
înălțimea liniei: 25px;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
chenar: 1px solid #560E00;
}
ul li a:hover
{
culoare:#cccccc;
fundal:#560E00;
greutate font: bold;
text-decor:niciuna;
display:bloc;
lățime: 100px;
text-align:center;
-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;
font-weight:normal;
text-decor:niciuna;
display:bloc;
lățime: 100px;
text-align:center;
margine-sus: 2px;
}
ul li.sublinks a:hover
{
culoare:#000000;
fundal:#FFEFC6;
font-weight:normal;
text-decor:niciuna;
display:bloc;
lățime: 100px;
text-align:center;
}
ul li.sublinks
{
afisare:niciuna;
}
/* CSS pentru meniul dropdown Sfârșit */
Majoritatea codului CSS este folosit pentru a formata meniuri (puteți da aspect meniu la propria discreție), dar există și câteva puncte importante aici:
1 – Eliminarea filelor folosind list-style:none;
2 – Știm că listele sunt elemente de bloc și sunt întotdeauna afișate în ordine verticală. Pentru a le face să se poziționeze orizontal, le dăm parametrul elementelor inline și le aliniem la stânga folosind codul:
display:inline;
float:stânga;
3 – În mod implicit, linkurile sunt elemente inline. Le convertim în elemente bloc folosind display:block (deci acum le putem da o valoare a lățimii).
4 – Ascunderea întregului meniu folosind:
Ul li.sublinks
{
afisare:niciuna;
}
jQuery
Imaginați-vă vremurile când meniurile drop-down erau implementate folosind cod javascript brut și mult cod inutil. Dar astăzi tot ce avem nevoie este jQuery:
$(funcție())(
Submeniu.css((
poziție: „absolut”,
zIndex:1000
});
Submeniu.stop().slideDown(300);
$(this).slideUp(300);
});
});
});
Un lucru foarte interesant și simplu. Să vă explicăm cum funcționează. Pentru a începe, și ca de obicei, împachetăm codul nostru într-un controler jQuery:
$(funcție())(
...
});
Codul nostru este activat atunci când cursorul mouse-ului este plasat (funcția mouse-enter) peste un element căruia îi este atribuită clasa meniului drop-down ($(".dropdown"). În cazul nostru, acesta este un link din meniu:
$(funcție())(
$(".dropdown").mouseenter(funcție())(
........
});
});
Să ne asigurăm că ascundem () toate meniurile deschise anterioare înainte ca cursorul mouse-ului să sară la următorul link:
$(".sublinks").stop(fals, true).hide();
Rețineți caracteristica de oprire, care ne ajută să afișăm un singur meniu derulant atunci când cursorul mouse-ului se deplasează peste diferite linkuri din meniu. Dacă nu folosim această funcție, atunci fiecare meniu derulant va rămâne deschis până când vom îndepărta complet cursorul mouse-ului din 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 = $(this).parent().next();
Iată ce se va întâmpla în codul HTML:
Când cursorul mouse-ului este plasat peste o legătură cu clasa drop-down, ne întoarcem folosind parent() și ne oprim la „li”, apoi folosind next(), ne găsim în meniul drop-down dorit și „li” va fi deja cu legăturile de subclasă (sublinkuri). În acest fel, jQuery ne ajută să găsim cu ușurință ce meniu drop-down să afișăm atunci când mouse-ul este plasat peste un anumit link.
Submeniu.css((
poziție: „absolut”,
sus: $(this).offset().top + $(this).height() + "px",
stânga: $(this).offset().left + „px”,
zIndex:1000
});
Codul este foarte important deoarece asigură că meniul drop-down este afișat exact sub linkul specific. Dacă poziția este setată la absolut, putem poziționa elementul în orice zonă a paginii noastre. Apoi, determinăm poziția de sus a link-ului trecut cu mouse-ul folosind $(this).offset().top (aceasta se referă la elementul de meniu plasat în prezent) și îi adăugăm o valoare de înălțime, astfel încât meniul să apară exact sub link. Facem ceva similar cu parametrul stânga. Apoi folosim z-index pentru a ne asigura că meniul nostru apare deasupra altor elemente.
Submeniu.stop().slideDown(300);
Desigur, puteți utiliza alte opțiuni de animație, cum ar fi fadeIn, animație folosind propriile stiluri și așa mai departe.
Acum trebuie să ne îndepărtăm de conceptul de afișare a unui meniu derulant și să îl ascundem. Avem nevoie de această bucată de cod:
Submeniu.mouseleave(funcție())(
$(this).slideUp(300);
});
Pentru a ascunde un meniu derulant, folosim slideUp, antonimul lui 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 meniu derulant atractiv pe un singur nivel în jQuery.
Foarte des puteți găsi elemente de navigare drop-down în șabloane. Dezvoltatorii folosesc acest tip meniuri ascunse 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. Impreuna cu Cod JavaScript Se aplică și efectele de tranziție CSS3. Rezultatul este un șablon pentru navigarea pe site.
HTMLMai întâi, să construim un șablon HTML5 de bază. Va fi solicitat 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:
Bara de navigare orizontală | 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.
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 navigareFoaia 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- smoothing: antialiased -webkit-text-size-adjust: 100% -webkit-box-sizing: border-box: 101%; ("images/bg.png"; dimensiunea fontului: 62,5%; 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; margine-spacing: 0; ) img (bord: 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) ); 0 1px rgba(20, 20, 0,2) font-weight: 1,45 px; fff-right: 1px, înălțime de liniu: 78px-transiție: toate 0.2s liniar; trece cu mouse-ul > a ( culoare: #7180a0; fundal: #d9e2ee; ) #ddmenu ul ( poziție: absolut; sus: 88px; lățime: 130px; fundal: # fff; afișare: niciunul; padding: 7px 0; chenar-rază: 3px ; bordura: 1px rgba (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 indicatorului de element 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 margine: 0 10px 10px 10px; chenar-stil : solid; border-color: rgba(0, 0, 0, 0.1) transparent ) #ddmenu ul li ( display: block; width: 100%; font-size: 0.9em; text-shadow: 1px 1px 0 #fff ; ) #ddmenu ul li a ( afișare: 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.2s liniară: toate 0.2s liniară ) #ddmenu ul li a:hover ( background: #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 toată magia. 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.
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 această opțiune Nu îl consider, pentru că 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 remarca 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:"/")); // păstraț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 exemplu am luat un 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.