Be to, jei kas nors domisi, galite pažvelgti į ankstesnį metodą naudojant CSS kuris aprašytas straipsnyje -
Dabar prie esmės. Kaip ir paskutiniame straipsnyje, pirmiausia parašykime savo meniu HTML kodą. Kodas toks pat kaip ir tame straipsnyje, kad nekiltų painiavos ir būtų suprantamiau. Meniu su dviem elementais ir abu turi submeniu.
- 1 dalis
- 1 išskleidžiamasis elementas
- 2 išskleidžiamasis elementas
- 3 išskleidžiamasis elementas
- 2 punktas
- 1 išskleidžiamasis elementas
- 2 išskleidžiamasis elementas
- 3 išskleidžiamasis elementas
Jei turite tokią ar panašią eilutę, kuri jau buvo įtraukta į biblioteką anksčiau, neturėtumėte to daryti daugiau.
jQuery(document).ready(function($)( $("#slow_nav ul li").hover(function () ( $("ul", this).stop().slideDown(400); ), funkcija ( ) ( $("ul", this).stop().slideUp(400); ));
Antroje scenarijaus eilutėje nurodome savo meniu ID. Jei naudojate šis metodas Mano savo meniu, tada natūraliai pakeiskite vardą į savo. Šiuo atveju tai yra #slow_nav.
Taip pat galite reguliuoti animacijos laiką. Šiame scenarijuje atidarymo ir uždarymo reikšmė yra 400 milisekundžių, tai yra 0,4 sekundės. Jei norite, galite pakeisti ją į didesnę arba mažesnę vertę.
Paskutinis žingsnis yra stilių pridėjimas. Jie labai panašūs į ankstesnio straipsnio stilius, tik jiems trūksta CSS savybės animacijos.
#slow_nav > ul( plotis: 500 tšk.; paraštė: 25 piks. auto 0; ) #slow_nav > ul > li( sąrašo stilius: nėra; ekranas: inline-block; pozicija: santykinis; užpildymas: 0; ) #slow_nav a(text- dekoracija:nėra;) #slow_nav > ul > li > a(šrifto dydis:18px; padding:5px; background-color:#333; color:#fff; ) #slow_nav li ul(pozicija:absoliutus; sąrašo stilius: nėra teksto lygiavimas: centre: šrifto dydis: 0 pikselių ekranas: apačioje: 1 piks. a(padding:5px 12px; color:#fff; display:block; ) #slow_nav li ul li:hover(fono spalva:#444; ) #slow_nav li ul li:first-child( margin-top:25px; position :reliatyvus
Taip pat prie stilių pridedamas vienas nauja linija, su kuria scenarijus veikia tinkamai. Elementui - #slow_nav li ul ypatybė display:none; . Jei jo nepridėsite, išskleidžiamasis meniu bus matomas iš pradžių ir išnyks tik perkėlus žymeklį virš jo. Visi kiti stiliai yra tokie patys kaip ir ankstesniame straipsnyje.
Kaip ir ankstesnį metodą, taip ir šį galima pritaikyti ne tik savarankiškai rašomiems meniu, bet ir tiems patiems dinaminiams meniu, kuriuos sukuria turinio valdymo sistemos, tokios kaip WordPress. Norėdami tai padaryti, turite šiek tiek pakoreguoti stilius ir viskas. Tai reiškia, kad jums nereikia naudoti pirmojo HTML kodo, tik stilius. Stilių ID pavadinimą #slow_nav reikia pakeisti tuo, ką turite, ir galbūt pakoreguoti kai kurias kitas smulkmenas. Į detales nesileisiu. Kiekvienas atvejis reikalauja asmeninio požiūrio, tad atsiprašau :)
Tai viskas, ačiū už dėmesį. 🙂
Labai dažnai šablonuose galite rasti išskleidžiamųjų naršymo elementų. Kūrėjai naudoja Šis tipas paslėptus meniu, kad būtų rodomos papildomos paslėptos nuorodos, temiškai susijusios su pagrindiniu elementu. Galima rasti slankiojančių skydelių ar įvairių akordeono stiliaus meniu, įgyvendinančių šį naršymo principą, pavyzdžių.
Bet į šią pamoką sudarysime paprastą išskleidžiamąjį meniu su naudojant jQuery. Jis veiks naudojant animacijos techniką, kad sukurtų uždelstus efektus. CSS3 perėjimo efektai taip pat taikomi kartu su JavaScript kodu. Rezultatas yra svetainės naršymo šablonas.
HTMLPirmiausia sukurkime pagrindinį HTML5 šabloną. Reikalingas Naujausia versija jQuery, kurią gauname iš Google API. Taip pat pridedame stiliaus failą styles.css, kuris bus pateiktas žemiau:
Horizontali naršymo juosta | Svetainės medžiagos svetainė
Dabar pažiūrėkime į struktūrą, kuri yra sukurta aplink netvarkingą sąrašą puslapio viršuje. Siekiant geresnių SEO rezultatų, visas sąrašas įtraukiamas į HTML5 elementą.
Kodo struktūra yra gana paprasta. Kiekvienas sąrašo elementas turi paryškinimo efektą, kai ant jo užvedamas pelės žymeklis. Visi vidiniai UL elementai yra pirminiame sąrašo elemente, todėl įvesties fokusavimas neprarandamas pereinant prie išskleidžiamojo meniu elementų.
Naršymo stiliaiStiliaus lape yra kodas, skirtas atkurti numatytąsias ypatybių vertes. Daugelis kūrėjų įtraukė Erico Meye failą, tačiau mums tai per sudėtinga. Be to, kodas yra saugomas kitame serveryje, o tai šiuo atveju savaime yra blogas sprendimas.
HTML, body, div, span, programėlė, objektas, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, akronimas, adresas, didelis, cituoti, kodas, del, dfn, em, img, ins, kbd, q, s, samp, mažas, smūgis, stiprus, sub, sup, tt, var, b, u, i, centras, dl, dt, dd, ol, ul, li, laukų rinkinys, forma, etiketė, legenda, lentelė, antraštė, tbody, tfoot, thead, tr, th, td, straipsnis, nuošalyje, drobė, informacija, įterpti, paveikslėlis, antraštė, poraštė, antraštė, h grupė, meniu, navigacija, išvestis, rubinas, skyrius, santrauka, laikas, ženklas, garsas, vaizdo įrašas ( paraštė: 0; užpildymas: 0; kraštinė: 0; šrifto dydis: 100 %; šriftas: paveldėti; vertikaliai lygiuoti: bazinė linija; kontūras: nėra; -webkit-font- išlyginimas: antialiased; -webkit-box-sizing: border-box : 101% ; ("images/bg.png"; šrifto aukštis: 1; paveikslas, poraštė, antraštė, hgrupė, meniu, navigacija, skyrius ( ekranas: blokas; ) ol, ul ( sąrašo stilius: nėra; ) blockquote, q ( kabutės: nėra; ) blockquote:prieš, blockquote:po, q:prieš, q:after ( turinys: ""; turinys: nėra; ) stiprus ( šriftas -svoris: paryškintas ) lentelė ( kraštinės sutraukimas: sutraukimas; tarpas tarp kraštinių: 0; ) img ( kraštinė: 0; didžiausias plotis: 100 %; )
Kode yra įdomi savybė -webkit-font-smoothing. Jis skirtas šriftams išlyginti, kai vykdomas kodas naršyklėse pagal „Mac“ valdymas OS X arba iOS.
Dabar pereikime prie mūsų meniu.
#ddmenu ( ekranas: blokas; plotis: 100 %; aukštis: 80 piks.; paraštė: 0 automatinis; užpildymas: 0 15 piks.; fonas: #fff; kraštinės spindulys: 6 piks.; kraštinė: 1 piks. vientisas rgba(0, 0, 0, 0,15 ; fff: 1px line-height: 78px - perėjimas: visi 0,2s linijiniai; užveskite pelės žymeklį > a ( spalva: #7180a0; fonas: #d9e2ee; ) #ddmenu ul ( padėtis: absoliutus; viršuje: 88 piks.; plotis: 130 piks.; fonas: # fff; ekranas: nėra; užpildymas: 7 piks. 0; kraštinės spindulys: 3 pikseliai kraštinė: 1px solid rgba (0, 0, 0,2); )
Pridedame #ddmenu ul parinkiklį, kad pasirinktume visus vidinius elementus kiekviename sąrašo elemente, nes svarbu nustatyti jų atstumą naudojant absoliutus pozicionavimas. Taip pat visoms nuorodoms pridedame linijinį perėjimą, kuris rodomas užvedus pelės žymeklį virš jų.
Dabar pažiūrėkime, kaip sukurti aukščiausio elemento indeksą. Jis suformuotas naudojant sukimosi savybę ir universalų rėmelį su tamsiu šešėlio fonu. Naudojant poslinkio padėties nustatymą, vienas mūsų struktūros elementas yra virš kito ir sudaro vaizdinį žymeklio vaizdą išskleidžiamajame meniu.
#ddmenu ul:after ( turinys: ""; plotis: 0; aukštis: 0; padėtis: absoliuti; apačia: 100 %; kairėje: 8 piks.; kraštinės plotis: 0 8 piks. 8 piks. 8 piks.; kraštinės stilius: vientisas; kraštinės spalva : #fff skaidrus : vientisa kraštinės spalva: rgba(0, 0, 0, 0.1) skaidri ; ) #ddmenu ul li a ( ekranas: blokas; plotis: 100%; užpildymas: 6 piks. 7 piks.; linijos aukštis: 1,4 em; -Webkit-transition: visi 0,2s linijiniai; -moz-transition: visi 0,2s linijiniai; - o perėjimas: visi 0,2 s linijiniai ) #ddmenu ul li a:hover (fonas: #e9edf3; )
JavaScript$(document).ready(function())( $("a").on("spustelėti", funkcija(e)( e.preventDefault(); )); $("#ddmenu li").hover( function () ( clearTimeout($.data(this,"laikmatis")); $("ul",this).stop(true,true).slideDown(200); ), funkcija () ( $.data(this) , "laikmatis", setTimeout($.proxy(function()) ( $("ul",this).stop(true,true).slideUp(200; ), this), 100));
Pirmoji kodo dalis sulaiko nuorodų paspaudimus ir sustabdo jų apdorojimą pagal numatytuosius nustatymus (puslapių įkėlimas adresu URL).
Antroji kodo dalis atlieka visą magiją. Pridedame įvykių tvarkyklę, skirtą užvesti pelės žymeklį virš sąrašo elemento. Valdiklis sustabdys šiuo metu aktyvią animaciją ir išves naują antrinį elementą naudodamas .slideDown() . Taip pat nustatėme nedidelį delsą, kad ji reaguotų tik į faktinį elementų pasirinkimą.
Šiandien norėčiau pasirinkti palyginti naujos kartos svetainės naršymą – viso ekrano meniu. Jie naudojami tais atvejais, kai puslapyje nėra pačios navigacijos, yra tik vienas mygtukas, paspaudus atsidaro meniu. Panašus principas matomas ir -framework: kai naršymo juosta nebetelpa, blokas su meniu elementų sąrašu tiesiog paslepiamas. Jo vietoje pasirodo mygtukas su, kaip taisyklė, trijų juostelių atvaizdu. Paspaudus pasirodo visas meniu. Daugelyje šiuolaikinių svetainių meniu nuolat slepiamas net ir dideli ekranai. Tai buvo padaryta, kad nebūtų įkeltas puslapis. Nors dabar neturėtumėte to daryti visuose savo projektuose. Jei meniu yra antrinės svarbos, galite jį paslėpti, tačiau jei turite didelę svetainę su sudėtinga struktūra, šios parinkties geriau nenaudoti. Taigi. SU bendras principas darbas buvo sutvarkytas, bet tokio tipo meniu gana standartinis, norisi kažko naujo. Neseniai pradėjau pastebėti svetaines, kuriose navigacija ne tik nutrūksta, bet ir visiškai atsidaro per visą ekraną iššokančiame lange. Kažkas panašaus į populiarias slankiojančias plokštes, tačiau visa tai užima visą darbo zonos plotą. Už svetaines pradėjo atsirasti atskiri jQuery įskiepiai ir css3 sprendimai, apie kuriuos iš tikrųjų yra ši tema.
Asmeniškai man labai patinka toks naršymo meniu įgyvendinimas, nes jis patogus mobiliuosius įrenginius turintiems vartotojams ir atrodo labai įspūdingai dideli monitoriai. Vis daugiau svetainių su viso ekrano meniu, Nemokama jquery Taip pat yra daugiau įskiepių ir ši koncepcija pamažu tampa tendencija.
Taigi. Atkreipiame jūsų dėmesį į 20 jQuery papildinių, skirtų viso ekrano meniu iššokančiajame lange.
Labai gražus lango dizaino papildymas yra animuota SVG piktograma. Pagal numatytuosius nustatymus jis atrodo kaip trys juostos, bet spustelėjus piktograma virsta rodykle, kuri rodo, kad meniu gali būti paslėptas. Šis scenarijus turi labai šaunų ir neįprastą išvaizdos efektą. Spustelėjus meniu mygtuką, iš piktogramos naudojant css3 visame monitoriuje sklinda banga, kuri išauga į meniu elementų foną. Tas pats slėpimo efektas.
Ši navigacija puikiai veikia mobiliuosiuose įrenginiuose, bet atsižvelgiant į tai, kad išvaizdos efektas yra gana sunkus, manau, kad senesniuose telefonuose viskas vyks lėtai (nesu testavęs, todėl bus malonu, jei parašysite savo patirtį komentaruose) .
Deja, įjungta Mobilieji telefonai neveikia tinkamai: jei meniu elementų yra daug ir jie netelpa ekrane, tada vertikalus slinkimas nepasirodo ir naršymas tiesiog nutrūksta.
Naudojant klasikinį JQuery, šia tema parašyta daug straipsnių. Bandžiau šiek tiek apsunkinti užduotį pridėdamas galimybę palikti meniu skyrius atidarytas (arba uždarytas, priklausomai nuo vartotojo pasirinkimo) judant svetainėje.
Norėdami išspręsti šią problemą, nusprendžiau naudoti JQuery Cookie papildinį. Šio įskiepio pranašumas yra tas, kad operacija atliekama kliento pusėje, o tai savo ruožtu sumažina serverio apkrovą. Minusas – jei vartotojas išjungė JS, įskiepis neveiks. Bet ši parinktis Nesvarstau, nes tada dingsta visa išskleidžiamojo meniu esmė. Taigi, pradėkime.
Pirmiausia turime prijungti pačią JQuery sistemą ir JQuery papildinys Slapukas:
Kodas: HTML
Kitas yra žymėjimas. Tai atrodys kaip paprastas sąrašas, nieko antgamtiško. Vienintelis dalykas, kurį norėčiau atkreipti dėmesį, yra tai, kad žymoje turi būti pavadinimas, kai spustelėsite jį, išskleidžiamas meniu:
Kodas: HTML
Pirmas titulas
- Pirma nuoroda
- Antra nuoroda
- Trečia nuoroda
Antrasis titulas
- Pirma nuoroda
- Antra nuoroda
- Trečia nuoroda
Trečias titulas
- Pirma nuoroda
- Antra nuoroda
- Trečia nuoroda
Ketvirtasis titulas
- Pirma nuoroda
- Antra nuoroda
- Trečia nuoroda
Na, ir taip toliau iki begalybės. Dabar ateina įdomiausia dalis. Kode pridėsiu keletą komentarų, kad jis būtų maždaug aiškus.
Kodas: JS
$(dokumentas).ready(function())(
if($.cookie("num_open_ul"))( // patikrinta, ar slapukuose yra įrašas
if($.cookie("num_open_ul") != 0)( // ir šis įrašas nėra lygus 0
var number_eq = parseInt($.cookie("num_open_ul")-1);
$(".navigation_body").eq(number_eq).show().prevAll("#navigation h2.navigation_head:first").addClass("aktyvi_navigacija");
}
};
$("#navigation h2.navigation_head").click(function())( // spustelėjus ši funkcija veiks
if(!$(this).next().is(":matomas"))(
$("div.navigation_body").siblings("div.navigation_body").slideUp(500); // jei kiti yra atidaryti, uždarykite viską, išskyrus dabartinį
}
$(this).next("div.navigation_body").slideToggle(500).siblings("div.navigation_body").slideUp(500);
$(this).toggleClass("aktyvi_navigacija").siblings("#navigation h2.navigation_head").removeClass("aktyvi_navigacija"); // Klasė buvo įtraukta į atvirą, kad pakeistų stilių
setTimeout(fncookie, 600); //pats įrašymas į slapukus su uždelsimu, kad scenarijus spėtų užbaigti savo darbą prieš įrašydamas (500ms – greitis, delsa – 600ms)
});
function fncookie())( // pati įrašymo funkcija
var number_open_ul = 0;
var i = 0;
$("div.navigation_body").each(function())(
i++;
if($(this).is(":matomas"))(
skaičius_atviras_ul = i;
}
$.cookie("num_open_ul", number_open_ul, (galioja:3, kelias:"/")); // saugoti 3 dienas visoje svetainėje.
});
}
});
Tai reiškia, kad dabar, jei vartotojas atidarė meniu, išėjo iš svetainės ir po poros dienų vėl grįžo į ją, meniu jis vis tiek liks atidarytas.
Ir galiausiai, mums liko nedidelis prisilietimas: iš tikrųjų, css stiliai. Galite tai padaryti pagal savo skonį, pavyzdyje aš paėmiau paruoštą dizainą iš vieno iš projektų
Kodas: CSS
#navigacija (
paraštė: 80px automatinis;
plotis: 250 pikselių;
}
#navigation h2, #navigation h2.navigation_head (
šrifto dydis: 18 pikselių;
šrifto svoris: ryškesnis;
fono spalva: #ffb6c1;
background-image: -webkit-gradient(linijinis,50% 0,50% 100%,spalvos sustabdymas(0%,#ffe9e9),spalvos sustabdymas(100%,#ffb6c1));
background-image: -webkit-linear-gradient(#ffe9e9,#ffb6c1);
background-image: -moz-linear-gradient(#ffe9e9,#ffb6c1);
background-image: -o-linear-gradient(#ffe9e9,#ffb6c1);
background-image: linear-gradient(#ffe9e9,#ffb6c1);
užpildymas: 5 pikseliai 3 pikseliai 6 pikseliai 3 pikseliai;
paraštė: auto;
padėtis: santykinė;
}
#navigation h2.navigation_head:after (
padėtis: absoliuti;
dešinėje: 5 pikseliai;
spalva: #550000;
turinys: "cssb";
}
#navigation h2:hover, #navigation h2.navigation_head:hover (
žymeklis: rodyklė;
}
.active_navigation(
background-image: -webkit-gradient(linijinis,50% 0,50% 100%,color-stop(0%,#ffb6c1),color-stop(100%,#ffe9e9)) !svarbu;
background-image: -webkit-linear-gradient(#ffb6c1,#ffe9e9) !svarbu;
background-image: -moz-linear-gradient(#ffb6c1,#ffe9e9) !svarbu;
background-image: -o-linear-gradient(#ffb6c1,#ffe9e9) !svarbu;
background-image: linear-gradient(#ffb6c1,#ffe9e9) !svarbu;
}
.active_navigation:after (
padėtis: absoliuti;
dešinėje: 5 pikseliai;
turinys: "cssd" !svarbu;
}
.navigation_body(
ekranas: nėra;
}
#navigation ul (
paraštė: 0;
paminkštinimas: 0;
sąrašo stiliaus tipas: nėra;
}
* html #navigation ul li (
aukštis: 1%;
}
#navigation div.navigation_body ul li (
paraštė kairėje: 10 pikselių;
}
#navigation a (
šriftų šeima: "Times New Roman";
ekranas: blokas;
spalva: #918871;
pamušalas: 3px;
fono spalva: #ffe3e0;
kraštinė apačia: 1 piks. vientisas #fff;
tekstas-dekoravimas: nėra;
}
#navigation a:hover (
spalva: #585858;
fono spalva: #ffb6cc;
}
Jei kas pastebėjo, čia pabandžiau panaudoti turinio ypatybę: +/- kai uždaryta/ atidaryti meniu, bet galite pridėti paveikslėlį ar bet kokį kitą dizainą. Čia galite pamatyti pavyzdį, ką mes sugalvojome
Kaip visada esu pasiruošęs išklausyti klausimus ir stengtis į juos atsakyti. Viso geriausio, viso ko geriausio.
Norėdami patys parašyti navigaciją vertikalaus išskleidžiamojo meniu „jQuery“ pavidalu su išskleidžiamuoju subkategorijų sąrašu, turite suprasti patį šio mechanizmo veikimo principą. Bet pirmiausia pažvelkime į naršymo struktūrą:
Navigacija
Kaip jau spėjote, mūsų išskleidžiamasis meniu yra pagrįstas sąrašais su ženkleliais. Kai užvedate pelės žymeklį virš žymos
- testas 1
- 2 testas
- 3 testas
- 4 testas
Bet kaip, paklausite? Taip, iš tikrųjų viskas labai paprasta. Pirmiausia pažvelkime į mūsų naršymo sąrašo stiliaus lapą, jis atrodys taip:
Turinys ( fonas: rgb(244, 244, 244); šriftų šeima: Verdana; šrifto svoris: 100; ) /*---Navigacija---*/ #meniu ( plotis: 200 tšk.; paraštė: 0; užpildymas: 2px. fonas: -webkit-linear-gradient(viršus, rgb(198, 255, 242), #2AC4B3: -o-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); 1px solid #2AC4B3; .menu:hover (fonas: #00c; fonas: -moz-linear-gradient(top, rgb(230, 230), #0CBFAB); fonas: -webkit-linear-gradient(viršuje, rgb(230, 230, 230), #0CBFAB fonas: -o-linear-gradient(top, rgb(230, 230, 230), #0CBFAB) .menu span (plotis: 11px; aukštis: 11px; ekranas: blokas: absoliutus viršus: 150 pikselių padėtis: -1px; -gradientas(viršus, rgb(198, 255, 242), #2AC4B3); fonas: -webkit-linear-gradient(viršus, rgb(198, 255, 242), #2AC4B3); fonas: -o-linear-gradient(viršus, rgb(198, 255, 242), #2AC4B3); kraštinė: 1px vientisas #fff; ) .menu ul li:hover ( fonas: #00c; fonas: -moz-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); fonas: -webkit-linear-gradient(top, rgb( 230, 230, 230), #0CBFAB fonas: -o-linear-gradient(top, rgb(230, 230, 230), #0CBFAB) .menu a ( padding: 5px; ekranas: blokas; tekstas-); apdaila: nėra spalva: balta ) .menu a:hover ( spalva: balta; ) /*---END---*/
Iš stiliaus lapo matote, kad išskleidžiamasis sąrašas iš pradžių nėra paslėptas, bet mes pataisysime šį punktą naudodami:
$(document).ready(function())( $(.menu ul").hide(); $(.menu span").css("background", "url("down.png")" ) ; $("#menu li").hover(function())( $(this).childs("ul").show(); /*Atitinka $("ul", this).show() ;*/ $(this).find("span").css("background", "url("right.png")"); /*Atitinka $("span", this).css("background ", "url"); ("right.png")");*/ ),function())( $(this).children("ul").hide(); /*Atitinka $("ul" ", this).hide(); */ $(this).find("span").css("background", "url("down.png")"); /*$("span", tai ).css("fonas", " url("down.png")");*/ )) ))
Dabar išsamiai pažvelkime į išskleidžiamojo meniu „jQuery“ kodą, nes... Galbūt kai kuriems tai nebus iki galo aišku. Pačioje pradžioje parašyta tokia konstrukcija:
$(dokumentas).ready(funkcija())( ))
Jame nurodomos komandos, kurios turi būti vykdomos po to pilna apkrova puslapių. Tai buvo padaryta tam, kad neatsirastų įvairių klaidų, kai neįmanoma rasti jokio objekto dėl to, kad jis tiesiog dar neįkeltas.
$(.menu ul").hide();
Ką reiškia šis įrašas? „$()“ konstrukcija leidžia pasirinkti elementus. Todėl pačioje pradžioje turime paslėpti savo išskleidžiamąjį sąrašą. Paimame „$()“ konstrukciją ir užrašome mus dominantį objektą. Mūsų atveju šis objektas bus sąrašas su ženkleliais su klase „meniu“. Toliau rašome metodą „hide()“, kuris leidžia paslėpti mus dominantį objektą.
$(.menu span").css("fonas", "url("down.png")");
Ką ji daro? Jis ieško žymos, kurios pirminiam elementui priskirta klasė „menu“, ir, naudodama „css("background", "url("down.png")" metodą, stiliaus ypatybei "background" priskiria reikšmę " url("down. png")". "down.png" yra piktograma, nurodanti, kad sąrašą galima išplėsti.
Tada ateina konstrukcija, kuri išplės mūsų sąrašą, atrodo taip:
$("#menu li").hover(function())( $(this).children("ul").show(); $(this).find("span").css("fonas", " url("right.png")"); ),function())( $(this).children("ul").hide(); $(this).find("span").css(" background" , "url("down.png")");
Mes ieškome žymos, kurios pirminiam elementui priskirtas id="menu" Kitas yra "hover" metodas ir dvi funkcijos skliausteliuose. Pirmoji funkcija bus vykdoma užvedus pelę, o antroji bus vykdoma, jei pelės žymeklis paliks mus dominantį elementą.
Pirmoji funkcija sako:
$(this).vaikai("ul").show(); $(this).find("span").css("fonas", "url("right.png")");
Konstrukcija „$(this)“ reiškia, kad mus domina elementas, į kurį žiūrime Šis momentas režisuotas (šis iš anglų kalbos šis). Ir mes parodėme į etiketę
Po to ieškome žymos palikuonių, būtent: pažymėkite ir pakeiskite jos foną į kitą piktogramą.
Po to, pelės žymekliui palikus sąrašo elementą, parašyta funkcija, kuri daro viską taip, kaip buvo iš pradžių:
Funkcija())( $(this).children("ul").hide(); $(this).find("span").css("background", "url("down.png")") ;)
Kad parašytas kodas jQuery veiktų ir mūsų išskleidžiamasis meniu veiktų tinkamai, turite atsisiųsti biblioteką iš jquery.com ir prijungti ją parašydami eilutę po pradinės žymos.
Gerai, viskas dabar! Baigdamas norėčiau pastebėti, kad jei jūsų svetainė yra gana sunki, galbūt scenarijus bus paleistas per vėlai (svetainės įkėlimas užtruks ilgai) ir vartotojai pamatys, kaip ji pirmiausia atsidaro iki galo ir tik tada pasislepia. , matai, labai negražu. Todėl būtina perkelti visas jQuery komandas už šios konstrukcijos: "$(document).ready(function()())". Tai atrodys taip:
$(dokumentas).ready(function())( )) $(.menu ul").hide(); $(.menu span").css("fonas", "url("down.png")"); $("#menu li").hover(function())( $(this).children("ul").show(); $(this).find("span").css("fonas", " url("right.png")"); ),function())( $(this).children("ul").hide(); $(this).find("span").css(" background" , "url("down.png")");
Mūsų scenarijaus ryšys turi būti perkeltas iš žymos į pačią pabaigą, prieš baigiamąją žymą, arba galite prijungti scenarijų iškart po sąrašo su ženkleliais.
(atsisiuntimai: 314)
