Duke përdorur JQuery klasike, janë shkruar shumë artikuj mbi këtë temë. Unë u përpoqa ta komplikoj pak detyrën duke shtuar mundësinë për të lënë seksionet e menusë të hapura (ose të mbyllura, në varësi të zgjedhjes së përdoruesit) gjatë lëvizjes nëpër faqe.
Për të zgjidhur këtë problem, vendosa të përdor shtojcën JQuery Cookie. Avantazhi i kësaj shtojce është se operacioni kryhet në anën e klientit, i cili, nga ana tjetër, zvogëlon ngarkesën në server. Minus - nëse përdoruesi ka JS të çaktivizuar, shtojca nuk do të funksionojë. Por unë nuk e konsideroj këtë opsion, që atëherë e gjithë pika e menusë rënëse zhduket. Pra, le të fillojmë.
Së pari, ne duhet të lidhim vetë kornizën JQuery dhe shtojcën JQuery Cookie:
Kodi: HTML
Tjetra është shënimi. Do të duket si një listë e thjeshtë, asgjë e mbinatyrshme. E vetmja gjë që do të vërej është se etiketa duhet të përmbajë një titull, kur klikoni mbi të një menu do të bjerë poshtë:
Kodi: HTML
Titulli i parë
- Lidhja e parë
- Lidhja e dytë
- Lidhja e tretë
Titulli i dytë
- Lidhja e parë
- Lidhja e dytë
- Lidhja e tretë
Titulli i tretë
- Lidhja e parë
- Lidhja e dytë
- Lidhja e tretë
Titulli i katërt
- Lidhja e parë
- Lidhja e dytë
- Lidhja e tretë
Epo, dhe kështu me radhë ad infinitum. Tani vjen pjesa më interesante. Do të shtoj disa komente në kod në mënyrë që të jetë afërsisht e qartë.
Kodi: JS
$(dokument).ready(funksion())(
if($.cookie("num_open_ul"))( // kontrolluar nëse ka një hyrje në cookies
if($.cookie("num_open_ul") != 0)( // dhe kjo hyrje nuk është e barabartë me 0
var numer_eq = parseInt($.cookie("num_i_hapur_ul")-1);
$(".navigation_body").eq(numri_eq).show().prevAll("#navigation h2.navigation_head:first").addClass("navigacion_aktiv");
}
};
$("#navigation h2.navigation_head").click(function())( // kur të klikohet, ky funksion do të funksionojë
if(!$(this).next().is(":visible"))(
$("div.navigacion_trupi").mollezërit ("div.navigacion_trupi").slideUp(500); // nëse të tjerët janë të hapur, mbyllni gjithçka përveç asaj aktuale
}
$(this).next("div.navigation_body").slideToggle(500).siblings("div.navigation_body").slideUp(500);
$(this).toggleClass("navigimi_aktive").siblings ("#navigimi h2.navigimi_head").removeClass("navigimi_aktive"); // Një klasë iu shtua asaj të hapur për të ndryshuar stilin
setTimeout (fncookie, 600); //vetë regjistrimi në cookie me vonesë, në mënyrë që skripti të ketë kohë për të përfunduar punën e tij përpara regjistrimit (500 ms - shpejtësi, vonesë - 600 ms)
});
funksioni fncookie())( // vetë funksioni i regjistrimit
var numri_hapur_ul = 0;
var i = 0;
$("div.navigation_body").each(function())(
i++;
if($(this).is(":dukshem"))(
numri_hapur_ul = i;
}
$.cookie("num_open_ul", numri_open_ul, (skadon:3, rruga:"/")); // ruajeni për 3 ditë për të gjithë faqen.
});
}
});
Kjo do të thotë, tani, nëse përdoruesi hapi menunë, u largua nga faqja dhe u kthye përsëri në të disa ditë më vonë, menyja do të mbetet ende e hapur për të.
Dhe së fundi, na mbetet një prekje e vogël: në fakt, stilet css. Mund ta bëni sipas shijes tuaj, në shembullin që mora një dizajn të gatshëm nga një prej projekteve
Kodi: CSS
#navigacion (
diferenca: 80px automatike;
gjerësia: 250 px;
}
#navigation h2, #navigation h2.navigation_head (
madhësia e shkronjave: 18 px;
pesha e shkronjave: më e theksuar;
ngjyra e sfondit: #ffb6c1;
background-image: -webkit-gradient(linear,50% 0.50% 100%,color-stop(0%,#ffe9e9),color-stop(100%,#ffb6c1));
background-image: -webkit-linear-gradient(#ffe9e9,#ffb6c1);
sfond-imazh: -moz-linear-gradient(#ffe9e9,#ffb6c1);
background-image: -o-linear-gradient(#ffe9e9,#ffb6c1);
sfond-imazh: linear-gradient(#ffe9e9,#ffb6c1);
mbushje: 5px 3px 6px 3px;
diferencë: auto;
pozicioni: i afërm;
}
#navigation h2.navigation_head:after (
pozicioni: absolut;
djathtas: 5px;
ngjyra: #550000;
përmbajtja: "cssb";
}
#navigation h2:hover, #navigation h2.navigation_head:hover (
kursori: treguesi;
}
.navigacion_aktive(
background-image: -webkit-gradient(linear,50% 0.50% 100%,color-stop(0%,#ffb6c1),color-stop(100%,#ffe9e9)) !i rëndësishëm;
background-image: -webkit-linear-gradient(#ffb6c1,#ffe9e9) !i rëndësishëm;
background-image: -moz-linear-gradient(#ffb6c1,#ffe9e9) !i rëndësishëm;
background-image: -o-linear-gradient(#ffb6c1,#ffe9e9) !i rëndësishëm;
background-image: linear-gradient(#ffb6c1,#ffe9e9) !i rëndësishëm;
}
.active_navigation:pas (
pozicioni: absolut;
djathtas: 5px;
përmbajtja: "cssd" !i rëndësishëm;
}
.navigation_body(
shfaqja: asnjë;
}
#navigacion ul (
diferenca: 0;
mbushje: 0;
list-style-type: asnjë;
}
* html #navigacion ul li(
lartësia: 1%;
}
#navigacion div.navigation_body ul li (
margjina-majtas: 10px;
}
#navigacion a (
font-familja: "Times New Roman";
shfaqja: bllok;
ngjyra: #918871;
mbushje: 3 px;
ngjyra e sfondit: #ffe3e0;
kufiri-fund: 1px solid #fff;
tekst-dekorim: asnjë;
}
#navigacion a:hover (
ngjyra: #585858;
ngjyra e sfondit: #ffb6cc;
}
Nëse dikush e vuri re, këtu u përpoqa të përdor përmbajtjen: +/- veçori kur menyja është e mbyllur/hapur, por ju mund të shtoni një imazh ose ndonjë strukturë tjetër. Ju mund të shihni një shembull të asaj që kemi dalë këtu
Si gjithmonë, jam gati të dëgjoj pyetjet dhe të përpiqem t'u përgjigjem atyre. Të gjitha të mirat, të gjitha të mirat.
Në këtë artikull ne do të zhvillojmë një menu të thjeshtë rënëse duke përdorur jQuery. Së pari, hidhini një sy skedarit demo. Shpresojmë të dini të paktën pak jQuery dhe CSS. Aspektet kryesore të krijimit të kësaj menyje rënëse janë aplikimi i parametrave CSS: pozicioni, lart, majtas, z-indeksi.
Duke përdorur këto parametra, ne mund të jemi të sigurt se menyja jonë do të shfaqet saktësisht poshtë lidhjes që është vendosur mbi të dhe do të mbulojë me saktësi të gjithë elementët e tjerë. Ne gjithashtu do të bëjmë që menyja të shfaqet në lëvizje dhe të zhduket kur kursori të largohet. Për të zbatuar këto ngjarje, ne do të përdorim funksionet jQuery: mouseenter dhe mouseeleave. Dhe kjo është e gjitha që na duhet për të krijuar një menu dropdown!
Skedari demonstrues i rezultatit përfundimtar dhe lidhjes së shkarkimit
Kodi HTML
Shikoni kodin HTML për menunë rënëse:
Siç mund ta shihni, këtu do të përdorim lista të pa renditura për të zbatuar artikujt e menysë. Secilës lidhje të menysë i caktohet një klasë e menusë rënëse dhe vetë menyja rënëse mbulohet nga një klasë nënlidhjeje. Emrat e klasave do të përdoren nga jQuery për të përcaktuar se cila meny të shfaqet.
Kodi CSS
Shikoni kodin CSS:
/* CSS për menynë rënëse Fillimi */
ul
{
list-style:asnjë;
mbushje: 0 px;
margjina: 0 px
}
ulli
{
shfaqja: inline;
float:majtas;
}
ulli a
{
ngjyra:#ffffff;
sfond:#990E00;
margin-djathtas: 5px;
font-pesha: bold;
madhësia e shkronjave: 12 px;
font-familja:verdana;
tekst-dekorim:asnjë;
shfaqja:blloku;
gjerësia: 100 px;
lartësia: 25 px;
lartësia e vijës: 25 px;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
kufiri: 1px solid #560E00;
}
ul li a:hover
{
ngjyra:#cccccc;
sfond:#560E00;
font-pesha: bold;
tekst-dekorim:asnjë;
shfaqja:blloku;
gjerësia: 100 px;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
kufiri: 1px solid #000000;
}
ul li.nënlidhjet a
{
ngjyra:#000000;
sfond:#f6f6f6;
border-bottom:1px solid #cccccc;
pesha e shkronjave:normale;
tekst-dekorim:asnjë;
shfaqja:blloku;
gjerësia: 100 px;
text-align:center;
margin-lart:2px;
}
ul li.nënlidhjet a:hover
{
ngjyra:#000000;
sfond:#FFEFC6;
pesha e shkronjave:normale;
tekst-dekorim:asnjë;
shfaqja:blloku;
gjerësia: 100 px;
text-align:center;
}
ul li.nënlidhjet
{
shfaqja: asnjë;
}
/* CSS Për Fundin e menysë Dropdown */
Pjesa më e madhe e kodit CSS përdoret për të formatuar menynë (mund ta personalizoni pamjen e menysë si të dëshironi), por ka edhe disa pika të rëndësishme këtu:
1 – Heqja e skedave duke përdorur stilin e listës: asnjë;
2 – Ne e dimë se listat janë elemente blloku dhe shfaqen gjithmonë në rend vertikal. Për t'i vendosur ato horizontalisht, ne u japim parametrin e elementeve të linjës dhe i rreshtojmë ato në të majtë duke përdorur kodin:
shfaqja: inline;
float:majtas;
3 – Si parazgjedhje, lidhjet janë elementë të linjës. Ne i konvertojmë ato në elemente blloku duke përdorur display:block (kështu që tani mund t'u japim atyre një vlerë të gjerësisë).
4 – Fshehja e të gjithë menusë duke përdorur:
Ul li.nënlidhjet
{
shfaqja: asnjë;
}
jQuery
Imagjinoni ditët e vjetra kur menytë rënëse zbatoheshin duke përdorur kodin e papërpunuar javascript dhe shumë kode të panevojshme. Por sot gjithçka që na nevojitet është jQuery:
$(funksion())(
Nënmenu.css((
pozicioni: "absolut",
zIndeksi: 1000
});
Nënmenu.stop().slideDown(300);
$(kjo).slideUp(300);
});
});
});
Një gjë shumë interesante dhe e thjeshtë. Le t'ju shpjegojmë se si funksionon. Për të filluar, dhe si zakonisht, ne e mbështjellim kodin tonë në një kontrollues jQuery:
$(funksion())(
...
});
Kodi ynë aktivizohet kur kursori i miut është i vendosur (funksioni i futjes së miut) mbi një element që i është caktuar klasa e menusë rënëse ($(".dropdown"). Në rastin tonë, kjo është një lidhje në meny:
$(funksion())(
$("dropdown").mouseenter(function())(
........
});
});
Le të sigurohemi që të fshehim() të gjitha menytë e hapura të mëparshme përpara se kursori i miut të hidhet në lidhjen tjetër:
$(".nënlidhje").stop(false, true).hide();
Vini re veçorinë e ndalimit, e cila na ndihmon të shfaqim vetëm një meny rënëse kur kursori i miut lëviz mbi lidhje të ndryshme në meny. Nëse nuk e përdorim këtë funksion, atëherë çdo menu drop-down do të mbetet e hapur derisa të largojmë plotësisht kursorin e miut nga menyja. Kjo do të krijojë disa mbivendosje, kështu që ne duhet ta shmangim këtë. Më pas, marrim menunë rënëse të zgjeruar aktualisht dhe ia caktojmë një variabli:
Nënmenyja Var = $(this).parent().next();
Kjo është ajo që do të ndodhë në kodin HTML:
Kur kursori i miut vendoset mbi një lidhje me klasën rënëse, ne kthehemi duke përdorur prind() dhe ndalojmë në "li", dhe më pas duke përdorur next(), e gjejmë veten në menunë rënëse të dëshiruar dhe "li" do të jetë tashmë me lidhjet e nënklasës (nënlidhjet). Në këtë mënyrë, jQuery e bën më të lehtë për ne që të gjejmë se cilën menu dropdown të shfaqim kur miu është pezulluar mbi një lidhje specifike.
Nënmenu.css((
pozicioni: "absolut",
lart: $(this).offset().top + $(this).lartësi() + "px",
majtas: $(this).offset().left + "px",
zIndeksi: 1000
});
Kodi është shumë i rëndësishëm sepse siguron që menyja rënëse të shfaqet pikërisht nën lidhjen specifike. Nëse pozicioni është vendosur në absolut, ne mund ta pozicionojmë elementin në çdo zonë të faqes sonë. Më pas, ne përcaktojmë pozicionin e sipërm të pezullimit të lidhjes duke përdorur $(this).offset().top (kjo i referohet artikullit të menysë së pezulluar aktualisht) dhe shtojmë një vlerë lartësie në të në mënyrë që menyja të shfaqet saktësisht poshtë lidhjes. Ne bëjmë diçka të ngjashme me parametrin e majtë. Më pas përdorim z-index për t'u siguruar që menyja jonë të shfaqet në krye të elementeve të tjerë.
Nënmenu.stop().slideDown(300);
Sigurisht, mund të përdorni opsione të tjera animacioni si fadeIn, animacion duke përdorur stilet tuaja, etj.
Tani duhet të largohemi nga koncepti i shfaqjes së një menuje rënëse dhe ta bëjmë atë të fshihet. Na duhet kjo pjesë e kodit:
Nënmenu.mouseleave(funksion())(
$(kjo).slideUp(300);
});
Për të fshehur një menu dropdown, ne përdorim slideUp, antonimin e slideDown. Mbani në mend se nënmenyja është një variabël që ne e krijuam për të përcaktuar një menu specifike rënëse.
Kështu, ne kemi një menu tërheqëse rënëse me një nivel në jQuery.
Sot do të doja të bëja një përzgjedhje të një gjenerate relativisht të re të navigimit për sitin - menutë me ekran të plotë. Ato përdoren në rastet kur nuk ka vetë navigim në faqe, ka vetëm një buton, kur klikohet, hapet një menu. Një parim i ngjashëm mund të shihet në -framework: kur shiriti i navigimit nuk përshtatet më, blloku me listën e artikujve të menusë thjesht fshihet. Në vend të tij shfaqet një buton me një imazh me, si rregull, tre vija. Kur shtypet, shfaqet menyja e plotë. Në shumë faqe interneti moderne, menyja është gjithmonë e fshehur, madje edhe në ekrane të mëdha. Kjo është bërë për të mos ngarkuar faqen. Edhe pse nuk duhet ta bëni këtë në të gjitha projektet tuaja tani. Nëse menyja është e një rëndësie dytësore, mund ta fshehni, por nëse keni një sit të madh me një strukturë komplekse, është më mirë të mos e përdorni këtë opsion. Kështu që. Ne kuptuam parimin e përgjithshëm të funksionimit, por ky lloj menuje është mjaft standard, dua diçka të re. Jo shumë kohë më parë, fillova të vërej faqet ku navigimi jo vetëm që bie, por hapet plotësisht në ekran të plotë në një dritare që shfaqet. Diçka si panele rrëshqitëse të njohura, por e gjithë kjo gjë zë të gjithë zonën e zonës së punës. Shtojcat e veçanta jQuery dhe zgjidhjet css3 filluan të shfaqen pas sajteve, për të cilat në fakt kjo temë ka të bëjë.
Personalisht, më pëlqen shumë ky zbatim i menusë së navigimit, pasi është i përshtatshëm për përdoruesit me pajisje celulare dhe duket shumë mbresëlënës në monitorët e mëdhenj. Gjithnjë e më shumë faqe me menu në ekran të plotë po shfaqen, ka edhe më shumë shtojca jQuery falas dhe koncepti gradualisht po bëhet trend.
Kështu që. Ne sjellim në vëmendjen tuaj 20 shtojca jQuery për menutë me ekran të plotë në një dritare kërcyese.
Një shtesë shumë e bukur për dizajnin e dritares është ikona e animuar SVG. Si parazgjedhje, duket si tre shirita, por kur klikohet, ikona shndërrohet në një shigjetë, e cila tregon se menyja mund të fshihet. Navigacion i animuar i rrumbullakosur. Ky skenar ka një efekt pamjeje shumë të lezetshme dhe të pazakontë. Kur klikoni në butonin e menusë, një valë del nga ikona duke përdorur css3 në të gjithë monitorin, e cila rritet në sfondin e artikujve të menusë. I njëjti efekt fshehës.
Ky navigim funksionon shkëlqyeshëm në pajisjet celulare, por duke pasur parasysh se efekti i pamjes është mjaft i rëndë, mendoj se gjithçka do të jetë e ngadaltë në telefonat e vjetër (nuk e kam testuar, kështu që do të jem i lumtur nëse shkruani përvojën tuaj në komente) .
Fatkeqësisht, nuk funksionon siç duhet në telefonat celularë: nëse ka shumë artikuj të menusë dhe ato nuk përshtaten në ekran, atëherë lëvizja vertikale nuk shfaqet dhe navigimi thjesht ndërpritet.
Pasi mora disa kërkesa, vendosa të shkruaj një artikull se si të krijoj një menu drop-down. Mënyra më e mirë dhe më e lehtë për të krijuar një menu të tillë është të mbështeteni në jQuery.
Le të shohim fillimisht shënimin HTML
Menyja e thjeshtë rënëse e bazuar në jQuery Menuja e thjeshtë rënëse
- Shtëpi
- Produktet
- Shërbimet
- Na kontaktoni
përmbajtja
Ekziston një listë e thjeshtë e pa renditur e ul, etiketat e saj li janë baza e menysë së lundrimit. Më pas, shtoni kodin më poshtë në etiketën e duhur li, kjo do të strukturojë listën rënëse.
Nëse i kushtoni vëmendje, do të vini re dy gjëra:
1. Etiketa li ka një klasë rënëse.
2. Lidhja prind ka klasën ddIcon.
Klasa rënëse përdoret në jQuery për të shfaqur/fshehur një meny rënëse. Klasa e dytë, ddIcon, përdoret për të shfaqur një tregues në menunë rënëse.
Nuk ka asgjë të veçantë për stilet e menusë - stilet e zakonshme janë:
Kontejneri ( gjerësia: 960 px; margjina: 0 automatik; mbushja e sipërme: 50 px; ) .kontejneri h1 ( madhësia e shkronjave: 30 px; ngjyra: #666; kufiri i poshtëm: 1em; ) . navigimi i kontejnerit ( rreze-kufi: 4 px; ngjyra e sfondit: #fff; lartësia: 37 px; ) .container nav ul li (pozicioni: relative; float: majtas; ) .container nav ul li a (madhësia e shkronjave: 12 px; dekorimi i tekstit: asnjë; pesha e shkronjave: bold; transformimi i tekstit: shkronja të mëdha; ngjyra: #545454; mbushja: 13 px 15 px; ekrani: bllok; kufiri djathtas: 1px solid #f9f9f9; ) .container nav ul li a.ddIcon ( sfond: transparent url("dd.png ") pa përsëritje 86% 52%; mbushje: 13 px 25px 13px 15 pik. -color: #cc333f; ngjyra: #fff; ) .container nav ul li:first-child a ( border-radius: 4px 0 0 4px; ) .container nav ul li .subNav (pozita: absolute; background-color: # cc333f; mbushja: 15px 15px 20px; gjerësia: 172px; majtas: 0px; sipër: 38px; ekrani: asnjë; ) .container nav ul li .subNav .navSection ( mbushje: 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: kapitalize; border-bottom: 1px solid #D33B47; mbushje: 7px 10px;) . navigacion i kontejnerit ul li .subNav h4 a:hover ( ngjyra: #edc951; ) .container nav ul li .subNav h4 a span ( float: djathtas; madhësia e shkronjave 10px: ngjyra: : #fff; -moz-tranzicioni: ngjyra 0.5s lehtësi 0s;) .container nav ul li .subNav h4 a span:hover (ngjyra: #390206) .container nav ul li .subNav a (float: asnjë; kufiri: asnjë ; ekrani: bllok; transformimi i tekstit: shkronja kapitale; ngjyra: #fff; mbushja: 7 px 15 px; -moz-tranzicioni: ngjyra 0,5s lehtësi 0s; lartësia e rreshtit: 1,3; .container nav ul li .subNav:hover ( ngjyra : #390206; ) .container .seksion ( i qartë: të dyja; mbushje: 10 px; ) .container .artikulli i seksionit p (madhësia e shkronjave: 16px; ngjyra: #488fb8; lartësia e rreshtit: 1.3; ) .kontejneri .titulli i seksionit p (mbushje-lart: 20px; madhësia e shkronjave: 20px; ngjyra: #333; lartësia e rreshtit: 1.3; margjina e poshtme: .4em; )
Tani duhet të ringjallemi menyja rënëse. Funksioni më i thjeshtë jQuery do të na ndihmojë me këtë.
$(function())( $("li.dropdown").hover(function() ( if ($("this:has(div.subNav)"))( $(".subNav").css(( "ekrani":"asnjë")); $(".subNav", kjo).css(("ekrani":"blloku")); $("nav ul li").css(("pozicioni":" relative ", "z-index":"1001")); $(this).addClass("aktive"); ) ), funksion()) ($(".subNav").css(("ekrani": "asnjë ")); $(this).removeClass("aktive"); $("nav ul li").css(("pozicioni":"relativ", "z-index":"1")); )) ;));
Për çdo element të listës, është e mundur të krijoni menynë tuaj të lëshimit: brenda elementit li, vendosni një bllok me klasën .subnav dhe gjithashtu caktoni klasën .dropdown në vetë li.
