Také kdo má zájem, můžete se podívat na předchozí cestu pomocí CSS.který je popsán v článku -
Nyní podnikání. Stejně jako v posledním článku, především, pojďme napsat Html. Kód našeho menu. Kód je v tomto článku tak, aby neexistoval žádný zmatek a bylo srozumitelnější. Menu se dvěma položkami a oba mají podmenu.
Pokud máte takový řádek nebo podobný, který již dříve připojil knihovnu, pak byste to neměli udělat znovu.
Ve druhém řetězci skriptu zadáte IDI našeho menu. Pokud používáte tato metoda Do vlastního menu, pak přirozeně mění jméno k sobě. V tento případ tohle je - #Slow_nav..
Můžete také přizpůsobit čas animace. Tento skript pro otevírání a zavírání je 400 milisekund, to je 0,4 sekundy. Pokud se chcete změnit na větší nebo menší.
Poslední krok, přidat styly. Jsou velmi podobné stylům z minulého článku, ne cSS vlastnosti Animace.
#SLOW_NAV\u003e UL (šířka: 500px; okraj: 25px Auto 0;) #slow_nav\u003e UL\u003e li (Seznam styl: žádný; Display: Inline-blok; Pozice: relativní; polstrování: 0;) #slow_nav a (text - Dekorace: žádný;) #slow_nav\u003e UL\u003e Li\u003e A (velikost písma: 18px; polstrování: 5px; barva pozadí: # 333; barva: #fffff;) #slow_nav li ul (pozice: absolutní; Seznam styl: Žádné; text-zarovnání: centrum; nahoru: 15px; velikost písma: 15px; vlevo: 0; marže: 0; polstrování: 0; displej: žádný;) #slow_nav li ul li (barvy pozadí: # 333; Dno: 1px Solid # 888;) #SLOW_NAV Li UL Li: Last-Dítě (Border Dother: Žádný;) #Slow_nav Li UL Li A (polstrování: 5px 12px; barva: #FFF; zobrazení: blok;) #slow_nav li ul Li: Hover (background-color (background-color: # 444;) #slow_nav Li ul li: první dítě (okraj-top: 25px; pozice: relativní;) #slow_nav li ul li: první dítě: dříve (obsah: "; pozice : Absolutní; šířka: 1px; výška: 1px; hranice: 5px solidní transparentní; hranice-bottom-barvy: # 333; vlevo: 10px; nahoru: -10px;)
Také přidány do stylů nový řádekS jakým skript funguje správně. Pro prvek - #Slow_nav li ul. Vlastnost je definována displej: Žádný;. Pokud není přidáno, pak rozevírací nabídka bude zpočátku viditelná a zmizela pouze po kurzoru na něm. Všechny ostatní styly jako předchozí článek.
Stejně jako minulá metoda, lze to použít nejen na samostatný menu, ale také stejné dynamické menu, které vytvářet systém správy, například WordPress.. Chcete-li to udělat, musíte upravit styly a všechny. To znamená, že první HTML kód nemusí používat, pouze styly. Ve stylech musíte nahradit název IYIDI #SLOW_NAV na co bude s vámi, no, je možné něco opravit v maličkostech. Nezastavím se podrobně. Pro každý případ potřebujete osobní přístup, takže je mi líto 🙂
To je vše, díky za vaši pozornost. 🙂.
V tomto článku budeme rozvíjet jednoduchý rozevírací nabídka Pomocí jquery. Pro začátek podívejte se na demo soubor. Doufáme, že vy i trochu znáte základy jQuery a CSS. Klíčové aspekty vytváření této rozevírací nabídky jsou použití CSS: pozice, horní, levé, parametry Z-indexu.
Pomocí těchto parametrů si můžeme být jisti, že naše menu se zobrazí přesně pod odkazem, na kterou byl kurzor zveřejněn, a to určitě bude všechny ostatní prvky. Budeme také zobrazit menu pro zobrazení, když se vznáší kurzor a zmizel, když je kurzor přiřazen k straně. Chcete-li tyto události implementovat, použijeme jQuery: Mouseenter a MouseEave funkce. A to je vše, co potřebujeme vytvořit rozevírací nabídku!
Demo souboru finální výsledek a odkaz ke stažení
HTML kód
Podívejte se na kód HTML rozevírací nabídky:
Jak vidíte, zde použijeme neuspořádané seznamy pro implementaci položek menu. Každá odkazová nabídka je přiřazena třída rozevírací nabídky a rozevírací nabídka se vztahuje třída Sub-Link. Jména tříd budou použity jQuery, aby se určilo, které menu je třeba zobrazit.
CSS kód
Podívejte se na kód CSS:
/ * Css pro rozevírací menu Start * /
Ul.
{
Seznam styl: žádný;
Polstrování: 0px;
Margin: 0px.
}
uL Li.
{
Displej: Inline;
Plavat vlevo;
}
uL Li A.
{
Barva: #ffffff;
Pozadí: # 990E00;
Právo okraje: 5px;
Hmotnost písma: tučně;
Velikost písma: 12px;
Font-Family: Verdana;
Textová dekorace: Žádný;
Displej: blok;
šířka: 100px;
Výška: 25px;
Výška čáry: 25px;
Text-ALIGN: CENTER;
-WebKit-hraniční poloměr: 5px;
-Moz-hraniční poloměr: 5px;
Hranice: 1px Solid # 560E00;
}
uL Li A: Hover
{
Barva: #cccccc;
Pozadí: # 560E00;
Hmotnost písma: tučně;
Textová dekorace: Žádný;
Displej: blok;
šířka: 100px;
Text-ALIGN: CENTER;
-WebKit-hraniční poloměr: 5px;
-Moz-hraniční poloměr: 5px;
Hranice: 1px Solid # 000000;
}
ul li.sublinks A.
{
Barva: # 000000;
Pozadí: # f6f6f6;
Border-dno: 1px Solid #cccccc;
Hmotnost písma: normální;
Textová dekorace: Žádný;
Displej: blok;
šířka: 100px;
Text-ALIGN: CENTER;
Margin-top: 2px;
}
ul li.sublinks a: vznášet se
{
Barva: # 000000;
Pozadí: # ffefc6;
Hmotnost písma: normální;
Textová dekorace: Žádný;
Displej: blok;
šířka: 100px;
Text-ALIGN: CENTER;
}
ul li.sublinks.
{
Displej: Žádný;
}
/ * Css pro rozevírací menu konec * /
Většina kódů CSS se používá k formátu menu (můžete poskytnout vzhled Menu na vlastní diskreční pravomoc), ale zde jsou také některé důležité body:
1 - Smazání záložek podle seznamu Seznam: Žádný;
2 - Víme, že seznamy jsou blokové prvky a jsou vždy zobrazeny ve vertikálním pořadí. Aby byly horizontálně, připojili jsme je parametr malých písmen a zarovnejte je na levé straně pomocí kódu:
Displej: Inline;
plavat vlevo;
3
- Ve výchozím nastavení jsou odkazy nižší než prvky. Přepíšením je do blokových prvků pomocí displeje: blok (takže se nyní můžeme zeptat na hodnotu šířky).
4 - skrýt všechny nabídky přes:
Ul li.sublinks.
{
displej: Žádný;
}
jquery.
Připravte se dříve, kdy byly rozbalovací nabídky implementovány drsným javaScript kódKromě toho došlo k bandovi zbytečného kódu. Ale dnes vše, co potřebujeme, je jQuery:
$ (Funkce () ()
Submenu.css ((
Pozice: "absolutní",
ZINDEX: 1000.
});
Submenu.stop (). Slididown (300);
$ (toto) .slideup (300);
});
});
});
Velmi zajímavá a jednoduchá věc. Vysvětleme vám, jak to funguje. Chcete-li začít, a jako obvykle pokrýváme náš kód na jQuery Controller:
$ (Funkce () ()
...
});
Náš kód je aktivován, když je kurzor myši neviditelný (funkce MousEnterer) k položce, ke které je přiřazena třída rozevírací nabídky ($ (". Dropdown")). V našem případě se jedná o odkaz na menu:
$ (Funkce () ()
$ ("Dropdown"). MousEnterer (funkce () ()
........
});
});
Ujistěte se, že schováváme (skrýt ()) všechny předchozí otevřené menu před kurzorem myši hodí následující odkaz:
$ (". Sublinks"). Stop (false, true) .hide ();
Věnujte pozornost funkci STOP, která nám pomáhá zobrazit pouze jednu rozevírací nabídku v okamžiku, kdy se kurzor myši přesune podél různých odkazů do menu. Pokud tuto funkci nepoužíváte, každý rozevírací nabídka zůstane otevřená, dokud nebudeme plně vybrání kurzoru myši z menu. To vytvoří nějakou podšívku, takže bychom to měli vyhnout. Dále vezmeme aktuálně otevřenou rozevírací nabídku a přiřaďte proměnnou:
Var podnabídky \u003d $ (toto) .parent (). Další ();
To je to, co bude v HTML kódu:
Když je kurzor myši na odkazu s třídou rozevírací třídy, pohybujeme se zpět pomocí rodiče () a zastavte na "li", a pak s dalším () se ukázáme být na požadovaném rozevíracím menu a "li "Bude již s třídou dílčích odkazů (Sublinks). JQuery tedy dělá proces pro nalezení toho, co se rozevírací nabídka zobrazí, když je kurzor myši na konkrétním odkazu.
Submenu.css ((
pozice: "absolutní",
top: $ (this) .Offset (). Nahoru + $ (toto) .Height () + "px",
vlevo: $ (this) .Offset (). Vlevo + "px",
zINDEX: 1000.
});
Kód je velmi důležitý, protože nás zaručuje, že rozevírací nabídka je zobrazena přesně pod určitým odkazem. Pokud je pozice vystavena na absolutní, můžeme položku umístit v libovolné oblasti naší stránky. Dále definujeme horní polohu odkazu, na kterou se kurzor vznášející s $ (tichý). FFFSET (). Nahoru (to odkazuje na aktuální položku menu, ke které je kurzor indukován), a přidejte k němu do výšky Je to tak, že menu se zobrazí přesně odkaz. Něco, co se děje s levým parametrem. Pak používáme Z-index, který je přesvědčen, že naše menu se zobrazí v horní části ostatních prvků.
Submenu.stop (). Slididown (300);
Samozřejmě, můžete použít jiné možnosti pro animaci typu Fadein, animace s vlastním stylem a tak dále.
Nyní musíte odvrátit pozornost od konceptu zobrazení rozevírací nabídky a uskrýt se. Potřebujeme tento výňatek kód:
Submenu.mousealeave (funkce () ()
$ (toto) .slideup (300);
});
Chcete-li skrýt rozevírací nabídku, používáme Slideup, Antonym na Slidedown. Zvažte skutečnost, že podnabídka je proměnná, kterou jsme vytvořili určit konkrétní rozevírací nabídku.
Měli jsme tedy atraktivní single-level rozbalení menu na jquery..
Aby bylo možné napsat navigaci ve formě vertikální rozevírací nabídky na jQuery s rozevíracím seznamem podkategorie, je nutné pochopit principu provozu tohoto mechanismu. Nejdříve však budeme analyzovat navigační strukturu:
Navigace
Jak jste již uhodli, naše rozevírací nabídka je postavena na základě označených seznamů. Když se vznáší kurzor myši na značku
- test 1.
- test 2.
- test 3.
- test 4.
Ale jak se ptáte? Ano, všechno je opravdu velmi jednoduché. Chcete-li začít, pojďme se zabývat tabulkou stylů našeho navigačního seznamu, bude to vypadat takto:
Tělo (pozadí: RGB (244, 244, 244); font-face: verdana; hmotnost písma: 100;) / * --- navigace --- * / #MENU (šířka: 200px; marže: 0; polstrování: 2PX;) #menu Li (typ seznamu styl: žádný;) .men (poloha: relativní; pozadí: čokoláda; pozadí: -Moz-lineární gradient (top, rgb (198, 255, 242), # 2AC4B3) ; Pozadí: -webkit-lineární gradient (top, rgb (198, 255, 242), # 2AC4b3); pozadí: -O-lineární gradient (top, rgb (198, 255, 242), # 2AC4B3); hranice : 1PX Solid # 2AC4B3;) .menu: Hover (pozadí: # 00c; pozadí: -Moz-lineární gradient (top, rgb (230, 230, 230), # 0cbfab); pozadí: -webkit-lineární gradient ( Top, RGB (230, 230, 230), # 0CBFAB); pozadí: -O-lineární gradient (top, RGB (230, 230, 230), # 0CBFAB);) .menu Rozpětí (šířka: 11px; výška: 11PX; zobrazení: blok; poloha: absolutní; nahoru: 8px; vpravo: 10px; kurzor: ukazatel;) .menul (šířka: 150px; okraj: 0; polstrování: 1px; poloha: absolutně; nahoru: -1px; levice: 198px;) .menu ul li (pozadí: čokoláda; pozadí: -Moz-lineární gradient (top, RGB (198, 255, 242), # 2AC4B3); Pozadí: -Webkit-lineární gradient (top, RGB (198, 255, 242), # 2AC4B3); Pozadí: -o-lineární gradient (top, rgb (198, 255, 242), # 2AC4B3); Hranice: 1px Solid #FFF; ) .Menu ul li: vznášet se (pozadí: # 00c; pozadí: -Moz-lineární gradient (top, rgb (230, 230, 230), # 0CBFAB); 230, 230, 230), # 0CBFAB); pozadí: -O-lineární gradient (top, RGB (230, 230, 230), # 0cbfab);) .men A (polstrování: 5px; zobrazení: blok; Dekorace: Žádný; Barva: bílá;) .men A: Hover (barva: bílá;) / * --- Konec --- * /
Ze stylu listu je vidět, že zpočátku rozevírací seznam není skrytý, ale tento okamžik budeme opraveny pomocí:
$ (Dokument) .Ready (funkce () ("menu ul"). Skrýt (); $ ("menu span"). Css ("pozadí", "URL (" down.png ")"); $ ("# Menu li"). Hover (funkce () (funkce) ($ (to) .Children ("ul"). Show (); / * ekvivalentní $ ("ul", to) .Show (); * / $ (); Toto) .find ("SPAN"). CSS ("Background", "URL (" pravý.png ")"); / * ekvivalentní $ ("SPAN", toto) .css ("pozadí", "URL (" Pravý.png ")"); * /), funkce () ($ (Toto) .Children ("ul"). Skrýt (); / * ekvivalentní $ ("ul", to) .hide (); * / $ (toto) .Find ("SPAN"). CSS ("pozadí", "URL (" down.png ")"); / * $ ("SPAN", toto) .css ("pozadí", "URL (" pozadí ",") "Dole.png") "); * /)))))
Nyní budeme analyzovat kód jQuery rozevírací nabídky, protože Možná někdo nebude zcela pochopen. Na samém počátku je předepisována následující stavba:
$ (Dokument) .Ready (funkce () ())
Je předepsáno příkazy, které je třeba provést po stažení celé stránky. To se děje tak, že neexistuje žádný jiný druh chyb, pokud není možné najít žádný objekt kvůli skutečnosti, že je trite, ještě není naloženo.
$ ("Menu ul"). Skrýt ();
Co znamená tento záznam? Design "$ ()" umožňuje vybrat prvky. V důsledku toho, na samém počátku, musíme skrýt svůj rozevírací seznam. Bereme design "$ ()" a psát v něm, kterého máte zájem. V našem případě bude tento objekt seznam S třídou "menu". Dále předepisujeme metodu "Skrýt ()", která umožňuje skrýt objekt, který máte zájem.
$ (". Menu Span"). CSS ("pozadí", "URL (" down.png ")");
Co dělá? Hledá značku na rodičovský prvek, který je přiřazen třídu "Menu" a pomocí metody "CSS" ("pozadí", "URL (" down.png ")") ", přiřazení" pozadí " Styl vlastnost "URL (" Dolů. PNG ")". "down.png" je ikona, která ukazuje, že seznam může otevřít.
Pak je zde design, který zveřejní náš seznam, vypadá to takto:
$ ("# Menu li"). Hover (funkce () (() () (() ()) .Children ("ul"). Show (); $ (toto) .find ("rozpětí"). Css ("pozadí", " URL ("pravý.png") ");), funkce () ($ (this) .Children (" ul "). Skrýt (); $ (this) ..find (" SPAN "). CSS (" pozadí "). , "URL (" Downg ")");)
Hledáme značku na rodičovský prvek, který je přiřazen ID \u003d "menu". Další je metoda "vznášení" a v závorkách dvě funkce. První funkce bude prováděna při přechodu kurzoru myši a druhá, která má být provedena, pokud kurzor myši opustí položku, o kterou máte zájem.
První funkce je napsána:
$ (toto) .Children ("UL"). Show (); $ (toto) .Find ("SPAN"). CSS ("pozadí", "URL (" pravý.png ")");
Design "$ (this)" znamená, že se zajímáme o tuto položku, na kterou jsme tento moment Přinesl (to z Anglie. Toto). A přinesli jsme značku
Poté, tag hledáme potomky, jmenovitě: tag a má pozadí na jinou ikonu.
Poté je funkce předepsána, což dělá vše, jak bylo původně, po kurzorech myši opustí položku seznamu:
Funkce () ($ (Toto) .Children ("UL"). Skrýt (); $ (toto) .Find ("SPAN"). CSS ("pozadí", "URL (" downg ")");)
Chcete-li provést písemný kód na jQuery a naše rozevírací nabídka fungovala správně, musíte si stáhnout knihovnu z jQuery.com a připojit ji, mluvit po otevření značky
Čára.A je to! Závěrem si chci poznamenat, že pokud je vaše stránky docela zábavné, pak je možné, že skript začne příliš pozdě (místo bude načteno dlouhou dobu) a uživatelé uvidí, jak nejprve odhalí úplně, ale pouze skryje To, vidíte, velmi ošklivá. Proto je nutné vydržet všechny příkazy jQuery pro tento design: "$ (dokument) .Ready (funkce () () ())". Bude to vypadat takto:
$ (Dokument) .ready (funkce () () ()) $ (". Menu ul"). Skrýt (); $ (". Menu Span"). CSS ("pozadí", "URL (" down.png ")"); $ ("# Menu li"). Hover (funkce (funkce () () ("ul). Zobrazit (); $ (toto) .find (" SPAN "). CSS (" Background "," URL ("pravý.png") ");), Funkce () ($ (Toto) .Children (" UL "). Skrýt (); $ (toto) .Find (" SPAN "). CSS (" pozadí "," URL ("Downg") ");))
Připojení našeho skriptu musí být převedena ze značky
Nejjednodušší, před zavírací značkouNebo můžete připojit skript ihned po označeném seznamu.(Pád: 314)
S pomocí jquery- classic jsou články na toto téma napsány. Snažil jsem se o něco více komplikovat úkol, přidáním schopnosti zůstat oddíly do menu otevřené (nebo uzavřené, v závislosti na volbě uživatele) při pohybu prostřednictvím webu.
Pro vyřešení tohoto úkolu jsem se rozhodl použít zásuvný plugin jquery cookie. Výhodou tohoto pluginu je, že operace se provádí na straně klienta, která zase snižuje zatížení na serveru. Minus- Pokud je uživatel zakázán JS, plugin nebude fungovat. Ale tato volba Nepovažuji, protože pak celý bod rozevíracího menu zmizí. Začněme to.
Chcete-li začít, musíme připojit samotný rámec JQuery a plugin jquery. Cookie:
Kód: HTML.
Dále značka. Bude to vypadat jako jednoduchý seznam, nic nadpřirozeného. Jediná si, že ve značce
Musí být titul, když kliknete na které menu vypadne:
Kód: HTML.
No, a tak neurčitě. Teď je nejzajímavější. V kódu přidám trochu komentářů, abychom byli zhruba pochopitelné, Chopach
Kód: JS.
$ (dokument) .ready (funkce () ()
if ($. Cookie ("num_open_ul")) (// zaškrtnuto, zda je v cookies
if ($. cookie ("num_open_ul")! \u003d 0) (// a tento záznam není roven 0
var nite_eq \u003d parseint ($. cookie ("num_open_ul") - 1);
$ (". navigace_body"). eq (number_eq) .Show (). Preveall ("# navigace H2.Navigation_head: První"). AddClass ("Active_Navigation");
}
};
$ ("# navigace H2.Navigation_head_head"). Klepněte na tlačítko (Funkce () (// Při kliknutí, tato funkce bude fungovat
Pokud (! $ (toto) .Next (). je (": Viditelné")) (
$ ("Div.Navigation_body"). Sourozenci ("div.navigation_body"). Slideup (500); // Pokud ostatní otevřou, zavřely vše kromě aktuálního
}
$ (toto) .Next ("Div.Navigation_body"). Slidetoggle (500) .Siblings ("div.navigation_body"). Slideup (500);
$ (toto) .toggleclass ("Active_Navigation"). Sourozenci ("# navigace H2.Navigation_head"). Odmítnutí ("Active_Navigation"); // Otevřená přidaná třída ke změně stylu
Osískání (fncookie, 600); // Záznam v cookie se zpožděním, takže skript se podařilo dokončit práci (500 MS-Speed, zpoždění, 600ms)
});
Funkce FNCOOKIE () (// Záznamová funkce sama
var nite_open_ul \u003d 0;
var i \u003d 0;
$ ("div.navigation_body"). Každá (funkce () ()
I ++;
if ($ (toto) .is (": viditelné")) (
Number_open_ul \u003d i;
}
$ .Cookie ("num_open_ul", number_open_ul, (vyprší: 3, cesta: "/"); // Uložte 3 dny na celý web.
});
}
});
To znamená, že pokud uživatel otevřel nabídku, opustil web a po několika dnech pokračoval na něj, menu je stále otevřeno.
No, konečně máme malý čárový kód: vlastně, CSS styly. Opravdu děláte na svém chuti, v příkladu jsem udělal připravený design z jednoho z projektů
Kód: CSS.
#Navigation (
Margin: 80px Auto;
šířka: 250px;
}
#Navigation h2, #navigation h2.Navigation_head (
Velikost písma: 18px;
Font-Hmotnost: odvážnější;
Barva pozadí: # FFB6C1;
Pozadí obrázku: -webkit-gradient (lineární, 50% 0,50% 100%, zastavení barev (0%, # ffe9e9), color-stop (100%, # ffb6c1));
Obrázek na pozadí: -webkit-lineární gradient (# ffe9e9, # ffb6c1);
Pozadí obrázku: -Moz-lineární gradient (# ffe9e9, # ffb6c1);
Obrázek na pozadí: -O-lineární gradient (# ffe9e9, # ffb6c1);
Obrázek na pozadí: lineární gradient (# ffe9e9, # ffb6c1);
Polstrování: 5px 3px 6px 3px;
Marže: Auto;
Pozice: Relativní;
}
#Navigation h2.Navigation_head: Po (
Pozice: absolutní;
Vpravo: 5px;
Barva: # 550000;
Obsah: "ČSSB";
}
#Navigation H2: Hover, #navigation H2.Navigation_head: Hover (
Kurzor: ukazatel;
}
.Active_Navigation (
Background-Image: -Webkit-gradient (lineární, 50% 0,50% 100%, barva-stop (0%, # ffb6c1), color-stop (100%, # ffe9e9))! Důležité;
Pozadí obrázku: -webkit-lineární gradient (# ffb6c1, # ffe9e9)! Důležité;
Pozadí obrázku: -Moz-lineární gradient (# ffb6c1, # ffe9e9)! Důležité;
Obrázek na pozadí: -O-lineární gradient (# ffb6c1, # ffe9e9)! Důležité;
Obrázek na pozadí: lineární gradient (# ffb6c1, # ffe9e9)! Důležité;
}
.Active_Navigation: Po (
Pozice: absolutní;
Vpravo: 5px;
Obsah: "CSSD"! Důležité;
}
.Navigation_body (
Displej: Žádný;
}
#Navigation ul (
marže: 0;
Polstrování: 0;
Seznam styl typu: žádný;
}
* Html #navigation ul li (
Výška: 1%;
}
#Navigation div.Navigation_body ul li (
marže vlevo: 10px;
}
#Navigation a (
Font-Family: "Times New Roman";
Displej: blok;
Barva: # 918871;
Polstrování: 3px;
Barva pozadí: # FFE3E0;
Border dno: 1px Solid #FFF;
Textová dekorace: Žádný;
}
#Navigation A: Hover (
Barva: # 585858;
Barva pozadí: # FFB6CC;
}
Pokud někdo upozornil pozornost, pokusil jsem se použít vlastnost obsahu: +/- s nabídkou uzavřené / otevřené, ale můžete přidat obrázek nebo jiný design. Zobrazit příklad toho, co jsme udělali, můžete
Jako vždy jsem připraven poslouchat otázky a pokusit se o ně odpovědět. Všechno nejlepší, vše nejlepší.
V této lekci vám ukážeme, jak vytvořit boční rozevírací nabídku pro dokonce jednoduchou navigaci na webu. Takové menu je populární trend v moderním webu. Tento typ menu se používá na mnoha místech. S ním se můžete zbavit chaosu na stránkách projektu, aby byl čitelnější, zaměřit se pozornost uživatelů na hlavním obsahu.
To je vynikající způsob, jak dosáhnout minimalismu bez rušivých faktorů. Dnes budeme vytvářet takový menu sami.
Chcete-li vytvořit navigační menu, nejprve přečtěte nastavení:
Nejdříve musíte stáhnout normalizovat.css a nakonfigurovat výchozí styly prohlížeče, zkontrolujte, zda menu vypadá stejně ve všech prohlížečích. Chcete-li zobrazit šipku před položkou menu s dílčí klauzule, použijeme fontawesome. Pro přepínání tříd v menu, načíst jQuery a přesunout celý kód jQuery kód v Script.js. Ten odkaz je hlavní tabulkou pro webový projekt.
Ikona Hamburger.
Ikona Hamburger je společným atributem navigace webu. Často je vytvořen pomocí písma ikon, jako je fontawesome, ale v této lekci přidáme nějakou animaci, a proto to vytvoříme od nuly. Naše ikona Hamburger je značka rozpětí obsahující tři třída DIV, zobrazena ve formě horizontálních pásů.
Styly vypadají takto:
Tlačítko přepínat (poloha: pevná; šířka: 44px; výška: 40px; polstrování: 4PX; přechod: .25s; Z-index: 15;) .toggle-tlačítko: vznášení (kurzor: ukazatel;) .toggle-tlačítko .menu -BAR (pozice: absolutní; okraj-poloměr: 2px; šířka: 80%; přechod: .5s;) .toggle-tlačítko .menu-bar-top (hranice: 4px solid # 555; hranice-dno: žádný; nahoru: 0;) .toggle-Button .Menu-bar-Střední (výška: 4px; barva pozadí: # 555; okraj-top: 7px; okraj-dno: 7px; top: 4px;) .Toggle-tlačítko .menu-bar -Bottom (hranice: 4px solidní # 555; hranice-top: žádný; top: 22px;) .button-otevřený .men-bar-top (transformace: otočení (45deg), přeložit (8px, 8px); přechod: .5s; ) .Button-Open .Menu-bar-Středa (transformace: Přeložit (230px); Přechod: .1s Snadná opacita: 0;) .button-Open .Menu-bar-dno (transformace: otočení (-45deg) Přeložit (8px, -7px); Přechod: .5s;)
Ikona má pevnou polohu a nezmění ji při posouvání stránky. Také má Z-index 15, což znamená, že bude vždy nad jinými prvky. Skládá se ze tří barů, z nichž každý sdílí jiné styly. Proto budeme přesouvat každý bar do třídy.menu-bar. Zbytek stylů se pohybuje oddělené třídy. Kouzlo dochází, když přidáme další třídu ve značce SPAN, která je otevřená. Přidáme to pomocí jquery. následujícím způsobem:
$ (Dokument) .Ready (funkce () (VAR $ TOGLEBUTTON \u003d $ (". TOGLE-TLAČÍTA"); $ TOGGLEBUTON.ON ("Click", funkce () ($ (Tento) .toggleclass (tlačítko " );));));
Pro ty, kteří nejsou obeznámeni s JQuery - inicializujeme proměnnou s $ TOGGLEBUTTON, která obsahuje naši ikonu. Uložíme jej v proměnné bez nutnosti použití JavaScript.. Pak vytvoříme posluchač událostí, který bere v úvahu kliknutí na ikonu. Pokaždé, když uživatel klikne na ikonu hamburger, posluchač událostí spustí funkci toggleclaslass (), která přepne Class.button-Open.
Je-li přidána otevřená třída.Button, můžeme ji použít ke změně metod zobrazení položek. Používáme CSS3 přeložit () a otočte () funkce tak, že horní a dolní pásy otáčejí 45 stupňů, a střední tyč se posunula doprava a zmizelo. Zde je to, jaká animace lze konfigurovat:
Běžné navigační menu
Nyní, když máte ikonu hamburger, udělejme to užitečné a vytvoří rozevírací nabídku, když na něj kliknete. Takto vypadá značka menu:
Nyní nebudeme bydlet na každý styl pro toto menu, místo toho se zaměřte na několik důležité momenty. Nejprve je to Div and Class.menu-wrap. Podívejte se na jeho styly:
Menu-wrap (barva pozadí: # 6968Ab; poloha: pevná; top: 0; výška: 100%; šířka: 280px; okraj vlevo: -280px; velikost písma: 1em; font-hmotnost: 700; přetečení: Auto Přechod: .25s; Z-index: 10;)
Poloha je pevná, takže při rolování stránky menu zůstane vždy ve stejné poloze. Výška 100% umožňuje nabídku pro obsazení veškerého vertikálního prostoru na stránce. Vezměte prosím na vědomí, že levé pole marže má záporné číslo rovné šířce menu. To znamená, že menu zmizí z okna zobrazení. Chcete-li to znovu viditelné, vytvoříme další třídu Toggler s jQuery. Náš javaScript soubor Bude vypadat takto:
$ (Dokument) .ready (Function () (VAR $ TOGGLEBUTTON \u003d $ (". TOGLE-TLAČÍTKO"), $ MENUSWRAP \u003d $ (".". ($ (toto) .toggleclass (tlačítko "TLAČÍTAČ); $ menuwrap.toggleclass (" menu-show ");));)););));
Přidání další proměnné $ menuwrap, která obsahuje menu shell. Použijte stejný obslužný program události, který jsme vytvořili dříve. Pouze tentokrát přepínáme dvě třídy: jeden pro tlačítko a jeden pro menu shell. Hodnota levého pole třídy.menu-show je 0, přidá efekt stínu.
Menu-show (Margin-Left: 0; Box-Shadow: 4px 2px 15px 1px # b9adad;)
Podnabídka a odkazy
Můžete si všimnout, že v jednom ze seznamu položek se nachází třída.menu-položky-děti, které obsahují podnabídku. Kromě toho je značka Span umístěna okamžitě pod odkazem s třídou.SideBar-menu-šipku.
sPAN má :: po pseudo-elementu a obsahuje fontawesome šipku. Ve výchozím nastavení je podnabídka skryta a bude viditelná pouze při stisknutí šipky. Zde je, jak to můžeme udělat s jQuery:
$ (Dokument) .Ready (funkce () (VAR $ Sidebarrumwrow \u003d $ ("Sidebar-menu-menu-šipka"); $ Sidebararrow.Click (funkce () (() ($ (to) .next (). Slidetoggle (300);) );));
Když klikujeme na šipku, nazýváme funkci, která je zase zaměřena na další položku ihned po rozpětí (v našem případě je podnabídka) a je viditelný. Funkce, kterou používáme, je slidetoggle. To způsobí, že položka se zobrazí a zmizí. Funkce v našem příkladu má jeden parametr - doba trvání animace.
Položky menu v příkladu mají vznášení efekt. Je vytvořen pomocí :: po pseudo-elementu. Kód vypadá takto:
Menu-Sidebar Li\u003e A :: Po (Obsah: "; Displej: Blok; Výška: 0.15EM; Poloha: absolutní; nahoru: 100%; šířka: 102%; vlevo: 50%; transformace: translate (-50%) ; Pozadí obrazu: lineární gradient (vpravo, transparentní 50,3%, # fffa3b 50,3%); přechod: pozice na pozadí .2s .1s Snadno-out; velikost pozadí: 200% Auto;) .Menu-SideBar li\u003e A: Vznášet se :: Po (pozice na pozadí: -100% 0;)
:: Po pseudo-elementu obsahuje prvek na úrovni bloku v dolní části každého článku s celou šířkou a 0,15EM výškou. Vypadá to všechno jako podtržítko. Zvláštností je, že nejsme jen používat barvu pozadí na linku, používáme funkci lineárního přechodu () na obrázku na pozadí. Ačkoli tato funkce je navržena tak, aby vytvořila barvy, můžeme změnit barvu zadáním požadovaného zájmu.
Menu-Sidebar Li\u003e A :: Po (doprava, transparentní 50,3%, # fffa3b 50,3%););););)
Half line je zde transparentní a druhá polovina je žlutá. Děláme pozadí na pozadí 200%, zdvojnásobíme šířku našeho bloku. Transparentní část nyní trvá celou šířku, a žlutá část se pohybuje doleva a je neviditelná. Změníme pozici pozadí při vzniku na -100%. Žlutá část se nyní viditelná a transparentní - skrytá.
Místo průhledné části můžete použít jakoukoliv jinou barvu. Můžete také experimentovat s přechody.
Každý z prvků uvažovaných USA pracuje jako celek. Takové menu můžete vytvořit pomocí libovolné stránky návrhu z kolekce templlatemonster. Jak vidíte, udělejte to jednodušší, než si dokážete představit. Hodně štěstí při vytváření profesionálních a uživatelsky příjemných míst!
