De asemenea, dacă cineva este interesat, vă puteți uita la metoda anterioară cu folosind CSS care este descris în articol -
Acum la obiect. Ca și în ultimul articol, în primul rând, să scriem codul HTML pentru meniul nostru. Codul este același ca în articolul respectiv, astfel încât să nu existe confuzii și să fie mai de înțeles. Meniu cu două elemente și ambele au submeniuri.
- paragraful 1
- Elementul derulant 1
- Elementul derulant 2
- Elementul derulant 3
- punctul 2
- Elementul derulant 1
- Elementul derulant 2
- Elementul derulant 3
Dacă aveți o astfel de linie sau una similară care a inclus deja biblioteca înainte, atunci nu ar trebui să faceți acest lucru din nou.
jQuery(document).ready(function($)( $("#slow_nav ul li").hover(function () ( $("ul", this).stop().slideDown(400); ), function ( ) ( $("ul", aceasta).stop().slideUp(400); )); ));
În a doua linie a scriptului indicăm ID-ul meniului nostru. Dacă utilizați aceasta metoda pentru a mea meniu propriu, apoi schimbați în mod firesc numele cu al dvs. În acest caz, este #slow_nav.
De asemenea, puteți regla timpul de animație. În acest script, valoarea pentru deschidere și închidere este de 400 de milisecunde, adică 0,4 secunde. Dacă doriți, îl puteți schimba la o valoare mai mare sau mai mică.
Ultimul pas este adăugarea stilurilor. Sunt foarte asemănătoare cu stilurile din articolul precedent, doar că le lipsesc proprietățile de animație CSS.
#slow_nav > ul( width: 500px; margin:25px auto 0; ) #slow_nav > ul > li( list-style: none; display: inline-block; position:relative; padding:0; ) #slow_nav a(text- decoration:none;) #slow_nav > ul > li > a( font-size:18px; padding:5px; background-color:#333; color:#fff; ) #slow_nav li ul( position:absolute; list-style: niciunul; text-align:center; top:15px; font-size:15px; left:0; margin:0; padding:0; display:none; ) #slow_nav li ul li( background-color:#333; border- jos:1px solid #888; ) #slow_nav li ul li:last-child( border-bottom:none; ) #slow_nav li ul li a( padding:5px 12px; color:#fff; display:block; ) #slow_nav li ul li:hover( background-color:#444; ) #slow_nav li ul li:first-child( margin-top:25px; position:relative; ) #slow_nav li ul li:first-child:before( conținut:"" ; poziție: absolut; lățime: 1px; înălțime: 1px; chenar: 5px solid transparent; chenar-jos-culoare:#333; stânga:10px; sus:-10px; )
De asemenea, la stiluri este unul linie nouă, cu care scriptul funcționează corect. Pentru elementul - #slow_nav li ul proprietatea display:none; . Dacă nu îl adăugați, meniul derulant va fi vizibil inițial și va dispărea numai după ce veți muta cursorul peste el. Toate celelalte stiluri sunt aceleași ca în articolul precedent.
La fel ca metoda anterioară, aceasta poate fi aplicată nu numai meniurilor scrise de sine stătătoare, ci și acelorași meniuri dinamice care sunt create de sistemele de management al conținutului, cum ar fi WordPress. Pentru a face acest lucru, trebuie să modificați puțin stilurile și asta este tot. Adică, nu trebuie să utilizați primul cod HTML, ci doar stiluri. În stiluri, trebuie să înlocuiți numele ID #slow_nav cu ceea ce aveți și poate să modificați alte lucruri mici. Nu voi intra în detalii. Fiecare caz necesită o abordare personală, așa că scuzați-mă :)
Asta e tot, mulțumesc pentru atenție. 🙂
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 această lecție vom construi un meniu derulant simplu cu 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.
HTMLMai î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:
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, ceea ce în sine este o soluție proastă î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 sub Controlul 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 un 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 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.
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. Când este apăsat, apare meniul 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 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 treaba a fost rezolvată, 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, 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. Î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. Există tot mai multe site-uri cu meniuri pe ecran complet, jQuery gratuit Există și mai multe plugin-uri și 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.
Un plus foarte frumos la designul ferestrei este pictograma SVG animată. În mod implicit, arată ca trei bare, dar atunci când este făcută clic, pictograma se transformă într-o săgeată, ceea ce arată că meniul poate fi ascuns Navigare animată rotunjită Un alt script de navigare jquery pe ecran complet de la aceiași dezvoltatori ca și pluginul de mai sus. Acest scenariu 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ă.
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 Plugin 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 însăși î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 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.
Pentru a scrie singur navigarea sub forma unui meniu vertical vertical în jQuery cu o listă derulantă de subcategorii, trebuie să înțelegeți însuși principiul de funcționare al acestui mecanism. Dar mai întâi, să ne uităm la structura de navigare:
Navigare
După cum probabil ați ghicit, meniul nostru derulant se bazează pe liste cu marcatori. Când treci cu mouse-ul peste o etichetă
- testul 1
- testul 2
- testul 3
- testul 4
Dar cum, întrebi? Da, totul este de fapt foarte simplu. Mai întâi, să ne uităm la foaia de stil a listei noastre de navigare, va arăta astfel:
Body ( fundal: rgb(244, 244, 244); font-family: Verdana; font-weight: 100; ) /*---Navigation---*/ #menu ( lățime: 200px; margine: 0; umplutură: 2px; ) #menu li ( list-style-type: none; ) .menu (poziție: relativ; fundal: ciocolată; fundal: -moz-linear-gradient(sus, rgb(198, 255, 242), #2AC4B3) ; fundal: -webkit-linear-gradient(sus, rgb(198, 255, 242), #2AC4B3); fundal: -o-linear-gradient(sus, rgb(198, 255, 242), #2AC4B3); chenar : 1px solid #2AC4B3; ) .menu:hover ( fundal: #00c; fundal: -moz-linear-gradient(sus, rgb(230, 230, 230), #0CBFAB); fundal: -webkit-linear-gradient( sus, rgb(230, 230, 230), #0CBFAB); fundal: -o-linear-gradient(sus, rgb(230, 230, 230), #0CBFAB); ) .menu span ( lățime: 11px; înălțime: 11px; afișare: bloc; poziție: absolut; sus: 8px; dreapta: 10px; cursor: pointer; ) .menu ul ( lățime: 150px; margine: 0; umplutură: 1px; poziție: absolut; sus: -1px; stânga: 198px; ) .menu ul li ( fundal: ciocolată; fundal: -moz-linear-gradient(sus, rgb(198, 255, 242), #2AC4B3); fundal: -webkit-linear-gradient(sus, rgb(198, 255, 242), #2AC4B3); fundal: -o-linear-gradient(sus, rgb(198, 255, 242), #2AC4B3); chenar: 1px solid #fff; ) .menu ul li:hover ( fundal: #00c; fundal: -moz-linear-gradient(sus, rgb(230, 230, 230), #0CBFAB); fundal: -webkit-linear-gradient(sus, rgb( 230, 230, 230), #0CBFAB); fundal: -o-linear-gradient(sus, rgb(230, 230, 230), #0CBFAB); ) .meniu a ( padding: 5px; display: block; text- decor: nici unul; culoare: alb; ) .meniu a:hover (culoare: alb; ) /*---END---*/
Din foaia de stil puteți vedea că lista derulantă nu este inițial ascunsă, dar vom corecta acest punct folosind:
$(document).ready(function())( $(".menu ul").hide(); $(".menu span").css("background", "url("down.png")" ); $("#menu li").hover(function())( $(this).children("ul").show(); /*Echivalent cu $("ul", this).show() ;*/ $(this).find("span").css("background", "url("right.png")"); /*Echivalent cu $("span", this).css("background") ", "url ("right.png")");*/ ),function())( $(this).children("ul").hide(); /*Echivalent cu $("ul", this ).hide(); */ $(this).find("span").css("background", "url("down.png")"); /*$("span", this).css ("background", "url("down.png")");*/ )) ))
Acum să ne uităm la codul jQuery pentru meniul drop-down în detaliu, deoarece... Poate că pentru unii nu va fi complet clar. La început este scrisă următoarea construcție:
$(document).ready(funcție())( ))
Specifică comenzile care trebuie executate după sarcina completa pagini. Acest lucru a fost făcut pentru ca diverse tipuri de erori să nu apară atunci când este imposibil să găsești vreun obiect din cauza faptului că pur și simplu nu s-a încărcat încă.
$(".menu ul").hide();
Ce înseamnă această intrare? Construcția „$()” vă permite să selectați elemente. Prin urmare, la început trebuie să ne ascundem lista derulantă. Luăm construcția „$()” și scriem obiectul care ne interesează în ea. În cazul nostru, acest obiect va fi o listă cu marcatori cu clasa „meniu”. În continuare, scriem metoda „hide()”, care ne permite să ascundem obiectul care ne interesează.
$(".menu span").css("background", "url("down.png")");
Ce face ea? Acesta caută o etichetă căruia elementului părinte i se atribuie clasa „meniu” și, folosind metoda „css("background", "url("down.png")")", atribuie proprietății de stil „background” valoarea „ url("jos. png")". "jos.png" este o pictogramă care indică faptul că lista poate fi extinsă.
Apoi urmează construcția care va extinde lista noastră, arată astfel:
$("#menu li").hover(function())( $(this).children("ul").show(); $(this).find("span").css("background", " url("right.png")"); ),funcție())( $(this).children("ul").hide(); $(this).find("span").css(" fundal" , "url ("down.png")"); )
Căutăm o etichetă al cărei element părinte este atribuit id="menu". Urmează metoda „hover” și două funcții între paranteze. Prima funcție va fi executată când mouse-ul este plasat, iar a doua va fi executată dacă cursorul mouse-ului lasă elementul care ne interesează.
Prima functie spune:
$(this).children("ul").show(); $(this).find("span").css("background", "url("right.png")");
Construcția „$(this)” înseamnă că suntem interesați de elementul pe care îl privim acest moment regizat (acest din engleză this). Și am arătat spre etichetă
După aceasta, căutăm descendenții etichetei și anume: eticheta și îi schimbăm fundalul într-o altă pictogramă.
După aceasta, este scrisă o funcție care face totul așa cum a fost inițial, după ce cursorul mouse-ului părăsește elementul listă:
Function())( $(this).children("ul").hide(); $(this).find("span").css("background", "url("down.png")") ;)
Pentru ca codul scris în jQuery să funcționeze și meniul nostru drop-down să funcționeze corect, trebuie să descărcați biblioteca de pe jquery.com și să o conectați scriind linia după eticheta de deschidere.
OK, totul sa terminat acum! În concluzie, aș dori să observ că, dacă site-ul dvs. este destul de greu, atunci poate că scriptul se va lansa prea târziu (încărcarea site-ului va dura mult timp) și utilizatorii vor vedea cum se deschide mai întâi complet și abia apoi se ascunde, ceea ce , vezi tu, este foarte urât. Prin urmare, este necesar să mutați toate comenzile jQuery în spatele acestei construcții: „$(document).ready(function()())”. Va arăta astfel:
$(document).ready(function())( )) $(".menu ul").hide(); $(".menu span").css("background", "url("down.png")"); $("#menu li").hover(function())( $(this).children("ul").show(); $(this).find("span").css("background", " url("right.png")"); ),funcție())( $(this).children("ul").hide(); $(this).find("span").css(" fundal", "url("down.png")"); ))
Conexiunea scriptului nostru trebuie mutată de la etichetă până la capăt, înainte de eticheta de închidere, sau puteți conecta scriptul imediat după lista cu marcatori.
(descărcări: 314)
