Hladce rozbalovací nabídka po kliknutí. Rozbalovací nabídka v jQuery. Jednoduché rozbalovací menu

Po obdržení několika žádostí jsem se rozhodl napsat článek o tom, jak vytvořit rozbalovací nabídku. Nejlepší a nejjednodušší způsob, jak takové menu vytvořit, je spolehnout se na jQuery.

Nejprve se podíváme na označení HTML.

Existuje jednoduchý neuspořádaný seznam ul , jeho li tagy jsou základem navigačního menu. Dále přidejte níže uvedený kód do příslušné značky li do struktury rozbalovací seznam.

Pokud budete opatrní, všimnete si dvou věcí:

1. Značka li má třídu rozevíracího seznamu.
2. Nadřazený odkaz má třídu ddIcon.

Třída rozevíracího seznamu se používá v jQuery k zobrazení/skrytí rozevírací nabídky. Druhá třída ddIcon se používá k zobrazení ukazatele na rozevírací nabídku.

Na stylech menu není nic zvláštního – obvyklé styly jsou:

Container ( šířka: 960px; margin: 0 auto; padding-top: 50px; ) .container h1 ( font-size: 30px; color: #666; margin-bottom: 1em; ) .container nav ( border-radius: 4px; background-color: #fff; height: 37px; ) .container nav ul li ( pozice: relativní; float: left; ) .container nav ul li a ( font-size: 12px; text-decoration: none; font-weight: tučné; text-transform: velká; barva: #545454; odsazení: 13px 15px; displej: blok; border-right: 1px plné #f9f9f9; ) .container nav ul li a.ddIcon ( background: transparent url("dd.png) ") no-repeat 86% 52%; padding: 13px 25px 13px 15px; ) .container nav ul li a:hover ( background-color: #cc333f; color: #fff; ) .container nav ul li.active a ( background -color: #cc333f; color: #fff; ) .container nav ul li:first-child a ( border-radius: 4px 0 0 4px; ) .container nav ul li .subNav ( position: absolute; background-color: # cc333f; padding: 15px 15px 20px; width: 172px; left: 0px; top: 38px; display: none; ) .container nav ul li .subNav .navSection ( padding: 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: capitalize; border-bottom: 1px solid #D33B47; padding: 7px 10px; ) .container nav ul li .subNav h4 a:hover ( color: #edc951; ) .container nav ul li .subNav h4 a span ( float: right; font-size: 10px; color : #fff; -moz-transition: color 0,5s lehkost 0s; ) .container nav ul li .subNav h4 a span:hover ( barva: #390206 ) .container nav ul li .subNav a ( float: none; border: none ; display: block; text-transform: capitalize; color: #fff; padding: 7px 15px; -moz-transition: color 0.5s easy 0s; line-height: 1.3; ) .container nav ul li .subNav:hover ( color : #390206; ) .container .section ( clear: both; padding: 10px; ) .container .section article p ( font-size: 16px; color: #488fb8; line-height: 1.3; ) .container .section article header p ( padding-top: 20px; font-size: 20px; color: #333; line-height: 1.3; margin-bottom: .4em; )

Teď potřebujeme oživit rozbalovací nabídka. K tomu nám pomůže nejjednodušší funkce jQuery.

$(function()( $("li.dropdown").hover(function() ( if ($("this:has(div.subNav)"))( $(".subNav").css((" display":"none")); $(".subNav", this).css(("display":"blok")); $("nav ul li").css(("position":"relativní ", "z-index":"1001")); $(this).addClass("aktivní"); ) ), function()( $(".subNav").css(("display":"none ")); $(this).removeClass("aktivní"); $("nav ul li").css(("pozice":"relativní", "z-index":"1")); )) ;));

Pro každý prvek seznamu je možné vytvořit vlastní rozbalovací nabídku: do prvku li umístěte blok s class.subnav a také přiřaďte class.dropdown k samotnému li.

V současné době jsou navigační nabídky jQuery více než jen bloky textu s odkazy. V Ukázal jsem vám, jak můžete vytvořit velmi cool vypadající navigační nabídku pomocí jQuery a CSS3.

Díky síle jQuery můžeme navigační menu proměnit v dynamické menu. Zatímco CSS3 můžete použít pouze k vytvoření dynamické navigace právě teď, jQuery dělá nabídky ještě výkonnějšími.

Kromě dynamických funkcí hraje důležitou roli také design. Už jen proto, že to návštěvníci uvidí jako první, když přijdou na váš web.

Pokud je nabídka neprezentovatelná, poskytne uživatelům špatnou uživatelskou zkušenost. Dobrý design menu zase zvýší kvalitu vašeho webu a poskytne vám lepší uživatelský dojem.

Dnes vám přináším 30 skvělých příkladů navigační nabídky jQuery.

1. Tlačit

Pushy je responzivní navigační nabídka bez plátna využívající transformace a přechody CSS. Funguje skvěle na mobilních zařízeních. Určitě se podívejte na demo a určitě se vám bude líbit.

Demo | Stažení

2.Slinky

Toto je další skvělá nabídka jQuery pro vytváření krásných posouvatelných navigačních seznamů. Jeho charakteristickým rysem je malá velikost zdrojových souborů.

Demo | Stažení

3. Pop Menu jQuery

Jedná se o jednoduché responzivní vyskakovací menu s některými velmi skvělými funkcemi. Když kliknete na ikonu nabídky, zobrazí se okno nabídky s ikonami položek. Podívejte se na ukázku.

Demo | Stažení

4. Posuvníky

Slidebars je framework jQuery pro rychlou a snadnou implementaci aplikačních stylů, aniž by byl vázán na plátno. Posuvníky také zvládají změny orientace a velikosti.

Demo | Stažení

5. Nabídka jQuery Square

Nabídka jQuery, která vykresluje čtvercovou animovanou nabídku webu pomocí jQuery a CSS3. Ověřte si to sledováním ukázky.

Demo | Stažení

6. Navigace perspektivního zobrazení stránky

Tato navigační nabídka jQuery změní stránku na 3D nabídku. Cílem je vytvořit design mobilní aplikace, kde se po kliknutí na ikonu nabídky obsah stránky přesune na stranu a nabídka se přesune do popředí.

Demo | Stažení

7. Slick Nav

Plugin pro vytváření responzivního mobilního jQuery menu s více úrovněmi a flexibilní, ale jednoduché přizpůsobení. Kompatibilní s různými prohlížeči, možnost navigace pomocí klávesnice.

Demo | Stažení

8. Menu

Nabídka jQuery pro plátno a nezávazné aplikace s vyskakovacími podpoložkami. Díky četným možnostem, doplňkům a rozšířením je možné velmi flexibilní přizpůsobení nabídky.

Demo | Stažení

9. Sidr

Plugin jQuery pro vytváření nabídek a snadné přidávání responzivních funkcí. S Sidr můžete vytvářet různé prvky vašeho webu a také responzivní nabídky.

Demo | Stažení

10. slimMenu

slimMenu je malý plugin jQuery, který vám pomůže vyvinout responzivní vrstvené navigační nabídky. Co je na tom skvělé, je, že můžete mít více různých nabídek a všechny budou plně reagovat.

Demo | Stažení

11. Horizontální Nav

Navigační nabídka jQuery, která umožňuje nastavit vodorovnou nabídku přes celou šířku kontejneru. Tento plugin to velmi usnadňuje. Alternativně lze implementovat podporu pro IE7.

Demo | Stažení

12. FlexNav

Toto je první mobilní příklad použití mediálních dotazů a JavaScriptu k vytvoření skvělého vrstveného menu s podporou dotykových obrazovek, efektů při najetí myší a navigace pomocí klávesnice.

Demo | Stažení

13.JQuery Menu-Cíl

Nabídka jQuery, která spouští události, když je kurzor myši nad položkou rozevírací nabídky. Ideální pro vytváření responzivních rozevíracích nabídek, jako je Amazon.

Demo | Stažení

14.Inteligentní nabídky

Plugin nabídky jQuery, který nabízí jednoduchý a intuitivní způsob zobrazení nabídek. Vytváří responzivní seznamy nabídek. Funguje na všech zařízeních!

Demo | Stažení

15. Přehazovačka

Shifter je snadno použitelný zásuvný modul jQuery pro mobily pro vytváření nabídek snímků, které se objeví z pravé strany po kliknutí na tlačítko Shift. Existuje pouze jedna možnost maxWidth ke konfiguraci. Umožňuje nastavit rozlišení/orientaci pro mobilní zařízení.

Demo | Stažení

16. Hamburger

Hamburger je plugin jQuery pro vytvoření nabídky ve stylu aplikace Android, která umístí vyskakovací nabídku na pravou stranu obrazovky. Když se nabídka rozbalí na plnou velikost, pokryje oblast obsahu, ale ne panel akcí.

Demo | Stažení

17.Zaměřte se

Focucss je navigační nabídka jQuery, která vytváří nabídku postranního panelu bez plátna se skvělými funkcemi rozostření, které můžete použít k upoutání pozornosti uživatelů na hlavní části webu a méně viditelných částí, které nejsou tak užitečné.

Demo | Stažení

18. Zásuvka

Drawer je plugin jQuery pro vytváření responzivního, animovaného menu, které se po kliknutí vysune ze strany obrazovky. Podobné funkce jste mohli vidět v aplikacích pro Android.

Demo | Stažení

19. Nabídka Datum

Datmenu je prémiová nabídka reagující na jQuery s různými animačními funkcemi CSS3. Co je na tomto pluginu skvělé, je možnost jeho úplného přizpůsobení pomocí možností js.

Demo | Stažení

20.jPanelMenu

jPanelMenu je krásná a moderní nabídka jQuery, která vám umožňuje vytvořit navigační nabídku panelu s přechody animací CSS3. Styl jPanelMenu připomíná mobilní verze Facebooku a Google. Plugin lze použít pro různé mobilní aplikace.

Demo | Stažení

21. Postranní nabídka

Fly Side Menu je skvělý plugin pro navigační menu, který používá CSS3 k vytvoření postranního menu s 3D transformacemi a přechody.

Demo | Stažení

22. Plugin PageScroll jQuery Menu

PageScroll je vlastní mobilní nabídka jQuery doporučená pro použití na jakémkoli webu a vstupní stránce.

Demo | Stažení

23. Nabídka ikon DD

DD Icon Menu je zásuvný modul jQuery, který vám umožňuje vytvořit svislou nabídku ikon umístěnou na okraji obrazovky s podnabídkami, které se rozbalí při najetí myší.

Demo | Stažení

24. jQuery Mobile Date Navigation

Nabídka jQuery, která vám umožňuje procházet daty ve vybraném rozsahu ( týden, měsíc nebo rok). Ideální pro vyžádání informací pomocí volání AJAX.

Demo | Stažení

25. Navobile

Plugin navigační nabídky jQuery, který velmi usnadňuje vytváření mobilních nabídek. Používá přechody CSS k nastavení pozice nabídky na mobilních zařízeních.

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

• Pod 1
  • test 1
  • test 2
  • test 3
  • test 4
• Sub 2
  • test 1
  • test 2
  • test 3
  • test 4
• Pod 3
  • test 1
  • test 2
  • test 3
  • test 4
• Sub 4
  • test 1
  • test 2
  • test 3
  • test 4
• Pod 5
  • test 1
  • test 2
  • test 3
  • test 4

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ě bude tímto objektem 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, jejíž nadřazený prvek má přiřazenou třídu "menu" a pomocí metody "css("background", "url("down.png")") nastaví vlastnost stylu "background" na hodnotu "url("down. png")". "down.png" je ikona indikující, že seznam lze rozšířit.

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, nad kterým se právě nacházíme (toto z angličtiny this).

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: 314)

Dnes bych chtěl udělat výběr ohledně nové generace navigace pro web - nabídky přes celou obrazovku. Používají se v případech, kdy na stránce není samotná navigace, je zde pouze jedno tlačítko, které po kliknutí otevře menu. Podobný princip je vidět u -frameworku, kdy se navigační lišta již nevejde, blok se seznamem položek menu se jednoduše skryje. Na jeho místě se objeví tlačítko s obrázkem zpravidla tří pruhů. Po stisknutí se zobrazí celá nabídka. Na mnoha moderních webech je menu trvale skryto i na velkých obrazovkách. To se provádí tak, aby se stránka nenačetla. I když byste to nyní neměli dělat na všech svých projektech. Pokud je nabídka druhořadá, můžete ji skrýt, ale pokud máte velký web se složitou strukturou, je lepší tuto možnost nepoužívat. Tak. Přišli jsme na obecný princip fungování, ale tento typ menu je docela standardní, chci něco nového. Není to tak dávno, co jsem si začal všímat stránek, kde navigace nejen vypadává, ale otevře se na celé obrazovce ve vyskakovacím okně. Něco jako oblíbené posuvné panely, ale celá věc zabírá celou plochu pracovního prostoru. Za weby, individuální pluginy jQuery a css3 řešení, o kterých je ve skutečnosti toto téma.
Osobně se mi tato implementace navigačního menu velmi líbí, protože je pohodlná pro uživatele mobilních zařízení a na velkých monitorech vypadá velmi efektně. Stránky od nabídky přes celou obrazovku pluginů jQuery zdarma je stále více a tento koncept se postupně stává trendem.
Tak. Pro vaši pozornost 20 pluginů nabídky jQuery na celou obrazovku ve vyskakovacím okně.

Navigace push na celou obrazovku

Zaoblená animovaná navigace

Navigace perspektivního zobrazení stránky

Celostránkový úvod a navigace

Nabídka Fly Side

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 v moderním webdesignu. 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. Uložíme jej do proměnné bez nutnosti 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 této nabídky, ale místo toho se zaměříme na několik důležitých bodů. 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 na obrázek pozadí používáme funkci linear-gradient(). 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 bloku. 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!