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:
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 pro nejlepší výsledky SEO.
Struktura kódu je poměrně jednoduchá. Každá položka seznamu obsahuje efekt zvýraznění, když je v ní kurzor myši. Všechny vnitřní prvky UL jsou obsaženy v původní položce seznamu, takže při přesunu na položky rozevírací nabídky se neztratí zaměření vstupu.
Styly navigace
Šablona stylů obsahuje kód pro resetování hodnot vlastností na výchozí. Mnoho vývojářů zahrnuje soubor od Erica Meye , ale pro náš případ je příliš nepraktický. Kód je navíc uložen na jiném serveru, což samo o sobě je špatné rozhodnutí v tomto případě.
html, tělo, div, span, applet, objekt, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, citovat, code, del, dfn, em, img, ins, kbd, q, s, samp, malý, úder, silný, sub, sup, tt, var, b, u, i, střed, dl, dt, dd, ol, ul, li, fieldset, formulář, štítek, legenda, tabulka, titulek, tbody, tfoot, hlavička, tr, th, td, článek, stranou, plátno, detaily, vložit, obrázek, titulek, zápatí, záhlaví, hgroup, nabídka, navigace, výstup, rubín, sekce, shrnutí, čas, značka, zvuk, video ( okraj: 0; odsazení: 0; ohraničení: 0; velikost písma: 100 %; písmo: dědit; svislé zarovnání: základní čára; obrys: žádný; -webkit-font- vyhlazování: antialiased; -webkit-text-size-adjust: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; ) html ( height : 101 %; ) tělo ( pozadí: #eaeaea url("images/bg.png"); velikost písma: 62,5 %; výška řádku: 1; rodina písem: Arial, Tahoma, sans-serif; padding-bottom : 60px; ) článek, stranou, detaily, popis obrázku, obrázek, zápatí, záhlaví, h skupina, menu, navigace, sekce ( zobrazení: blok; ) ol, ul ( styl seznamu: žádný; ) blockquote, q ( uvozovky: žádné; ) blockquote:before, blockquote:after, q:before, q:after ( content: ""; content: none; ) strong ( font -váha: tučné; ) tabulka ( border-collapse: sbalit; border-spacing: 0; ) img ( border: 0; max-width: 100 %; )
V kódu je zajímavá vlastnost -webkit-font-smoothing. Je navržen tak, aby vyhladil písma při spouštění kódu v prohlížečích pod Ovládání Mac OSX nebo iOS.
Nyní přejdeme k našemu menu.
#ddmenu ( display: block; width: 100%; height: 80px; margin: 0 auto; padding: 0 15px; background: #fff; border-radius: 6px; border: 1px solid rgba(0, 0, 0, 0.15 ); box-shadow: 0 1px 1px rgba(20, 20, 20, 0,2); kurzor: ukazatel; obrys: žádný; váha písma: tučné; barva: #8aa8bd; ) #ddmenu li ( displej: blok; pozice: relativní; plovoucí: vlevo; velikost písma: 1,45 em; stín textu: 1px 1px 0 #fff; border-right: 1px plný #dae0e5; ) #ddmenu li a ( display: block; float: left; padding: 0 12px ; výška řádku: 78px; váha písma: tučné; zdobení textu: žádné; barva: #6c87c0; -webkit-transition: all 0,2s linear; -moz-transition: all 0,2s linear; -o-transition: all 0,2 s lineární; přechod: všechny 0,2 s lineární; ) #ddmenu li:hover > a ( barva: #7180a0; pozadí: #d9e2ee; ) #ddmenu ul ( pozice: absolutní; nahoře: 88px; šířka: 130px; pozadí: # fff; display: none; margin: 0; padding: 7px 0; list-style: none; border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0 0 5px rgba(0, 0, 0, 0,2); )
Přidání selektoru #ddmenuul zvýraznit všechny vnitřní prvky v každé položce seznamu, protože je důležité určit jejich vzdálenost pomocí absolutní umístění. Přidáváme také lineární přechod pro všechny odkazy, který se zobrazí, když na ně najedete myší.
Nyní se podíváme na vytvoření ukazatele horního prvku. Tvoří se pomocí vlastnosti rotace a univerzálního rámečku s tmavým pozadím pro stín. Při offsetovém umístění je jeden prvek naší struktury umístěn nad druhým a tvoří vizuální reprezentaci ukazatele v rozbalovací nabídce.
#ddmenu ul:after ( content: ""; šířka: 0; výška: 0; pozice: absolutní; dole: 100 %; vlevo: 8px; border-width: 0 8px 8px 8px; border-style: solid; border-color : #fff transparent; ) #ddmenu ul:before ( content: ""; šířka: 0; výška: 0; pozice: absolutní; dole: 100 %; vlevo: 4px; border-width: 0 10px 10px 10px; border-style : solid; border-color: rgba(0, 0, 0, 0.1) transparent; ) #ddmenu ul li ( display: block; width: 100%; font-size: 0.9em; text-shadow: 1px 1px 0 #fff ; ) #ddmenu ul li a ( display: block; width: 100%; padding: 6px 7px; line-height: 1.4em; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; - o-přechod: všechny 0,2 s lineární; přechod: všechny 0,2 s lineární; ) #ddmenu ul li a:hover ( pozadí: #e9edf3; )
JavaScript
První část kódu zachycuje kliknutí na odkazy a ve výchozím nastavení zastavuje jejich zpracování (načítání stránek na URL).
Druhá část kódu dělá všechna kouzla. Připojujeme obslužnou rutinu události pro proces najetí na položku seznamu. Obslužná rutina zastaví aktuálně aktivní animaci a zobrazí novou sub s .slideDown() . Nastavili jsme také krátké zpoždění, abychom reagovali pouze na skutečný výběr položky.
Pokud jsou všechny takové položky umístěny pod sebou, je možné, že se nabídka natolik zvětší, že její výška přesáhne výšku hlavního obsahu. Zvenku to nebude moc krásné, navíc se v tak souvislém seznamu těžko něco hledá. Chcete-li seskupit a zredukovat vše, musíte udělat něco jako posuvné menu.
Princip posuvného menu spočívá v tom, že položky menu jsou rozděleny do skupin a tyto skupiny jsou skryté, je viditelný pouze název skupiny. Po kliknutí na název se zobrazí seznam určitého počtu položek.
Jak vytvořit posuvné menu? To nám pomůže - jQuery. S ním bude vše fungovat hladce a krásně, jako ve výše uvedeném příkladu. Začneme implementovat posuvné menu a uděláme pár věcí.
skript jQuery
Jako obvykle při práci s jQuery musíte zahrnout jeho knihovnu. Vše je jako obvykle, v záhlaví nebo zápatí se připojíme, pokud jste to samozřejmě neudělali dříve, pro jiné skripty.
Za knihovnu přidejte skript. který bude provádět animaci. Budou 3 skripty, každý z nich provádí animaci jinak.
Tento skript funguje tak, že po kliknutí na název kategorie se vytáhne seznam, ale po kliknutí na jinou kategorii se začne rozbalovat, zatímco první se zavře. To znamená, že vždy je otevřena pouze jedna kategorie. Pokud potřebujete, aby otevřené kategorie nebyly uzavřeny automaticky a poté skript nahraďte novým, který je uveden níže.
Existuje další skript, kterým můžete nahradit ten hlavní. Jeho vlastnost je taková posuvné menu při umístění kurzoru happening. Není třeba klikat, stačí najet myší na název kategorie a je to. Vyberte si tedy, který skript vám nejlépe vyhovuje.
HTML značení
Nyní v správné místo na svém webu, musíte zobrazit HTML- označení. No, nebo trochu změňte svůj, aby byl podobný jako v příkladu.
Není nic složitého, vše je organizováno pomocí - ul-seznamy.
CSS styly
A konečně, abychom mohli nastavit správný vzhled naší nabídky, musíme registrovat styly. Pokud s tímto nepracujete poprvé css, pak si můžete styly snadno přizpůsobit.
Ul#menu, ul#menu ul( list-style:none; margin: 0px; padding: 0px; width: 250px; -webkit-box-shadow:0px 0px 5px 0px rgba(50, 50, 50, 0,2); - moz-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0,2); box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0,2);) ul#menu a,ul#rozpětí nabídky (display: block; text-decoration: none;) ul#menu li (margin-top: 1px;) ul#menu li a,ul#menu li span( background: #1ba600; color: #fff; padding: 7px; ) ul#menu li a:hover,ul#menu li span:hover(pozadí: #333;) ul#menu li ul li a( pozadí: #eee; barva: #000; padding-left: 20px;) ul# menu li ul li a:hover(pozadí: #ddd;)
Nic jiného není potřeba. Tato metoda není příliš komplikovaný a má několik typů implementace, vše závisí na zvoleném skriptu.
To je vše, děkuji za pozornost. 🙂
V tomto tutoriálu vám ukážeme, jak vytvořit postranní rozbalovací nabídku pro ještě snadnější navigaci na webu. Toto menu je oblíbeným trendem moderní web design. Mnoho webů používá tento typ nabídky. S ním se můžete zbavit chaosu na stránkách projektu, učinit je čitelnějšími a zaměřit pozornost uživatelů na hlavní obsah.
Je to skvělý způsob, jak dosáhnout minimalismu bez rušení. Dnes si takové menu vytvoříme sami.
Chcete-li vytvořit navigační nabídku, podívejme se nejprve na nastavení:
Nejprve musíte načíst Normalize.css a upravit výchozí styly prohlížeče, ujistěte se, že nabídka vypadá ve všech prohlížečích stejně. FontAwesome použijeme k zobrazení šipky před položkami nabídky s podpoložkami. Pro přepnutí tříd v nabídce načteme jQuery a přesuneme veškerý vlastní kód jQuery do script.js. Posledním odkazem je hlavní tabulka pro webový projekt.
Ikona hamburgeru
Ikona hamburgeru je běžný atribut navigace na webu. Často se vytváří pomocí ikonového písma, jako je FontAwesome, ale v tomto tutoriálu přidáme nějakou animaci, takže ji vytvoříme od začátku. Naše ikona hamburgeru je značka span obsahující tři třídy div, vykreslené jako vodorovné pruhy.
Styly vypadají takto:
Toggle-button ( pozice: pevná; šířka: 44px; výška: 40px; odsazení: 4px; přechod: 0,25s; z-index: 15; ) .toggle-button:hover (kurzor: ukazatel; ) .toggle-button .menu -bar ( pozice: absolutní; okraj-poloměr: 2px; šířka: 80 %; přechod: .5s; ) .toggle-button .menu-bar-top ( border: 4px solid #555; border-bottom: none; top: 0; ) .toggle-button .menu-bar-middle ( výška: 4px; barva pozadí: #555; margin-top: 7px; margin-bottom: 7px; top: 4px; ) .toggle-button .menu-bar -bottom ( border: 4px solid #555; border-top: none; top: 22px; ) .button-open .menu-bar-top ( transform: rotation(45deg) translate(8px, 8px); transition: .5s; ) .button-open .menu-bar-middle ( transform: translate(230px); transition: .1s easy-in; opacity: 0; ) .button-open .menu-bar-bottom ( transform: rotation(-45deg) translate(8px, -7px); transition: .5s; )
Ikona má pevnou pozici a při rolování stránky se nemění. Má také z-index 15, což znamená, že bude vždy nad ostatními prvky. Skládá se ze tří taktů, z nichž každý sdílí jiné styly. Proto přesuneme každý pruh do třídy .menu-bar. Zbývající styly jsou přesunuty do samostatných tříd. Kouzlo se stane, když do tagu span přidáme další třídu, která je veřejná. Přidáme to pomocí jQuery takto:
$(document).ready(function() ( var $toggleButton = $(".toggle-button"); $toggleButton.on("click", function() ( $(this).toggleClass("button-open" );)));));
Pro ty, kteří neznají jQuery, inicializujeme proměnnou pomocí $toggleButton, která obsahuje naši ikonu. Bez potřeby jej uložíme do proměnné Použití JavaScriptu. Poté vytvoříme posluchač událostí, který naslouchá kliknutí na ikonu. Pokaždé, když uživatel klikne na ikonu hamburgeru, posluchač událostí spustí funkci toggleClass(), která přepne třídu .button-open.
Jakmile je přidána třída .button-open, můžeme ji použít ke změně způsobu zobrazení prvků. Používáme funkce CSS3 translate() and rotation() k tomu, aby se horní a dolní pruhy otočily o 45 stupňů a prostřední pruh se posunul doprava a zmizel. Zde jsou animace, které si můžete přizpůsobit:
Rozbalovací navigační nabídka
Nyní, když máte ikonu hamburgeru, pojďme ji využít a vytvořit rozbalovací nabídku, když na ni kliknete. Takto vypadá označení nabídky:
Nebudeme se nyní podrobně zabývat každým stylem tohoto menu, ale místo toho se zaměříme na několik. důležité body. V první řadě je to div a třída .menu-wrap. Podívejte se na jeho styly:
Menu-wrap ( background-color: #6968AB; position: fixed; top: 0; height: 100%; width: 280px; margin-left: -280px; font-size: 1 em; font-weight: 700; overflow: auto ; přechod: 0,25 s; z-index: 10; )
Pozice je pevná, takže menu zůstává při rolování stránky vždy na stejné pozici. Výška 100 % umožňuje, aby nabídka zabrala veškerý vertikální prostor na stránce. Všimněte si, že pole vlevo je nastaveno na záporné číslo rovné šířce nabídky. To znamená, že nabídka zmizí z výřezu. Aby to bylo znovu viditelné, vytvoříme další třídu toggler s jQuery. Náš soubor JavaScript bude vypadat takto:
$(document).ready(function() ( var $toggleButton = $(".toggle-button"), $menuWrap = $(".menu-wrap"); $toggleButton.on("click", function() ( $(this).toggleClass("button-open"); $menuWrap.toggleClass("menu-show"); ) ); ) );
Přidejte další proměnnou $menuWrap, která obsahuje obal nabídky. Použijte stejnou obsluhu události, kterou jsme vytvořili dříve. Pouze tentokrát vyměníme dvě třídy: jednu pro tlačítko a jednu pro obal nabídky. Hodnota levého okraje třídy .menu-show je 0, přidá se efekt stínu.
Menu-show ( margin-left: 0; box-shadow: 4px 2px 15px 1px #B9ADAD; )
Podnabídky a odkazy
Můžete si všimnout, že jedna z položek seznamu má třídu .menu-item-has-children, která obsahuje podnabídku. Přímo pod odkazem je také značka span s třídou .sidebar-menu-arrow.
span má pseudoelement::after a obsahuje šipku FontAwesome. Ve výchozím nastavení je podnabídka skrytá a bude viditelná pouze po kliknutí na šipku. Zde je návod, jak to můžeme udělat s jQuery:
$(document).ready(function() ( var $sidebarArrow = $(".šipka-strana-menu"); $sidebarArrow.click(function() ( $(this).next().slideToggle(300); ));));
Když klikneme na šipku, zavoláme funkci, která zase zacílí na další prvek bezprostředně po rozpětí (v našem případě podnabídku) a zviditelní jej. Funkce, kterou používáme, je slideToggle . To způsobí, že se prvek objeví a zmizí. Funkce v našem příkladu má jeden parametr – dobu trvání animace.
Položky nabídky v příkladu mají efekt přechodu. Je vytvořen pomocí::after pseudo-prvku. Kód vypadá takto:
Postranní panel nabídky li > a::after ( obsah: ""; zobrazení: blok; výška: 0,15 em; pozice: absolutní; nahoře: 100 %; šířka: 102 %; vlevo: 50 %; transform: translate(-50 % ); obrázek na pozadí: lineární přechod (doprava, průhledný 50,3 %, #FFFA3B 50,3 %); přechod: poloha na pozadí 0,2 s 0,1 s uvolnění; velikost pozadí: 200 % auto; ) .menu-sidebar li > a:hover::after (pozice na pozadí: -100 % 0; )
Pseudoprvek ::after obsahuje prvek úrovně bloku ve spodní části každého odkazu s plnou šířkou a výškou 0,15 em. Všechno to vypadá jako podtržení. Zvláštností je, že na čáru neaplikujeme pouze barvu pozadí, ale používáme funkci linear-gradient() obrázek na pozadí. Přestože je tato funkce určena k vytváření barevných přechodů, můžeme barvu změnit zadáním požadovaného procenta.
Postranní panel nabídky li > a::after ( obrázek na pozadí: lineární přechod (doprava, průhledný 50,3 %, #FFFA3B 50,3 %); )
Polovina linky je zde průhledná a druhá polovina je žlutá. Nastavením velikosti pozadí na 200 % zdvojnásobíme šířku našeho boxu. Nyní průhledná část zabírá celou šířku odkazu a žlutá část se přesune doleva a stane se neviditelnou. Měníme pozici pozadí při najetí na -100 %. Nyní se zviditelní žlutá část a průhledná část se skryje.
Místo průhledné části můžete použít jakoukoli jinou barvu. Můžete také experimentovat s přechody.
Každý z prvků, které jsme zvážili, funguje jako celek. Takové menu si můžete vytvořit pomocí libovolného designu webu z kolekce TemplateMonster. Jak vidíte, je to jednodušší, než si myslíte. Hodně štěstí při vytváření profesionálních a uživatelsky přívětivých webových stránek!
Abyste si v jQuery mohli napsat vlastní navigaci ve formě vertikálního rozbalovacího menu s rozbalovacím seznamem podkategorií, musíte pochopit samotný princip tohoto mechanismu. Nejprve se však podívejme na navigační strukturu:
Navigace
Jak jste možná uhodli, naše rozbalovací nabídka je založena na seznamech s odrážkami. Při najetí myší na značku
- test 1
- test 2
- test 3
- test 4
Ale jak, ptáte se? Ano, je to vlastně velmi jednoduché. Nejprve se seznámíme se styly našeho navigačního seznamu, bude vypadat takto:
Body ( background: rgb(244, 244, 244); font-family: Verdana; font-weight: 100; ) /*---Navigation---*/ #menu ( width: 200px; margin: 0; padding: 2px; ) #menu li ( list-style-type: none; ) .menu ( pozice: relativní; pozadí: čokoláda; pozadí: -moz-linear-gradient(top, rgb(198, 255, 242), #2AC4B3) ; background: -webkit-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); background: -o-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); border : 1px solid #2AC4B3; ) .menu:hover ( pozadí: #00c; pozadí: -moz-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); pozadí: -webkit-linear-gradient( top, rgb(230, 230, 230), #0CBFAB); pozadí: -o-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); ) .rozpětí nabídky ( šířka: 11px; výška: 11px; displej: blok; pozice: absolutní; nahoře: 8px; vpravo: 10px; kurzor: ukazatel; ) .menu ul ( šířka: 150px; okraj: 0; odsazení: 1px; pozice: absolutní; nahoře: -1px; vlevo: 198px; ) .menu ul li ( pozadí: čokoláda; pozadí: -moz-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); pozadí: -webkit-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); pozadí: -o-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); ohraničení: 1px solid #fff; ) .menu ul li:hover ( pozadí: #00c; pozadí: -moz-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); pozadí: -webkit-linear-gradient(top, rgb( 230, 230, 230), #0CBFAB); pozadí: -o-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); ) .menu a ( padding: 5px; display: block; text- dekorace: žádná; barva: bílá; ) .menu a:hover ( barva: bílá; ) /*---KONEC---*/
Ze šablony stylů je vidět, že rozevírací seznam není zpočátku skrytý, ale tento moment opravíme pomocí:
$(document).ready(function()( $(".menu ul").hide(); $(".menu span").css("pozadí", "url("down.png")") ; $("#menu li").hover(function()( $(this).children("ul").show(); /*Ekvivalent $("ul", this).show();* / $(this).find("span").css("background", "url("right.png")"); /*Ekvivalent $("span", this).css("background", "url ("right.png")");*/ ),function()( $(this).children("ul").hide(); /*Ekvivalent $("ul", this).hide (); */ $(this).find("span").css("pozadí", "url("dolů.png")"); /*$("span", this).css("pozadí" ", " url("down.png")");*/ )) ))
Nyní se podívejme blíže na kód rozbalovací nabídky jQuery, protože. možná to někomu nebude úplně jasné. Na samém začátku je napsána následující struktura:
$(document).ready(function()( ))
Obsahuje příkazy, které je nutné provést po úplném načtení stránky. To se děje tak, aby se neobjevily různé druhy chyb, pokud není možné najít žádný objekt kvůli tomu, že ještě nebyl načten.
$(".menu ul").hide();
Co tento záznam znamená? Konstrukce "$()" umožňuje vybrat prvky. Proto musíme hned na začátku skrýt náš rozevírací seznam. Vezmeme konstrukci „$()“ a zapíšeme do ní objekt, který nás zajímá. V našem případě to bude tento objekt seznam s odrážkami s třídou "menu". Dále napíšeme metodu „hide ()“, která nám umožňuje skrýt objekt, který nás zajímá.
$(".rozpětí nabídky").css("pozadí", "url("dolů.png")");
Co dělá? Hledá značku nadřazený prvek kterému je přiřazena třída „menu“ a pomocí metody „css("background", „url("down.png")") je vlastnosti stylu "background" přiřazena hodnota "url("down .png")". "down.png" je ikona označující, že seznam lze rozbalit.
Pak přichází konstrukce, která otevře náš seznam, vypadá takto:
$("#menu li").hover(function()( $(this).children("ul").show(); $(this).find("span").css("pozadí", " url("right.png")"); ),function()( $(this).children("ul").hide(); $(this).find("span").css("pozadie" , "url("dolů.png")"); )
Hledáme značku, jejíž nadřazený prvek má přiřazeno id="menu". Dále přichází na řadu metoda "hover" a dvě funkce v závorkách. První funkce se provede při najetí kurzorem myši a druhá se provede, pokud kurzor myši opustí prvek, který nás zajímá.
První funkce říká:
$(this).children("ul").show(); $(this).find("span").css("pozadie", "url("vpravo.png")");
Konstrukce „$(this)“ znamená, že nás zajímá prvek, na kterém se nacházíme tento momentšpičatý (toto z angličtiny toto). A ukázali jsme na značku
Poté hledáme potomky značky, konkrétně: značka a její pozadí se změní na jinou ikonu.
Poté je napsána funkce, která dělá vše tak, jak bylo původně, poté, co kurzor myši opustí prvek seznamu:
Function()( $(this).children("ul").hide(); $(this).find("span").css("pozadí", "url("dolů.png")"); )
Aby napsaný kód jQuery fungoval a naše rozbalovací nabídka fungovala správně, je potřeba si knihovnu stáhnout z webu jquery.com a zahrnout ji tak, že ji napíšete za úvodní značku
tětiva.Dobře, teď je po všem! Na závěr chci poznamenat, že pokud je váš web poměrně těžký, pak se skript pravděpodobně spustí příliš pozdě (web se bude načítat dlouho) a uživatelé uvidí, jak se nejprve plně otevře a teprve poté se skryje, což , vidíte, je velmi ošklivý. Proto je nutné přesunout všechny příkazy jQuery za tuto konstrukci: "$(document).ready(function()())". Bude to vypadat takto:
$(dokument).ready(funkce()( )) $(".menu ul").hide(); $(".rozpětí nabídky").css("pozadí", "url("dolů.png")"); $("#menu li").hover(function()( $(this).children("ul").show(); $(this).find("span").css("pozadí", " url("right.png")"); ),function()( $(this).children("ul").hide(); $(this).find("span").css("pozadie" , "url("dolů.png")"); ))
Připojování našeho skriptu musí být přesunuta z tagu
úplně na konci, před závěrečnou značkou, nebo můžete skript zahrnout hned za seznam s odrážkami.(Staženo: 312)