Pomocou klasického jQuery bolo na túto tému napísaných množstvo článkov. Úlohu som sa pokúsil trochu skomplikovať pridaním možnosti nechať sekcie ponuky otvorené (alebo zatvorené, v závislosti od voľby používateľa) pri pohybe po stránke.
Na vyriešenie tohto problému som sa rozhodol použiť doplnok jQuery Cookie. Výhodou tohto pluginu je, že operácia sa vykonáva na strane klienta, čo následne znižuje zaťaženie servera. Mínus – ak má používateľ vypnutý JS, plugin nebude fungovať. ale túto možnosť Neuvažujem, pretože potom celý zmysel rozbaľovacej ponuky úplne zmizne. Takže, začnime.
Najprv musíme prepojiť samotný rámec jQuery a doplnok jQuery Cookie:

Kód: HTML





Ďalej je označenie. Bude to vyzerať ako jednoduchý zoznam, nič nadprirodzené. Jediná vec, ktorú treba poznamenať, je to v značke

mal by tam byť nadpis, po kliknutí vypadne ponuka:

Kód: HTML


A tak ďalej do nekonečna. Teraz to najzaujímavejšie. Do kódu pridám pár komentárov, aby to bolo približne jasné, chopach

Kód: JS

$(document).ready(function()(
if($.cookie("num_open_ul"))( // skontrolujte, či existuje záznam cookie
if($.cookie("num_open_ul") != 0)( // a tento záznam sa nerovná 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()( // po kliknutí bude táto funkcia fungovať
if(!$(this).next().is(":viditeľné"))(
$("div.navigation_body").siblings("div.navigation_body").slideUp(500); // ak sú otvorené ostatné, zatvorte všetky okrem aktuálneho
}
$(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"); // otvorte pridanú triedu na zmenu štýlu
setTimeout(fncookie, 600); //samotný zápis do cookies s oneskorením, aby mal skript čas dokončiť prácu pred zápisom (500 ms - rýchlosť, oneskorenie - 600 ms)
});
function fncookie()( // samotná funkcia nahrávania
varnumber_open_ul = 0;
var i = 0;
$("div.navigation_body").each(function()(
i++;
if($(this).is(":viditeľné"))(
number_open_ul = i;
}
$.cookie("num_open_ul", number_open_ul, (vyprší:3, cesta:"/")); // uložiť 3 dni pre celú stránku.
});
}
});


To znamená, že ak používateľ otvoril ponuku, opustil stránku a vrátil sa na ňu o niekoľko dní, ponuka pre neho zostane otvorená.
A nakoniec nám zostáva malý dotyk: v skutočnosti css štýly. Urobte to podľa svojho vkusu, v príklade som vzal hotový dizajn z jedného z projektov

Kód: CSS

#navigácia(
okraj: 80px automaticky;
šírka: 250px
}
#navigation h2, #navigation h2.navigation_head (
veľkosť písma: 18px;
font-weight: tučnejšie;
farba pozadia: #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);
background-image: -moz-linear-gradient(#ffe9e9,#ffb6c1);
background-image: -o-linear-gradient(#ffe9e9,#ffb6c1);
background-image: linear-gradient(#ffe9e9,#ffb6c1);

padding: 5px 3px 6px 3px
okraj: auto;
poloha: relatívna;
}
#navigation h2.navigation_head:after (
pozícia: absolútna;
vpravo: 5px;
farba: #550000;
obsah: "cssb";
}
#navigation h2:hover, #navigation h2.navigation_head:hover (
kurzor: ukazovateľ;
}
.active_navigation(
background-image: -webkit-gradient(linear,50% 0.50% 100%,color-stop(0%,#ffb6c1),color-stop(100%,#ffe9e9)) !dôležité;
background-image: -webkit-linear-gradient(#ffb6c1,#ffe9e9) !dôležité;
background-image: -moz-linear-gradient(#ffb6c1,#ffe9e9) !dôležité;
background-image: -o-linear-gradient(#ffb6c1,#ffe9e9) !dôležité;
background-image: linear-gradient(#ffb6c1,#ffe9e9) !dôležité;
}
.active_navigation:after (
pozícia: absolútna;
vpravo: 5px;
obsah: "cssd" !dôležité;
}
.navigation_body(
displej:žiadny;
}
#navigation ul (
okraj: 0;
výplň: 0;
list-style-type: none;
}
* html #navigation ul li(
výška: 1 %;
}
#navigation div.navigation_body ul li (
ľavý okraj: 10px;
}
#navigation a (
font-family: "Times New Roman";
displej:blok;
farba: #918871;
výplň: 3px
farba pozadia: #ffe3e0;
border-bottom: 1px solid #fff;
text-dekorácia: žiadna;
}
#navigation a:hover(
farba: #585858;
farba pozadia: #ffb6cc;
}


Ak by niekto dával pozor, tu som sa snažil použiť obsah: +/- vlastnosť pri zatvorenej / otvorenej ponuke, ale môžete pridať obrázok alebo akýkoľvek iný dizajn. Tu si môžete pozrieť príklad toho, čo sme urobili

Ako vždy, pripravený počúvať otázky a snažiť sa na ne odpovedať. Všetko najlepšie, všetko najlepšie.

Veľmi často v šablónach nájdete rozbaľovacie navigačné prvky. Vývojári používajú daný typ skryté ponuky na zobrazenie ďalších skrytých odkazov tematicky súvisiacich s hlavnou položkou. Môžete nájsť príklady výsuvných panelov alebo rôznych menu v štýle akordeónu, ktoré implementujú tento princíp navigácie.

Ale v tomto návode vytvoríme jednoduchú rozbaľovaciu ponuku s pomocou jQuery. Bude pracovať s metódou animácie na generovanie oneskorených efektov. Spolu s kódom JavaScript sa používajú aj prechodové efekty CSS3. Výsledkom je prázdne miesto pre navigáciu na stránke.

HTML

Najprv vytvoríme základnú šablónu HTML5. Potreboval by Najnovšia verzia jQuery , ktorý získavame z Google API. Pridajte aj súbor štýlu styles.css ktoré budú zobrazené nižšie:

Horizontálna navigačná lišta | Stránka materiálov stránky

Teraz zvážte štruktúru, ktorá je postavená na vrchole neusporiadaného zoznamu v hornej časti stránky. Celý zoznam je zabalený do prvku HTML5