Samuti, kui olete huvitatud, võite vaadata eelmine viis kasutades artiklis kirjeldatud CSS-i -
Nüüd asja juurde. Nagu eelmises artiklis, kirjutame kõigepealt HTML meie menüü kood. Kood on sama mis selles artiklis, et ei tekiks segadust ja see oleks arusaadavam. Menüü, millel on kaks üksust ja mõlemal on alammenüüd.
Kui teil on selline liin või sarnane, mis on raamatukogu juba varem ühendanud, siis ei tohiks te seda uuesti teha.
Skripti teisel real tähistame oma menüü ID. Kui kasutate nii oma menüüsse, seejärel muutke loomulikult oma nimi. IN sel juhul See - #slow_nav.
Samuti saate kohandada animatsiooni aega. Selles skriptis maksab avamine ja sulgemine 400 millisekundit, mis on 0,4 sekundit. Soovi korral saate selle muuta suuremaks või väiksemaks.
Viimane samm on stiilide lisamine. Need on väga sarnased eelmise artikli stiilidega, ainult et need puuduvad CSS -i omadused animatsioon.
#slow_nav> ul (laius: 500px; veeris: 25px auto 0;) #slow_nav> ul> li (loendi stiil: puudub; kuva: tekstisisene plokk; positsioon: suhteline; polster: 0;) #slow_nav a (tekst- kaunistamine: puudub;) #slow_nav> ul> li> a (fondi suurus: 18px; polster: 5px; taustavärv: # 333; color: #fff;) #slow_nav li ul (positsioon: absoluutne; loendi stiil: pole; text-align: center; top: 15px; font-size: 15px; left: 0; margin: 0; padding: 0; display: none;) #slow_nav li ul li (taustavärv: # 333; ääris- alt: 1px tahke # 888;) #slow_nav li ul li: last-child (border-bottom: none;) #slow_nav li ul li a (polster: 5px 12px; color: #fff; display: block;) #slow_nav li ul li: hõljutamine (taustavärv: # 444;) # aeglane_nav li ul li: esimene laps (veerise ülaosa: 25px; positsioon: suhteline;) #slow_nav li ul: esimene laps: enne (sisu: "" ; asukoht: absoluutne; laius: 1 piksel; kõrgus: 1 piksel; ääris: 5 pikslit tahke läbipaistev; ääris-alumine värv: # 333; vasak: 10 pikslit; ülaosa: -10 pikslit;)
Lisatud ka stiilidele üks uus rida, millega skript töötab õigesti. Elemendi jaoks - #slow_nav li ul vara komplekt kuva: puudub;... Kui te seda ei lisa, on rippmenüü algselt nähtav ja kaob alles pärast kursori selle kohale viimist. Kõik muud stiilid on samad, mis eelmises artiklis.
Nagu eelmist meetodit, saab seda ka rakendada mitte ainult ise kirjutatud menüüdele, vaid ka samadele dünaamilistele menüüdele, mille loovad näiteks sisuhaldussüsteemid WordPress... Selleks on vaja veidi stiile kohandada ja ongi kõik. See tähendab, et te ei pea kasutama esimest HTML-koodi, vaid ainult stiile. Stiilides peate ID #slow_nav nime asendama sellega, mis teil on, ja on võimalik midagi muud üksikasjalikult parandada. Ma ei peatu üksikasjalikumalt. Iga juhtum nõuab personaalset lähenemist, nii et vabandust 🙂
See on kõik, aitäh tähelepanu eest. 🙂
Selles artiklis töötame välja lihtsa rippmenüüst kasutades jQuery. Kõigepealt heitke pilk demofailile. Loodame, et teate vähemalt natuke jQuery ja CSS-i põhitõdesid. Selle rippmenüü loomise peamised aspektid on CSS-i parameetrite rakendamine: positsioon, ülemine, vasak, z-indeks.
Neid valikuid kasutades võime olla kindlad, et meie menüü kuvatakse täpselt selle hõljutatud lingi all ja katab täpselt kõik muud elemendid. Samuti paneme menüü hõljutusel ilmuma ja kaob, kui kursor küljele liigutatakse. Nende sündmuste elluviimiseks kasutame jQuery hiirekeskuse ja hiireklõpsu funktsioone. Ja see on kõik, mida vajame rippmenüü loomiseks!
Lõpptulemuse demofail ja allalaadimislink
HTML-kood
Vaadake rippmenüü HTML-i:
Nagu näete, kasutame siin menüüelementide rakendamiseks järjestamata loendeid. Igale menüülingile on määratud rippmenüü klass ja rippmenüü ise hõlmab alamlinkide klassi. Klasside nimesid kasutab jQuery, et määrata, millist menüüd kuvada.
CSS -kood
Vaadake CSS -koodi:
/ * CSS rippmenüüst Start * /
ul
{
list-style: puudub;
polster: 0px;
veeris: 0px
}
ul li
{
kuva: reas;
ujuk: vasak;
}
ul li a
{
värv: #ffffff;
taust: # 990E00;
paremäär: 5px;
fondi kaal: paks;
fondi suurus: 12px;
font-family: verdana;
teksti kaunistamine: puudub;
kuva: plokk;
laius: 100px;
kõrgus: 25 pikslit;
rea kõrgus: 25 pikslit;
teksti joondamine: keskel;
-veebikomplekt-raadiuse raadius: 5px;
-moz-piiri-raadius: 5px;
ääris: 1px tahke # 560E00;
}
ul li a: hõlju
{
värv: #cccccc;
taust: # 560E00;
fondi kaal: paks;
teksti kaunistamine: puudub;
kuva: plokk;
laius: 100px;
teksti joondamine: keskel;
-veebikomplekt-raadiuse raadius: 5px;
-moz-piiri-raadius: 5px;
ääris: 1 tk tahke # 000000;
}
ul li.lingid a
{
värv: # 000000;
taust: # f6f6f6;
ääris-põhi: 1px tahke #cccccc;
fondi kaal: normaalne;
teksti kaunistamine: puudub;
kuva: plokk;
laius: 100px;
teksti joondamine: keskel;
ülemine äär: 2px;
}
ul li.lülitab a: hõljuma
{
värv: # 000000;
taust: # FFEFC6;
fondi kaal: normaalne;
teksti kaunistamine: puudub;
kuva: plokk;
laius: 100px;
teksti joondamine: keskel;
}
ul li. lingid
{
kuva: puudub;
}
/ * CSS rippmenüü lõppu * /
Enamikku CSS -ist kasutatakse menüüde vormindamiseks (saate anda välimus menüü iseseisvalt), kuid siin on ka mõned olulised punktid:
1 - eemaldage vahekaardid loendistiilis: puudub;
2 - Me teame, et loendid on plokielemendid ja neid kuvatakse alati vertikaalselt. Nende horisontaalseks positsioneerimiseks anname neile parameetri tekstisisese elemendi ja joondame need vasakule järgmise koodiga:
Ekraan: inline;
ujuk: vasak;
3
- Lingid on vaikimisi tekstisisesed elemendid. Teisendame need blokeerivateks elementideks, kasutades display: block (et saaksime neile nüüd laiuse väärtuse anda).
4 - Peidame kogu menüü:
Ul li.alalinke
{
kuva: puudub;
}
jQuery
Kujutage ette vanu aegu, mil rippmenüüd rakendati jämedalt javascripti kood ja oli vaja hunnikut tarbetut koodi. Kuid täna on meil vaja ainult jQuery:
$ (funktsioon () (
Alammenüü.css ((
positsioon: "absoluutne",
zindeks: 1000
});
Alammenüü.stop (). SlideDown (300);
$ (see) .slideUp (300);
});
});
});
Väga huvitav ja lihtne asi. Selgitage teile, kuidas see töötab. Alustuseks ja nagu tavaliselt, mähkime oma koodi jQuery kontrollerisse:
$ (funktsioon () (
...
});
Meie kood aktiveeritakse, kui hiirekursor hõljub (hiirekeskuse funktsioon) elemendi kohal, millele on määratud rippmenüüklass ($ (". Rippmenüü")). Meie puhul on see link menüüs:
$ (funktsioon () (
$ (". rippmenüü"). mouseenter (function () (
........
});
});
Veenduge, et peidame () kõik varem avatud menüüd, enne kui hiir järgmisele lingile hüppab:
$ (". alamlingid"). stop (false, true) .hide ();
Pöörake tähelepanu peatamisfunktsioonile, mis aitab meil kuvada korraga ainult ühte rippmenüüd, kui hiirekursor liigub üle menüü erinevate linkide. Kui me seda funktsiooni ei kasuta, jääb iga rippmenüü avatuks hetkeni, mil liigutame hiire kursori menüüst täielikult eemale. See tekitab teatud kattuvust, seega peaksime seda vältima. Seejärel võtame praegu laiendatud rippmenüü ja määrame muutuja:
Var alammenüü = $ (see) .vanem (). Järgmine ();
See on HTML -koodis järgmine:
Kui hiirekursor hõljub rippmenüü klassiga lingi kohal, liigume vanema () abil tagasi ja peatume "li" juures ning seejärel kasutades järgmist (), leiame end soovitud rippmenüüst ja "li" juba olema koos alamlingidega (alamlingid). Seega on jQuery abil meil lihtsam teada saada, millist rippmenüüd kuvada, kui hiir on kindla lingi kohal.
Alammenüü.css ((
positsioon: "absoluutne",
üles: $ (this) .offset (). top + $ (this) .height () + "px",
vasakul: $ (this) .offset (). left + "px",
zIndex: 1000
});
Kood on väga oluline, kuna see tagab rippmenüü kuvamise täpselt määratud lingi all. Kui positsioon on seatud absoluutseks, saame elemendi paigutada ükskõik kuhu meie lehel. Järgmisena määratleme lingi ülemine positsioon, mille kohal kursor kursoriga $ (this) .offset () asub. Ülemine (see viitab praegusele menüüelemendile, mille kohal kursor hõljub) ja lisame sellele kõrguse väärtuse nii et menüü kuvatakse täpselt lingi all. Tehke vasakpoolse parameetriga midagi sarnast. Seejärel kasutame z-indeksit veendumaks, et meie menüü kuvatakse ülejäänud elementide kohal.
Alammenüü.stop (). SlideDown (300);
Loomulikult saate kasutada muid animatsioonivalikuid, nagu fadeIn, oma stiilidega animatsioon jne.
Nüüd peame hajutama rippmenüü kuvamise kontseptsiooni ja selle peitma. Vajame järgmist koodijuppi:
Alammenüü.mouseleave (function () {
$ (see) .slideUp (300);
});
Rippmenüü peitmiseks kasutame slideUp-i, mis on slideDowni vastand. Pidage meeles, et alammenüü on muutuja, mille lõime konkreetse rippmenüü määratlemiseks.
Seega on meil atraktiivne õdede-vendade valik menüü jQuery.
JQuery vertikaalse rippmenüü kujul koos alamkategooriate rippmenüüga navigeerimiseks tuleb mõista selle mehhanismi tööpõhimõtet. Kõigepealt vaatame aga navigeerimisstruktuuri:
Navigeerimine
Nagu arvate, on meie rippmenüü koostatud täpploendite ümber. Sildi kohal hõljutamisel
- test 1
- test 2
- test 3
- test 4
Aga kuidas, küsite? Jah, kõik on tegelikult väga lihtne. Kõigepealt vaatame meie nav-loendi stiililehte, mis näeb välja selline:
Keha (taust: rgb (244, 244, 244); fondipere: Verdana; fondi kaal: 100;) / * --- navigeerimine --- * / #menüü (laius: 200px; veeris: 0; polster: 2px;) #menu li (list-style-type: none;) .menüü (positsioon: suhteline; taust: šokolaad; taust: -moz-lineaarne gradient (ülemine, rgb (198, 255, 242), # 2AC4B3) ; taust: -webkit-lineaarne gradient (ülemine, rgb (198, 255, 242), # 2AC4B3); taust: -o-lineaarne gradient (ülemine, rgb (198, 255, 242), # 2AC4B3); ääris : 1px tahke # 2AC4B3;). Menüü: hõljutage kursorit (taust: # 00c; taust: -moz-linear-gradient (ülemine, rgb (230, 230, 230), # 0CBFAB); taust: -webkit-linear-gradient ( ülemine, rgb (230, 230, 230), # 0CBFAB); taust: -o-lineaarne-gradient (ülemine, rgb (230, 230, 230), # 0CBFAB);). menüü vahemik (laius: 11px; kõrgus: 11px; kuva: plokk; positsioon: absoluutne; ülemine: 8px; paremal: 10px; kursor: kursor;). Menüü ul (laius: 150px; marginaal: 0; polsterdus: 1px; asukoht: absoluutne; ülemine: -1px; vasak: 198px;). Menüü ul li (taust: šokolaad; taust: -moz-lineaarne gradient (ülemine, rgb (198, 255, 242), # 2AC4B3); taust: -webkit-lineaarne gradient (ülemine, rgb (198, 255, 242), # 2AC4B3); taust: -o-lineaarne gradient (ülemine, rgb (198, 255, 242), # 2AC4B3); ääris: 1 tk tahke #fff; ). menüü ul li: hõlju (taust: # 00c; taust: -moz-linear-gradient (ülemine, rgb (230, 230, 230), # 0CBFAB); taust: -webkit-linear-gradient (top, rgb ( Taust: -o-lineaarne gradient (ülemine, rgb (230, 230, 230), # 0CBFAB);). Menüü a (polster: 5px; kuva: plokk; text- kaunistamine: puudub; värv: valge;). menüü a: hõljutage (värv: valge;) / * --- END --- * /
Stiililehelt näete, et rippmenüü pole esialgu peidetud, kuid parandame selle punkti järgmiselt.
$ (document) .ready (function () ($ (". menu ul"). hide (); $ (". menu span"). css ("background", "url (" down.png ")") ; $ ("# menu li"). hõljutage kursorit (funktsioon () ($ (this) .lapsed ("ul"). show (); / * Samaväärne väärtusega $ ("ul", see) .show (); * / $ (this) .find ("span"). css ("background", "url (" right.png ")"); / * Samaväärne $ ("span", see) .css ("taust", "url (" right.png ")"); * /), function () ($ (this) .lapsed ("ul"). hide (); / * Samaväärne $ ("ul", see) .peida (); * / $ (this) .find ("span"). css ("background", "url (" down.png ")"); / * $ ("span", this) .css ("background" "," url ("down.png") "); * /))))
Nüüd vaatame lähemalt rippmenüü jQuery koodi, sest võib-olla pole see kellelegi päris selge. Alguses kirjeldatakse järgmist konstruktsiooni:
$ (dokument). juba (function () ())
See sisaldab käske, mis tuleb täita pärast lehe täielikku laadimist. Seda tehakse nii, et igasuguseid vigu ei ilmneks, kui ühtegi objekti on võimatu leida põhjusel, et seda pole veel tühiselt laaditud.
$ (". menu ul"). peida ();
Mida see kirje tähendab? "$ ()" Konstruktsioon võimaldab teil üksusi valida. Seetõttu peame kohe alguses oma rippmenüü varjama. Võtame "$ ()" konstruktsiooni ja kirjutame sellele huvipakkuva objekti. Meie puhul see objekt saab olema täppidega loend klassi "menüüga". Järgmisena kirjutame meetodi "peida ()", mis võimaldab meil huvipakkuvat objekti peita.
$ (". menu span"). css ("background", "url (" down.png ")");
Mida ta teeb? Ta otsib silti vanemelement millele on määratud klass "menüü" ja kasutades meetodit "css (" background "," url ("down.png") ")", omistatakse stiili "background" atribuudile väärtus "url (" down .png ")". "down.png" on ikoon, mis näitab, et loendit saab laiendada.
Siis tuleb ehitus, mis laiendab meie nimekirja, see näeb välja selline:
$ ("# menu li"). hõljutage kursorit (function () ($ (this) .children ("ul"). show (); $ (this) .find ("span"). css ("background", " url ("right.png") ");), function () ($ (this) .lapsed (" ul "). hide (); $ (this) .find (" span "). css (" background ") , "url (" down.png ")");)
Otsime silti, mille vanemelemendile on määratud id = "menu." Järgmisena tuleb meetod "hover" ja kaks sulgudes olevat funktsiooni. Esimene funktsioon täidetakse siis, kui hiirekursor hõljub, ja teine, kui hiirekursor lahkub huvipakkuvast elemendist.
Esimene funktsioon ütleb:
$ (see) .lapsed ("ul"). show (); $ (this) .find ("span"). css ("background", "url (" right.png ")");
Ehitus "$ (see)" tähendab, et oleme huvitatud elemendist, milles oleme Sel hetkel hõljus (see inglise keelest see). Ja hõljusime sildi kohal
Pärast seda otsime sildi järglasi, nimelt: silt ja muudame selle tausta teiseks ikooniks.
Pärast seda kirjutatakse funktsioon, mis teeb kõik, nagu algselt, pärast hiirekursori lahkumist loendiüksusest:
Funktsioon () ($ (this) .lapsed ("ul"). Peida (); $ (this) .find ("span"). Css ("background", "url (" down.png ")"); )
Kirjaliku jQuery-koodi töötamiseks ja meie rippmenüü õigeks toimimiseks peate teegi jquery.com veebisaidilt alla laadima ja ühendama, kirjutades selle pärast avamärgendit
string.See selleks! Kokkuvõtteks tahan märkida, et kui teie sait on üsna kaalukas, siis võib-olla käivitatakse skript liiga hilja (saidi laadimine võtab kaua aega) ja kasutajad näevad, kuidas see kõigepealt täielikult avaneb ja alles siis peidab , mis, näete, on väga kole. Seetõttu on selle konstruktsiooni jaoks vaja teisaldada kõik jQuery käsud: "$ (document) .ready (function () ())". See näeb välja selline:
$ (dokument). valmis (function () ()) $ (". menüü ul"). hide (); $ (". menu span"). css ("background", "url (" down.png ")"); $ ("# menu li"). hõljutage kursorit (function () ($ (this) .children ("ul"). show (); $ (this) .find ("span"). css ("background", " url ("right.png") ");), function () ($ (this) .lapsed (" ul "). hide (); $ (this) .find (" span "). css (" background ") , "url (" down.png ")");))
Meie skripti ühendamine tuleb sildilt üle kanda
lõpuni, enne lõpumärgendit või saate skripti lisada kohe täppide loendi järel.(Allalaadimised: 314)
Klassikalise jQuery abil on sellel teemal kirjutatud palju artikleid. Proovisin ülesannet veidi keerulisemaks muuta, lisades saidil navigeerimise ajal võimaluse hoida menüüosad avatuna (või suletuna, sõltuvalt kasutaja valikust).
Selle probleemi lahendamiseks otsustasin kasutada jQuery Cookie pistikprogrammi. Selle pistikprogrammi eeliseks on see, et toiming viiakse läbi kliendi poolel, mis omakorda vähendab serveri koormust. Miinus - kui kasutajal on JS keelatud, siis pistikprogramm ei tööta. Aga seda võimalust Ma ei arva, sellest ajast peale kaob rippmenüü kogu tähendus üldse. Alustame siis.
Esiteks peame ühendama jQuery raamistiku ise ja jQuery Cookie pistikprogrammi:
Kood: HTML
Järgmine on märgistus. See näeb välja nagu lihtne nimekiri, mitte midagi üleloomulikku. Ainus asi, mida tuleb märkida, on see sildis
seal peaks olema pealkiri, kui klõpsate, millal menüü välja langeb:
Kood: HTML
Ja nii edasi lõpmatult. Nüüd tuleb lõbus osa. Lisan koodi mõned kommentaarid, et see oleks umbes selge, chopach
Kood: JS
$ (dokument) .ready (funktsioon () (
if ($. küpsis ("num_open_ul"))) (// kontrollitud, kas küpsistes on kirje
if ($. küpsis ("num_open_ul")! = 0) (// ja see kirje pole võrdne 0-ga
var number_eq = parseInt ($. küpsis ("num_open_ul") - 1);
$ (". navigation_body"). eq (number_eq) .show (). prevAll ("# navigation h2.navigation_head: first"). addClass ("active_navigation");
}
};
$ ("# navigation h2.navigation_head"). klõpsake (function () (// kui see klõpsatakse, käivitatakse see funktsioon
kui (! $ (this) .next (). on (": nähtav")) (
$ ("div.navigation_body"). õed-vennad ("div.navigation_body"). slideUp (500); // kui teised on avatud, sulgege kõik, välja arvatud praegune
}
$ (this) .next ("div.navigation_body"). slideToggle (500) .siblings ("div.navigation_body"). slideUp (500);
$ (this) .toggleClass ("active_navigation"). õed -vennad ("# navigation h2.navigation_head"). removeClass ("active_navigation"); // lisas stiili muutmiseks avalikkuse ette klassi
setTimeout (fncookie, 600); // küpsistele ise kirjutamine viivitusega, nii et skriptil oleks enne salvestamist aega töö lõpetada (500 ms - kiirus, viivitus - 600 ms)
});
function fncookie () (// kirjutamisfunktsioon ise
var number_open_ul = 0;
var i = 0;
$ ("div.navigation_body"). each (function () (
i ++;
kui ($ (this) .is (": nähtav")) {
number_avatud_ul = i;
}
$ .cookie ("num_open_ul", number_open_ul, (aegub: 3, tee: "/")); // hoidke kogu saidi jaoks 3 päeva.
});
}
});
See tähendab, et nüüd, kui kasutaja avas menüü, lahkus saidilt ja läks sinna paari päeva pärast uuesti, jääb menüü tema jaoks endiselt avatuks.
Ja lõpuks on meil jäänud väike puudutus: tegelikult css- stiilid... Teete seda oma maitse järgi, minu toodud näites valmis kujundusühest projektist
Kood: CSS
#navigation (
veerised: 80 pikslit automaatne;
laius: 250 pikslit;
}
#navigation h2, #navigation h2.navigation_head (
fondi suurus: 18 pikslit;
font-weight: julgem;
taustavärv: # ffb6c1;
taustapilt: -webkit-gradient (lineaarne, 50% 0,50% 100%, värvipeatus (0%, # ffe9e9), värvipeatus (100%, # ffb6c1));
taustapilt: -webkit-lineaarne gradient (# ffe9e9, # ffb6c1);
taustapilt: -moz-lineaarne gradient ( # ffe9e9, # ffb6c1);
taustapilt: -o-lineaarne gradient (# ffe9e9, # ffb6c1);
taustapilt: lineaarne gradient (# ffe9e9, # ffb6c1);
polster: 5px 3px 6px 3px;
varu: auto;
positsioon: sugulane;
}
#navigation h2.navigation_head: after (
positsioon: absoluutne;
paremal: 5px;
värv: # 550000;
sisu: "cssb";
}
#navigation h2: hõlju, #navigation h2.navigation_head: hõlju (
kursor: osuti;
}
.aktiivne_navigatsioon (
taustapilt: -webkit-gradient (lineaarne, 50% 0,50% 100%, värvipeatus (0%, # ffb6c1), värvipeatus (100%, # ffe9e9))! oluline;
taustapilt: -webkit-linear-gradient (# ffb6c1, # ffe9e9)! oluline;
taustapilt: -moz-lineaarne gradient ( # ffb6c1, # ffe9e9)! oluline;
taustapilt: -o-lineaarne gradient (# ffb6c1, # ffe9e9)! oluline;
taustapilt: lineaarne gradient ( # ffb6c1, # ffe9e9)! oluline;
}
.active_navigation: pärast (
positsioon: absoluutne;
paremal: 5px;
sisu: "cssd"! oluline;
}
.navigation_body (
kuva: puudub;
}
#navigation ul (
varu: 0;
polster: 0;
list-style-type: puudub;
}
* html #navigation ul li (
kõrgus: 1%;
}
#navigation div.navigation_body ul li (
veeris-vasak: 10 pikslit;
}
#navigation a (
font-family: "Times New Roman";
kuva: plokk;
värv: # 918871;
polster: 3px;
taustavärv: # ffe3e0;
ääris-põhi: 1px tahke #fff;
teksti kaunistamine: puudub;
}
#navigation a: hõljutage (
värv: # 585858;
taustavärv: # ffb6cc;
}
Kui keegi märkas, proovisin siin kasutada sisu: +/- kinnisvara suletuna / avatud menüü, kuid saate lisada pildi või muu kujunduse. Näete näite selle kohta, mida me siin saime.
Nagu alati, olen valmis küsimusi kuulama ja neile proovima vastata. Kõike paremat, kõike paremat.
Selles õpetuses näitame teile, kuidas saidi veelgi lihtsamaks navigeerimiseks luua külgmine rippmenüü. See menüü on kaasaegse veebidisaini populaarne trend. Paljud saidid kasutavad seda tüüpi menüüd. Selle abiga saate vabaneda projekti lehtede kaosest, muuta see loetavamaks, suunates kasutajate tähelepanu põhisisule.
See on suurepärane võimalus minimalismi saavutamiseks ilma tähelepanu kõrvale juhtimata. Täna koostame sellise menüü ise.
Navigeerimismenüü loomiseks vaatame kõigepealt seadeid:
Kõigepealt peate laadima Normalize.css ja seadistama brauseri vaikestiilid veendumaks, et menüü näeb kõigis brauserites ühesugune. Alamüksustega menüüpunktide ees noole kuvamiseks kasutame FontAwesome'i. Menüüs klasside vahetamiseks laadige jQuery ja teisaldage kogu kohandatud jQuery kood kausta script.js. Viimane link on veebiprojekti peamine tabel.
Hamburgeri ikoon
Hamburgeriikoon on tavaline saidi navigeerimise atribuut. See luuakse sageli ikoonifondi, näiteks FontAwesome abil, kuid selles õpetuses lisame animatsiooni, et luua see nullist. Meie hamburgeriikoon on võrdlusmärgis, mis sisaldab kolme klassi jaotust, mis kuvatakse horisontaalsete ribadena.
Stiilid näevad välja sellised:
Lülitusnupp (asend: fikseeritud; laius: 44 pikslit; kõrgus: 40 pikslit; polster: 4 pikslit; üleminek: .25s; z-indeks: 15;). Lülitusnupp: hõljutamine (kursor: osuti;). Lülitusnupp .menüü -riba (asukoht: absoluutne; piiri raadius: 2 pikslit; laius: 80%; üleminek: .5 s;). lülitusnupp .menüü-riba ülaosa (ääris: 4 pikslit tahke # 555; ääris-alumine: puudub; ülaosa: 0;) .lülitusnupp .menüü-riba-keskosa (kõrgus: 4px; taustavärv: # 555; margin-top: 7px; margin-bottom: 7px; top: 4px;). Lülitusnupp .menüü-riba -alumine (ääris: 4px tahke # 555; ääris-ülaosa: puudub; ülaosa: 22px;). nupp-avatud .menüü-riba ülaosa (teisendamine: pööramine (45 kraadi) tõlkimine (8px, 8px); üleminek: .5s; ) .nupp-ava .menüü-riba-keskosa (muundamine: tõlkimine (230px); üleminek: .1s hõlbustus; läbipaistmatus: 0;) .nupp-avamine .menüü-riba-põhi (muundamine: pööramine (-45deg) tõlkima (8px, -7px); üleminek: .5s;)
Ikoonil on kindel asukoht ja see ei muutu lehe kerimisel. Samuti on z-indeks 15, mis tähendab, et see on alati teiste elementide peal. Koosneb kolmest ribast, millest kumbki jagab teisi stiile. Seetõttu liigutame iga riba .menu-bar klassi. Teisaldage ülejäänud stiilid eraldi klassid... Maagia juhtub siis, kui lisame avalikule span-sildile veel ühe klassi. Lisame selle koos kasutades jQuery järgmisel viisil:
$ (document) .ready (function () (var $ toggleButton = $ (". toggle-button"); $ toggleButton.on ("click", function () ($ (this) .toggleClass ("button-open") );));));
Neile, kes pole jQueryga tuttavad, lähtestame muutuja $ toggleButton abil, mis sisaldab meie ikooni. Salvestame selle tarbetult muutujasse kasutades JavaScripti... Seejärel loome sündmuste kuulaja, mis võtab arvesse ikoonil tehtud klikke. Iga kord, kui kasutaja klõpsab hamburgeriikoonil, käivitab sündmuste kuulaja funktsiooni toggleClass (), mis vahetab klassi .button-open.
Kui on lisatud .button-open klass, saame seda kasutada elementide kuvamisviisi muutmiseks. Kasutame funktsioone CSS3 translate () ja rotate (), et ülemised ja alumised triibud pöörleksid 45 kraadi ning keskmine triip liiguks paremale ja kaoks. Siin on animatsioon, mida saate kohandada:
Rippmenüü navigeerimismenüü
Nüüd, kui teil on hamburgeriikoon, teeme selle kasulikuks ja loome sellele klõpsates rippmenüü. Menüü märgistus näeb välja selline:
Me ei hakka selle menüü iga stiili kohta üksikasjalikumalt rääkima, vaid keskendume vähestele olulised punktid... Esiteks on see div ja .menüü-wrap klass. Heitke pilk tema stiilidele:
Menüü mähis (taustavärv: # 6968AB; asend: fikseeritud; ülemine: 0; kõrgus: 100%; laius: 280 pikslit; vasakpoolne veerus: -280 pikslit; fondi suurus: 1em; fondi kaal: 700; ülevool: automaatne ; üleminek: .25s; z-indeks: 10;)
Positsioon on fikseeritud, nii et lehte kerides jääb menüü alati ühte positsiooni. 100% kõrgus võimaldab menüül kogu lehe vertikaalse ruumi hõivata. Pange tähele, et vasakule veerisele on seatud negatiivne arv, mis võrdub menüü laiusega. See tähendab, et menüü kaob vaateavast. Selle uuesti nähtavaks tegemiseks loome jQuery abil veel ühe toggleri klassi. Meie JavaScripti fail näeb välja selline:
$ (dokument) .ready (function () (var $ toggleButton = $ (". toggle-button"), $ menuWrap = $ (". menu-wrap"); $ toggleButton.on ("click", function () ($ (this) .toggleClass ("button-open"); $ menuWrap.toggleClass ("menu-show");));));
Lisage veel üks muutuja $ menuWrap, mis sisaldab menüüümbrist. Kasutage sama sündmuste käitlejat, mille lõime varem. Ainult seekord vahetame kahte klassi: üks nupu ja teine menüü kest. .Menu-show klassi vasak serv on 0, see lisab varju efekti.
Menüü-saade (veeris vasakul: 0; kastivari: 4px 2px 15px 1px # B9ADAD;)
Alammenüüd ja lingid
Võite märgata, et ühel loendiüksustel on klass .menu-item-has-children, mis sisaldab alammenüüd. Lisaks asub vahetult lingi all span-silt klassiga .sidebar-menu-arrow.
spanil on pseudo-elemendi järel :: ja see sisaldab FontAwesome noolt. Vaikimisi on alammenüü peidetud ja nähtav ainult siis, kui klõpsate noolel. JQuery abil saame seda teha järgmiselt.
$ (dokument) .ready (function () (var $ sidebarArrow = $ (". sidebar-menu-arrow"); $ sidebarArrow.click (function () ($ (this) .next (). slideToggle (300); ));));
Noolele klõpsates kutsume funktsiooni, mis omakorda suunab järgmise elemendi kohe pärast ulatust (meie puhul on see alammenüü) ja muudab selle nähtavaks. Funktsioon, mida me kasutame, on slideToggle. See paneb elemendi ilmuma ja kaduma. Meie näite funktsioonil on üks parameeter - animatsiooni kestus.
Näites toodud menüüelementidel on hõljumisefekt. Selle loomiseks kasutatakse :: after pseudo-elementi. Kood näeb välja selline:
Menüü külgriba li> a :: after (sisu: ""; kuva: plokk; kõrgus: 0,15em; positsioon: absoluutne; ülemine: 100%; laius: 102%; vasakul: 50%; muundamine: tõlkimine (-50%) ); taustapilt: lineaarne gradient (paremale, läbipaistev 50,3%, # FFFA3B 50,3%); üleminek: taustaasendi .2s .1s hõlbustus; tausta suurus: 200% automaatne;). menüü-külgriba li > a: hõljutage :: pärast (taustaasend: -100% 0;)
Pseudoelement :: pärast sisaldab iga lingi allosas plokitaseme elementi täislaiuse ja kõrgusega 0,15 em. See kõik näeb välja nagu joon. Eripäraks on see, et me ei rakenda joonele ainult taustavärvi, vaid kasutame taustpildil funktsiooni lineaarne gradient (). Kuigi see funktsioon on mõeldud värvigradientide loomiseks, saame värvi muuta, määrates soovitud protsendid.
Menüü külgriba li> a :: after (taustpilt: lineaarne gradient (paremale, läbipaistev 50,3%, # FFFA3B 50,3%);)
Pool joont on läbipaistev ja teine pool kollane. Tehes tausta suuruseks 200%, kahekordistame oma kasti laiuse. Nüüd võtab läbipaistev osa kogu lingi laiuse ja kollane osa liigub vasakule ja muutub nähtamatuks. Muudame hõljumise taustapositsiooni -100%. Kollane osa on nüüd nähtav ja läbipaistev osa on peidetud.
Läbipaistva osa asemel võite kasutada mis tahes muud värvi. Võite katsetada ka gradientidega.
Kõik elemendid, mida oleme kaalunud, töötavad tervikuna. Sellise menüü saate luua mis tahes saidi kujundusega TemplateMonsteri kogust. Nagu näete, on selle tegemine lihtsam kui võite arvata. Edu professionaalsete ja kasutajasõbralike veebisaitide loomisel!
