Pomocí klasického jQuery byla na toto téma napsána spousta článků. Pokusil jsem se úkol trochu zkomplikovat přidáním možnosti nechat sekce nabídky otevřené (nebo zavřené, v závislosti na volbě uživatele) při pohybu po webu.
K vyřešení tohoto problému jsem se rozhodl použít plugin jQuery Cookie. Výhodou tohoto pluginu je, že operace se provádí na straně klienta, což zase snižuje zatížení serveru. Mínus – pokud má uživatel vypnutý JS, plugin nebude fungovat. Ale tato možnost Neuvažuji, protože pak celá pointa rozbalovací nabídky úplně zmizí. Takže, začněme.
Nejprve musíme propojit samotný rámec jQuery a plugin jQuery Cookie:

Kód: HTML





Další je označení. Bude to vypadat jako jednoduchý seznam, nic nadpřirozeného. Jediná věc, kterou je třeba poznamenat, je to ve značce

měl by tam být nadpis, po kliknutí vypadne nabídka:

Kód: HTML


A tak dále do nekonečna. A teď to nejzajímavější. Do kódu přidám pár komentářů, aby to bylo přibližně jasné, chopach

Kód: JS

$(document).ready(function()(
if($.cookie("num_open_ul"))( // kontrola, zda existuje záznam cookie
if($.cookie("num_open_ul") != 0)( // a tento záznam se nerovná 0
var number_eq = parseInt($.cookie("num_open_ul")-1);
$(".navigation_body").eq(number_eq).show().prevAll("#navigation h2.navigation_head:first").addClass("aktivní_navigace");
}
};
$("#navigation h2.navigation_head").click(function()( // po kliknutí bude tato funkce fungovat
if(!$(this).next().is(":viditelné"))(
$("div.navigation_body").siblings("div.navigation_body").slideUp(500); // pokud jsou otevřeny ostatní, zavře všechny kromě aktuálního
}
$(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"); // otevřít přidal třídu pro změnu stylu
setTimeout(fncookie, 600); //samotný zápis do cookies se zpožděním, aby měl skript čas dokončit práci před zápisem (500 ms - rychlost, zpoždění - 600 ms)
});
function fncookie()( // samotná funkce nahrávání
varnumber_open_ul = 0;
var i = 0;
$("div.navigation_body").each(function()(
i++;
if($(this).is(":viditelné"))(
number_open_ul = i;
}
$.cookie("num_open_ul", number_open_ul, (vyprší:3, cesta:"/")); // uložit 3 dny pro celý web.
});
}
});


To znamená, že pokud nyní uživatel otevřel nabídku, opustil web a vrátil se na něj za pár dní, nabídka pro něj zůstane stále otevřená.
A nakonec nám zbývá malý dotek: ve skutečnosti css styly. Udělejte to podle svého vkusu, v příkladu jsem vzal hotový návrh z jednoho z projektů

Kód: CSS

#navigace(
okraj: 80px auto;
šířka: 250px
}
#navigation h2, #navigation h2.navigation_head (
velikost písma: 18px;
váha písma: tučnější;
barva pozadí: #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);

odsazení: 5px 3px 6px 3px
okraj: auto;
poloha: relativní;
}
#navigation h2.navigation_head:after (
pozice: absolutní;
vpravo: 5px;
barva: #550000;
obsah: "cssb";
}
#navigation h2:hover, #navigation h2.navigation_head:hover (
kurzor: ukazatel;
}
.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 (
pozice: absolutní;
vpravo: 5px;
obsah: "cssd" !důležité;
}
.navigation_body(
displej:žádný;
}
#navigation ul (
okraj: 0;
výplň: 0;
list-style-type: none;
}
* html #navigation ul li(
výška: 1 %;
}
#navigation div.navigation_body ul li (
margin-left: 10px;
}
#navigation a (
font-family: "Times New Roman";
displej:blok;
barva: #918871;
výplň: 3px
barva pozadí: #ffe3e0;
border-bottom: 1px solid #fff;
text-dekorace: žádná;
}
#navigation a:hover (
barva: #585858;
barva pozadí: #ffb6cc;
}


Pokud někdo dával pozor, zde jsem zkusil použít obsah: +/- vlastnost při zavřené/otevřené nabídce, ale můžete přidat obrázek nebo jakýkoli jiný design. Zde můžete vidět příklad toho, co jsme udělali

Jako vždy připraveni vyslechnout otázky a pokusit se na ně odpovědět. Všechno nejlepší, všechno nejlepší.

Velmi často v šablonách najdete rozbalovací navigační prvky. Vývojáři používají daný typ skryté nabídky pro zobrazení dalších skrytých odkazů tematicky souvisejících s hlavní položkou. Můžete najít příklady výsuvných panelů nebo různých nabídek ve stylu harmoniky, které implementují tento princip navigace.

Ale v tomto tutoriálu vytvoříme jednoduchou rozbalovací nabídku pomocí jQuery. Bude pracovat s metodou animace pro generování zpožděných efektů. Spolu s kódem JavaScript jsou také použity přechodové efekty CSS3. Výsledkem je prázdné místo pro navigaci na webu.

HTML

Nejprve sestavíme základní HTML5 šablonu. By potřeboval Nejnovější verze jQuery , který získáváme z Google API. Přidejte také soubor stylu styly.css který bude zobrazen níže:

Horizontální navigační lišta | Stránky materiálů webu

Nyní zvažte strukturu, která je postavena na vrcholu neuspořádaného seznamu v horní části stránky. Celý seznam je zabalen do prvku HTML5