Preprost spustni meni z uporabo jquery. JQuery: spustni meni z uporabo piškotkov
Če koga zanima, si lahko pogleda prejšnjo metodo z uporabo CSS, ki je opisana v članku -
Zdaj pa k bistvu. Kot v prejšnjem članku, najprej napišimo kodo HTML za naš meni. Koda je enaka kot v tistem članku, da ne bo zmede in je bolj razumljiva. Meni z dvema elementoma in oba imata podmenija.
- odstavek 1
- Spustni element 1
- 2. spustni element
- Spustni element 3
- točka 2
- Spustni element 1
- 2. spustni element
- Spustni element 3
Če imate takšno linijo ali podobno, ki je že vključevala knjižnico, tega ne smete ponoviti.
jQuery(document).ready(function($)( $("#slow_nav ul li").hover(function () ( $("ul", this).stop().slideDown(400); ), funkcija ( ) ($("ul", this).stop().slideUp(400); )); ));
V drugi vrstici skripta navedemo ID našega menija. Če to metodo uporabite za svoj meni, seveda spremenite ime v svoje. V tem primeru je #slow_nav.
Prilagodite lahko tudi čas animacije. V tem skriptu je vrednost za odpiranje in zapiranje 400 milisekund, kar je 0,4 sekunde. Če želite, jo lahko spremenite na višjo ali nižjo vrednost.
Zadnji korak je dodajanje stilov. Zelo so podobni slogom iz prejšnjega članka, le da nimajo lastnosti animacije 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- dekoracija:brez;) #slow_nav > ul > li > a( font-size:18px; padding:5px; background-color:#333; color:#fff; ) #slow_nav li ul( position:absolute; list-style: nič; poravnava besedila: sredina; vrh: 15 slikovnih pik; velikost pisave: 15 slikovnih pik; levo: 0; rob: 0; oblazinjenje: 0; prikaz: brez; ) #slow_nav li ul li( background-color:#333; border- bottom: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( content:"" ; position:absolute; width:1px; height:1px; border:5px solid transparent; border-bottom-color:#333; left:10px; top:-10px; )
Prav tako je v sloge dodana ena nova vrstica, s pomočjo katere skripta deluje pravilno. Za element - #slow_nav li ul lastnost display:none; . Če ga ne dodate, bo spustni meni najprej viden in bo izginil šele, ko premaknete kazalec nad njim. Vsi drugi slogi so enaki prejšnjemu članku.
Tako kot prejšnjo metodo je tudi to mogoče uporabiti ne le za menije, ki jih sami napišemo, ampak tudi za iste dinamične menije, ki jih ustvarijo sistemi za upravljanje vsebine, kot je WordPress. Če želite to narediti, morate nekoliko prilagoditi sloge in to je to. To pomeni, da vam ni treba uporabiti prve kode HTML, ampak samo sloge. V slogih morate zamenjati ime ID-ja #slow_nav s tem, kar imate, in morda spremeniti še kakšno malenkost. Ne bom šel v podrobnosti. Vsak primer zahteva osebni pristop, zato se opravičujem :)
To je vse, hvala za pozornost. 🙂
Z uporabo klasičnega JQueryja je bilo na to temo napisanih veliko člankov. Nalogo sem poskušal nekoliko zakomplicirati z dodajanjem možnosti, da med premikanjem po spletnem mestu pustim odseke menija odprte (ali zaprte, odvisno od izbire uporabnika).
Za rešitev te težave sem se odločil uporabiti vtičnik JQuery Cookie. Prednost tega vtičnika je, da se operacija izvaja na strani odjemalca, kar posledično zmanjša obremenitev strežnika. Minus - če ima uporabnik onemogočen JS, plugin ne bo deloval. Vendar te možnosti ne upoštevam, saj potem celoten smisel spustnega menija izgine. Torej, začnimo.
Najprej moramo povezati samo ogrodje JQuery in vtičnik JQuery Cookie:
Koda: HTML
Sledi markacija. Videti bo kot preprost seznam, nič nadnaravnega. Edina stvar, na katero bom opozoril, je, da mora oznaka vsebovati naslov, ko kliknete nanj, se vam prikaže meni:
Koda: HTML
Prvi naslov
- Prva povezava
- Druga povezava
- Tretja povezava
Drugi naslov
- Prva povezava
- Druga povezava
- Tretja povezava
Tretji naslov
- Prva povezava
- Druga povezava
- Tretja povezava
Četrti naslov
- Prva povezava
- Druga povezava
- Tretja povezava
No, in tako naprej v nedogled. Sedaj pride najbolj zanimiv del. V kodo bom dodal nekaj komentarjev, da bo približno jasno.
Koda: JS
$(dokument).pripravljen(funkcija())(
if($.cookie("num_open_ul"))( // preverjeno, ali je med piškotki vnos
if($.cookie("num_open_ul") != 0)( // in ta vnos ni enak 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())( // ko kliknete, bo ta funkcija delovala
if(!$(this).next().is(":visible"))(
$("div.navigation_body").siblings("div.navigation_body").slideUp(500); // če so drugi odprti, zapri vse razen trenutnega
}
$(this).next("div.navigation_body").slideToggle(500).siblings("div.navigation_body").slideUp(500);
$(this).toggleClass("active_navigation").siblings("#navigation h2.navigation_head").removeClass("active_navigation"); // razred je bil dodan odprtemu za spremembo sloga
setTimeout(fncookie, 600); //sam zapis v piškotke z zamikom, tako da ima skripta čas dokončati svoje delo pred snemanjem (500ms - hitrost, zakasnitev - 600ms)
});
funkcija fncookie())( // sama snemalna funkcija
var število_odprtih_ul = 0;
var i = 0;
$("div.navigation_body").each(function())(
i++;
if($(this).is(":visible"))(
število_odprto_ul = i;
}
$.cookie("num_open_ul", number_open_ul, (poteče:3, pot:"/")); // shranjevanje 3 dni za celotno spletno mesto.
});
}
});
To pomeni, da zdaj, če je uporabnik odprl meni, zapustil spletno mesto in se čez nekaj dni spet vrnil nanj, bo meni še vedno ostal odprt zanj.
In končno, ostane nam majhen pridih: pravzaprav slogi css. To lahko storite po svojem okusu, v primeru sem vzel že pripravljen dizajn iz enega od projektov
Koda: CSS
#navigacija (
rob: 80 slikovnih pik samodejno;
širina: 250px;
}
#navigacija h2, #navigacija h2.navigacijska_glava (
velikost pisave: 18px;
teža pisave: krepko;
barva ozadja: #ffb6c1;
slika ozadja: -webkit-gradient(linearno,50% 0,50% 100%,color-stop(0%,#ffe9e9),color-stop(100%,#ffb6c1));
slika ozadja: -webkit-linearni gradient (#ffe9e9,#ffb6c1);
slika ozadja: -moz-linearni gradient (#ffe9e9,#ffb6c1);
slika ozadja: -o-linearni gradient (#ffe9e9,#ffb6c1);
slika ozadja: linearni gradient (#ffe9e9,#ffb6c1);
oblazinjenje: 5px 3px 6px 3px;
rob: avto;
položaj: relativni;
}
#navigation h2.navigation_head:after (
položaj: absolutno;
desno: 5px;
barva: #550000;
vsebina: "cssb";
}
#navigation h2:hover, #navigation h2.navigation_head:hover (
kazalec: kazalec;
}
.active_navigation(
slika ozadja: -webkit-gradient(linearno,50% 0,50% 100%,color-stop(0%,#ffb6c1),color-stop(100%,#ffe9e9)) !pomembno;
slika ozadja: -webkit-linearni gradient(#ffb6c1,#ffe9e9) !pomembno;
slika ozadja: -moz-linearni-gradient(#ffb6c1,#ffe9e9) !pomembno;
slika ozadja: -o-linearni gradient(#ffb6c1,#ffe9e9) !pomembno;
slika ozadja: linearni gradient (#ffb6c1,#ffe9e9) !pomembno;
}
.active_navigation:after (
položaj: absolutno;
desno: 5px;
vsebina: "cssd" !pomembno;
}
.navigation_body(
prikaz:ni;
}
#navigacija ul (
rob: 0;
oblazinjenje: 0;
list-style-type: brez;
}
* html #navigacija ul li(
višina: 1 %;
}
#navigation div.navigation_body ul li (
rob-levo: 10px;
}
#navigacija a (
družina pisav: "Times New Roman";
zaslon: blok;
barva: #918871;
oblazinjenje: 3px;
barva ozadja: #ffe3e0;
obroba-spodnja: 1px polna #fff;
tekst-dekoracija: brez;
}
#navigacija a:hover (
barva: #585858;
barva ozadja: #ffb6cc;
}
Če je kdo opazil, tukaj sem poskusil uporabiti lastnost content: +/-, ko je meni zaprt/odprt, lahko pa dodate sliko ali katero drugo strukturo. Tukaj si lahko ogledate primer tega, kar smo izumili
Kot vedno sem pripravljena prisluhniti vprašanjem in poskušati nanje odgovoriti. Vse najboljše, vse najboljše.
Po prejemu več zahtev sem se odločil napisati članek o tem, kako narediti spustni meni. Najboljši in najlažji način za ustvarjanje takega menija je, da se zanesete na jQuery.
Najprej si poglejmo oznako HTML
Preprost spustni meni, ki temelji na jQuery Preprost spustni meni
- domov
- Izdelki
- Storitve
- Kontaktiraj nas
Vsebina
Obstaja preprost neurejen seznam ul, njegove oznake li so osnova navigacijskega menija. Nato dodajte spodnjo kodo ustrezni oznaki li, kar bo strukturiralo spustni seznam.
Če ste pozorni, boste opazili dve stvari:
1. Oznaka li ima spustni razred.
2. Nadrejena povezava ima razred ddIcon.
Razred spustnega menija se v jQuery uporablja za prikaz/skrijenje spustnega menija. Drugi razred, ddIcon, se uporablja za prikaz kazalca na spustni meni.
Pri slogih menijev ni nič posebnega - običajni slogi so:
Vsebnik (širina: 960 slikovnih pik; rob: 0 samodejno; oblazinjenje na vrhu: 50 slikovnih pik; ) .vsebnik h1 (velikost pisave: 30 slikovnih pik; barva: #666; spodnji rob: 1em; ) .kontejner nav (polmer obrobe: 4 slikovnih pik; barva ozadja: #fff; višina: 37px; ) .container nav ul li (položaj: relativno; lebdeč: levo; ) .container nav ul li a (velikost pisave: 12px; besedilo-dekoracija: brez; teža pisave: krepko; preoblikovanje besedila: velike črke; barva: #545454; oblazinjenje: 13px 15px; zaslon: blok; rob-desno: 1px polno #f9f9f9; ) .container nav ul li a.ddIcon ( ozadje: prozoren url("dd.png) ") brez ponavljanja 86 % 52 %; oblazinjenje: 13px 25px 13px 15px; ) .container nav ul li a:hover ( barva ozadja: #cc333f; barva: #fff; ) .container nav ul li.active a ( ozadje -color: #cc333f; barva: #fff; ) .container nav ul li:first-child a ( border-radius: 4px 0 0 4px; ) .container nav ul li .subNav ( position: absolute; background-color: # cc333f; oblazinjenje: 15px 15px 20px; širina: 172px; levo: 0px; zgoraj: 38px; zaslon: brez; ) .container nav ul li .subNav .navSection ( oblazinjenje: 5px 0; ) .container nav ul li .subNav h4 (margin-bottom: 0,5em; ) .container nav ul li .subNav h4 a (font-size: 11px; color: #edc951; text-transform: capitalize; border-bottom: 1px solid #D33B47; padding: 7px 10px; ) .container nav ul li .subNav h4 a:hover ( barva: #edc951; ) .container nav ul li .subNav h4 a span ( float: right; font-size: 10px; barva : #fff; -moz-transition: barva 0,5 s olajšanje 0 s; ) .container nav ul li .subNav h4 a span:hover ( barva: #390206 ) .container nav ul li .subNav a ( float: brez; obroba: brez ; display: block; text-transform: capitalize; color: #fff; padding: 7px 15px; -moz-transition: color 0.5s ease 0s; line-height: 1.3; ) .container nav ul li .subNav:hover ( barva : #390206; ) .container .section ( jasno: oboje; oblazinjenje: 10px; ) .container .section članek p (velikost pisave: 16px; barva: #488fb8; line-height: 1,3; ) .container .section glava članka p (padding-top: 20px; font-size: 20px; color: #333; line-height: 1.3; margin-bottom: .4em; )
Zdaj moramo oživiti spustni meni. Pri tem nam bo pomagala najenostavnejša funkcija jQuery.
$(function())( $("li.dropdown").hover(function() ( if ($("this:has(div.subNav)"))( $(".subNav").css(( " display":"none")); $(".subNav", this).css(("display":"block")); $("nav ul li").css(("position":" relative ", "z-index":"1001")); $(this).addClass("active"); ) ), function())( $(".subNav").css(("display": "brez ")); $(this).removeClass("aktivno"); $("nav ul li").css(("položaj":"relativno", "z-index":"1")); )) ; ));
Za vsak element seznama je mogoče ustvariti lasten spustni meni: znotraj elementa li postavite blok z razredom .subnav in dodelite razred .dropdown tudi samemu li.
Zelo pogosto lahko v predlogah najdete spustne navigacijske elemente. Razvijalci uporabljajo to vrsto skritega menija za prikaz dodatnih skritih povezav, ki so tematsko povezane z glavnim elementom. Najdete lahko primere drsnih plošč ali različnih menijev v slogu harmonike, ki izvajajo ta navigacijski princip.
Toda v tej vadnici bomo zgradili preprost spustni meni z uporabo jQuery. Deloval bo s tehniko animacije za ustvarjanje zakasnjenih učinkov. Učinki prehoda CSS3 se uporabljajo tudi skupaj s kodo JavaScript. Rezultat je predloga za navigacijo po spletnem mestu.
HTMLNajprej zgradimo osnovno predlogo HTML5. Potrebovali bomo najnovejšo različico jQuery, ki jo dobimo iz Googlovega API-ja. Dodamo tudi slogovno datoteko styles.css, ki bo predstavljena spodaj:
Vodoravna navigacijska vrstica | Spletno mesto z materiali
Zdaj pa si poglejmo strukturo, ki je zgrajena okoli neurejenega seznama na vrhu strani. Celoten seznam je postavljen v element HTML5 za boljše rezultate SEO.
Struktura kode je precej preprosta. Vsak element seznama vključuje učinek osvetlitve, ko miškin kazalec postavite nanj. Vsi notranji elementi UL so vsebovani v izvirnem elementu seznama, tako da se fokus vnosa ne izgubi, ko se premaknete na elemente spustnega menija.
Navigacijski slogiSlogovni list vsebuje kodo za ponastavitev vrednosti lastnosti na privzete. Mnogi razvijalci vključujejo datoteko Erica Meyeja, vendar je za našo uporabo preveč okorna. Poleg tega je koda shranjena na drugem strežniku, kar je samo po sebi v tem primeru slaba rešitev.
Html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, akronim, naslov, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, obrazec, oznaka, legenda, tabela, napis, tbody, tfoot, thead, tr, th, td, članek, stran, platno, podrobnosti, vdelava, slika, figcaption, noga, glava, hgroup, meni, nav, izhod, ruby, razdelek, povzetek, čas, oznaka, zvok, video ( rob: 0; oblazinjenje: 0; rob: 0; velikost pisave: 100 %; pisava: podeduj; navpična poravnava: osnovna črta; oris: brez; -webkit-font- glajenje: antialiased; -webkit-text-size-adjust: 100 %; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; ) html ( višina : 101 %; ) telo (ozadje: #eaeaea url("images/bg.png"); velikost pisave: 62,5 %; višina vrstice: 1; družina pisav: Arial, Tahoma, sans-serif; oblazinjenje na dnu : 60px; ) članek, stran, podrobnosti, figcaption, slika, noga, glava, hgroup, meni, nav, razdelek ( prikaz: blok; ) ol, ul ( list-style: none; ) blockquote, q ( quotes: none; ) blockquote:before, blockquote:after, q:before, q:after ( content: ""; content: none; ) strong ( pisava -weight: krepko; ) tabela ( border-collapse: collapse; border-spacing: 0; ) img ( border: 0; max-width: 100 %; )
V kodi je zanimiva lastnost -webkit-font-smoothing. Zasnovan je za glajenje pisav pri izvajanju kode v brskalnikih z operacijskim sistemom Mac OS X ali iOS.
Zdaj pa preidimo na naš jedilnik.
#ddmenu ( prikaz: blok; širina: 100 %; višina: 80 slikovnih pik; rob: 0 samodejno; oblazinjenje: 0 15 slikovnih pik; ozadje: #fff; polmer obrobe: 6 slikovnih pik; obroba: 1 slikovnih pik trdna rgba(0, 0, 0, 0,15) ); box-shadow: 0 1px 1px rgba(20, 20, 20, 0.2); kazalec: kazalec; oris: brez; teža pisave: krepko; barva: #8aa8bd; ) #ddmenu li ( zaslon: blok; položaj: relativno; lebdeč: levo; velikost pisave: 1,45em; senca besedila: 1px 1px 0 #fff; obroba-desno: 1px polna #dae0e5; ) #ddmenu li a ( zaslon: blok; lebdeč: levo; oblazinjenje: 0 12px ; line-height: 78px; font-weight: krepko; text-decoration: none; color: #6c87c0; -webkit-transition: vse 0,2 s linearno; -moz-transition: vse 0,2 s linearno; -o-transition: vse 0,2 s linearno; prehod: vse 0,2 s linearno; ) #ddmenu li:hover > a ( barva: #7180a0; ozadje: #d9e2ee; ) #ddmenu ul ( položaj: absolutno; zgoraj: 88 slikovnih pik; širina: 130 slikovnih pik; ozadje: # fff; zaslon: nič; rob: 0; oblazinjenje: 7px 0; slog seznama: noben; polmer obrobe: 3px; obroba: 1px polna rgba(0, 0, 0, 0,2); senca polja: 0 0 5px rgba (0, 0, 0, 0,2); )
Dodamo izbirnik #ddmenu ul, da izberemo vse notranje elemente v vsakem elementu seznama, saj je pomembno določiti razdaljo zanje z uporabo absolutnega pozicioniranja. Dodamo tudi linearni prehod za vse povezave, ki se prikaže, ko se na njih pomaknete.
Zdaj pa poglejmo ustvarjanje indeksa zgornjega elementa. Oblikovan je z uporabo lastnosti vrtenja in univerzalnega okvirja s temnim ozadjem za senco. Z uporabo odmičnega pozicioniranja je en element naše strukture postavljen nad drugega in tvori vizualno predstavitev kazalca v spustnem meniju.
#ddmenu ul:after ( content: ""; width: 0; height: 0; position: absolute; bottom: 100%; left: 8px; border-width: 0 8px 8px 8px; border-style: solid; border-color : #fff transparent; ) #ddmenu ul:before ( content: ""; width: 0; height: 0; position: absolute; bottom: 100 %; left: 4px; border-width: 0 10px 10px 10px; border-style : trdna; barva obrobe: rgba(0, 0, 0, 0.1) transparentna; ) #ddmenu ul li ( zaslon: blok; širina: 100 %; velikost pisave: 0,9 em; senca besedila: 1px 1px 0 #fff ; ) #ddmenu ul li a ( display: block; width: 100 %; padding: 6px 7px; line-height: 1.4em; -webkit-transition: all 0.2s linearno; -moz-transition: all 0.2s linearno; - o-prehod: vse 0,2 s linearno; prehod: vse 0,2 s linearno; ) #ddmenu ul li a:hover ( ozadje: #e9edf3; )
JavaScript$(document).ready(function())( $("a").on("click", 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)); )); )) ;
Prvi del kode prestreže klike na povezave in prepreči njihovo privzeto obdelavo (nalaganje strani na URL).
Drugi del kode naredi vso čarovnijo. Priložimo obravnavo dogodkov za postopek premikanja miške nad element seznama. Upravljalnik bo ustavil trenutno aktivno animacijo in izpisal nov podsistem z uporabo .slideDown(). Nastavili smo tudi majhno zakasnitev, tako da se odzove samo na dejansko izbiro artikla.
V tem članku bomo razvili preprost spustni meni z uporabo jQuery. Najprej si oglejte demo datoteko. Upamo, da poznate vsaj malo osnov jQuery in CSS. Ključni vidiki ustvarjanja tega spustnega menija so uporaba parametrov CSS: položaj, zgoraj, levo, z-indeks.
Z uporabo teh parametrov smo lahko prepričani, da se bo naš meni pojavil točno pod povezavo, nad katero smo kazali miško, in bo natančno pokrival vse ostale elemente. Poskrbeli bomo tudi, da se bo meni prikazal ob lebdenju in izginil, ko se kazalec premakne stran. Za izvedbo teh dogodkov bomo uporabili funkciji jQuery: mouseenter in mouseleave. In to je vse, kar potrebujemo za ustvarjanje spustnega menija!
Demo datoteka končnega rezultata in povezava za prenos
HTML koda
Oglejte si kodo HTML za spustni meni:
Kot lahko vidite, bomo tukaj uporabili neurejene sezname za implementacijo elementov menija. Vsaki povezavi menija je dodeljen razred spustnega menija, sam spustni meni pa pokriva razred podpovezave. Imena razredov bo jQuery uporabil za določitev menija, ki naj se prikaže.
koda CSS
Preverite kodo CSS:
/* CSS za začetek spustnega menija */
ul
{
list-style:none;
oblazinjenje:0px;
margin:0px
}
ulli
{
prikaz: v vrstici;
float:left;
}
ulli a
{
barva: #ffffff;
ozadje:#990E00;
margin-desno:5px;
teža pisave: krepko;
velikost-pisave:12px;
družina pisav:verdana;
text-decoration:none;
zaslon: blok;
širina:100px;
višina:25px;
line-height:25px;
poravnava besedila: sredina;
-webkit-border-radius:5px;
-moz-border-radius:5px;
obroba: 1px polna #560E00;
}
ul li a: lebdi
{
barva:#cccccc;
ozadje:#560E00;
teža pisave: krepko;
text-decoration:none;
zaslon: blok;
širina:100px;
poravnava besedila: sredina;
-webkit-border-radius:5px;
-moz-border-radius:5px;
obroba: 1px polna #000000;
}
ul li.podpovezave a
{
barva:#000000;
ozadje:#f6f6f6;
border-bottom:1px solid #cccccc;
teža-pisave:normalna;
text-decoration:none;
zaslon: blok;
širina:100px;
poravnava besedila: sredina;
margin-top:2px;
}
ul li.podpovezave a:hover
{
barva:#000000;
ozadje:#FFEFC6;
teža-pisave:normalna;
text-decoration:none;
zaslon: blok;
širina:100px;
poravnava besedila: sredina;
}
ul li.podpovezave
{
prikaz:ni;
}
/* CSS za konec spustnega menija */
Večina kode CSS se uporablja za oblikovanje menijev (videz menija lahko prilagodite, kakor želite), vendar je tudi tukaj nekaj pomembnih točk:
1 – Odstranjevanje zavihkov s slogom seznama: brez;
2 – Vemo, da so seznami blokovni elementi in so vedno prikazani v navpičnem vrstnem redu. Da bi jih postavili vodoravno, jim damo parameter inline elements in jih poravnamo v levo s kodo:
prikaz: v vrstici;
float:left;
3 – Privzeto so povezave elementi v vrstici. Pretvorimo jih v blokovne elemente z uporabo display:block (tako da jim lahko zdaj damo vrednost širine).
4 – Skrivanje celotnega menija z:
Ul li.podpovezave
{
prikaz:ni;
}
jQuery
Predstavljajte si stare čase, ko so bili spustni meniji implementirani s surovo kodo javascript in veliko nepotrebne kode. Toda danes potrebujemo le jQuery:
$(funkcija())(
Podmeni.css((
položaj:"absolutno",
zIndeks:1000
});
Submenu.stop().slideDown(300);
$(to).slideUp(300);
});
});
});
Zelo zanimiva in preprosta stvar. Naj vam razložimo, kako deluje. Za začetek in kot običajno našo kodo zavijemo v krmilnik jQuery:
$(funkcija())(
...
});
Naša koda se aktivira, ko miškin kazalec premaknemo (funkcija mouseenter) nad element, ki mu je dodeljen razred spustnega menija ($(".dropdown"). V našem primeru je to povezava v meniju:
$(funkcija())(
$(".dropdown").mouseenter(funkcija())(
........
});
});
Poskrbimo, da skrijemo() vse prejšnje odprte menije, preden miškin kazalec skoči na naslednjo povezavo:
$(".podpovezave").stop(false, true).hide();
Upoštevajte funkcijo ustavitve, ki nam pomaga prikazati samo en spustni meni, ko se kazalec miške premakne čez različne povezave v meniju. Če te funkcije ne uporabimo, bo vsak spustni meni ostal odprt, dokler kazalca miške popolnoma ne premaknemo stran od menija. To bo povzročilo nekaj prekrivanja, zato se temu izogibajmo. Nato vzamemo trenutno razširjen spustni meni in ga dodelimo spremenljivki:
Podmeni Var = $(this).parent().next();
To se bo zgodilo v kodi HTML:
Ko miškin kazalec premaknemo nad povezavo s spustnim razredom, se z uporabo parent() pomaknemo nazaj in se ustavimo pri “li”, nato pa se z uporabo next() znajdemo na želenem spustnem meniju in “li” bo že s povezavami podrazreda (podpovezave). Na ta način nam jQuery olajša iskanje, kateri spustni meni naj se prikaže, ko z miško premaknemo nad določeno povezavo.
Podmeni.css((
položaj:"absolutno",
zgoraj: $(this).offset().top + $(this).height() + "px",
levo: $(this).offset().left + "px",
zIndeks:1000
});
Koda je zelo pomembna, ker zagotavlja, da je spustni meni prikazan točno pod določeno povezavo. Če je položaj nastavljen na absolutno, lahko element postavimo v katero koli področje naše strani. Nato določimo zgornji položaj lebdenja povezave z uporabo $(this).offset().top (to se nanaša na trenutno lebdeč element menija) in mu dodamo vrednost višine, tako da se meni prikaže natančno pod povezavo. Nekaj podobnega naredimo z levim parametrom. Nato uporabimo z-index, da zagotovimo, da se naš meni prikaže na vrhu drugih elementov.
Submenu.stop().slideDown(300);
Seveda lahko uporabite druge možnosti animacije, kot je fadeIn, animacija z uporabo lastnih slogov itd.
Zdaj se moramo odmakniti od koncepta prikaza spustnega menija in ga skriti. Potrebujemo ta del kode:
Submenu.mouseleave(function())(
$(to).slideUp(300);
});
Za skrivanje spustnega menija uporabljamo slideUp, antonim za slideDown. Ne pozabite, da je podmeni spremenljivka, ki smo jo ustvarili za določitev določenega spustnega menija.
Tako imamo v jQuery privlačen enonivojski spustni meni.
