s ID "fade", což bude náš černý kryt, který ztlumí obsah po kliknutí na ikonu nabídky.
Konečně zavoláme jQuery od Googlu a náš vlastní soubor skriptů, kde budeme pracovat trochu. Ale nejdřív projdeme styly.
Styling s CSS
Takže nebudeme procházet všemi styly CSS (pokud chcete, můžete na demo zkontrolovat nebo "zobrazit zdroj"), protože se většinou používají pro obecný stylový vzhled stránky, což není cíl tohoto článku. Rozbíjíme to a podíváme se na několik kusů kódu, které jsou důležité. Takže především:
html.no-js #fallback-nav { display: block; }html.no-js .fade { display: none; }html.no-js #navicon { display: none; }html.js #fallback-nav { display: none; }
Uděláme to, když ujistíme, že jestliže uživatelský prohlížeč nemá k dispozici javascript (to je ten název třídy na elementu HTML, který jsme dříve viděli pomocí Modernizra), pak v záhlaví ukážeme # fallback-nav a skryjeme #five DIV i ikonu navigace. To je naše záložní řešení, takže záložní menu musí být navrženo více tradičním způsobem. Toto řešení také skrýváme, pokud je k dispozici jazyk JavaScript, jak vidíte na posledním řádku.
#navicon {float: right;font-size: 2em;text-decoration: none;position: relative;z-index: 9; }#navicon.open { color: white; }#navicon.open:hover { color: #e6e6e6; }#fade {position: fixed;top: 0;right: 0;bottom: 0;left: 0;background: #000;opacity: 0.5; }
Takže v této sekci stylujeme ikonu menu v záhlaví, je to poměrně jednoduché, dává jí relativní pozici a vysoký z-index (což bude užitečné později, když zbytek obsahu zmizí, zůstane na horní). Také měníme barvu na bílou, když má třídu "open", kterou přidáme a odneseme pomocí jQuery. Můžeme také vidět, že jedna divka s idem "fade" se táhne tak, aby vyplnila celou obrazovku a naplnila ji plnou černou barvou s průhledností 50%. Pokud uživatel nemá JavaScript, pak bude tento černý filtr skryt, pokud ne skryjeme jQuery. Nyní se podíváme na samotné menu:
#main-nav {position: fixed;height: 100%;top: 0;right: -250px;background: #222;max-width: 250px;width: 100%;z-index: 5;text-align: center;display: flex;flex-direction: column; }#main-nav a {flex: 1;color: white;border-top: 1px solid #555;text-decoration: none;display: flex;flex-direction: column;justify-content: center; }#main-nav a:hover, #main-nav a.current { background: #3c3c3c; }
Takže v neposlední řadě hlavní nabídka. Nejprve musím dodat, že jde o zjednodušený kód, který bude potřebovat poměrně málo předpon pro dodavatele, než bude kompatibilní s cross-browser. Chcete-li to dosáhnout, doporučuji používat skvělý nástroj, jako je Autoprefixer přidat všechny správné předpony pro vás.
Abychom to řekli, pojďme se podívat na to, co to znamená: nejprve má pevnou pozici v horní části této stránky a negativní 250px napravo. To znamená, že je tam, ale jen "mimo obrazovku" (protože má max. Šířku 250 pixelů). Výška je také 100%, takže vyplňuje celé okno shora dolů. Menu také potřebuje z-index mezi 0 a 9 (nad černým filtrem). Pak je tady, kdy se kouzlo stane, má displej: flex; vlastnost, stejně jako další propojená vlastnost 'flex-direction' (kterou jsme zde nastavili jako "sloupec" namísto toho je výchozí "řádek", což znamená, že dětská flex položka - odkazy v nabídce - vyplní celou výšku jeho rodič v rovných částech).
Takže to bylo všechno zaměřeno na držák menu # main-nav, další při stylizování odkazů jim dáváme flex hodnotu 1. To je to, co dělá spojky vyplňovat celou výšku rovnoměrně. Pak jsou tyto odkazy také zobrazeny samotnou hodnotou "flex", což znamená, že všechny prvky uvnitř odkazů budou ovlivněny. Ujistíme se, že flex-směr je stále 'sloupec' a pak přidáme vlastnost "justify-content: center". To dělá samotný text uvnitř odkazů se středem vertikálně také (to je důvod, proč jsou divs uvnitř ![]()
tagy # main-nav, která není přesně sémantická, ale je velmi rychlý a snadný způsob, jak vertikálně zaměřit položky.)
Nyní nemůžeme vidět nic, co jsme dosud dosud udělali, nyní musíme doplnit naši funkcionalitu pomocí vlastního souboru scripts.js, který jsme nazvali dříve.
Přidání funkce pomocí jQuery
Scénář pro tento efekt je velmi malý a jednoduchý, ale nejdřív to najdeme zde a pak vysvětlíme, co se děje:
$(document).ready(function() {$('#fade').hide();$('#navicon').click(function() {if($('#navicon').hasClass('closed')) {$('body').animate({left: "-250px"} , 400) .css ({"přetečení": "skrytý"}); $ ('# main-nav') animate ({ ) .addClass ('otevřeno'). html ('x'); $ ('# fade') fadeIn (); } else pokud ($ ('# navicon') hasClass ('open')) {$('body').animate({left: "0"} , 400) .css ({"přetečení": "posunout"}); $ ('# main-nav') animate ({ ') .addClass (' zavřeno ') html (' ☰ '); $ (' # fade ') fadeOut (); }});});
Takže nejprve skrýváme černý filtr. Pak další vše, co uděláme, bude obsaženo uvnitř funkce připojené k události kliknutí, která je vázána na odkaz na ikonu nabídky. Když je kliknuto, máme dva různé případy nebo situace; jeden je, když je nabídka již skrytá (jako výchozí stav) nebo jedna, když se zobrazuje nabídka. Takže odkaz na ikonu nabídky má uzavřený název třídy, který jsme přidali, a také jsme otevřeli styly. Naše první "if" prohlášení je, že pokud je odkaz uzavřen (proto výchozí). Pokud tomu tak je, pak celý
element je animován 250px nalevo a zastaví posouvání stránky. # Main-nav div je také animován na místě, měníme jeho správnou hodnotu z -250px na 0. Potom odstraníme třídu "zavřeno" z odkazu a přidáme jeden z "otevřených", stejně jako změna html ze speciálního znaku tří řádků na "x". Konečně vybledneme v našem černém filtru, aby zbytek obsahu byl tmavý. A to je vše! To nám dává otevřený stav nabídky.
Nyní příkaz "else if" je zaměřen na otevřenou třídu na odkazu nabídky. Když to uděláme, děláme to, co jsme udělali dříve, přesuneme tělo zpět do pozice a znovu přesuneme nabídku mimo obrazovku. Odstranění třídy "otevřít" z ikony nabídky, přidání "zavřeno" a změna obsahu zpět na ikonu, stejně jako vymazání našeho #fade div. Pokud vše jde podle plánu, vypadá to takto:
Závěr
Tak to máme! To je jeden z způsobů, jak tento chladný efekt, který vidíme stále víc se stylem moderního webdesignu, zejména v oblasti mobilních návrhů. Tento efekt je příjemné a jednoduché řešení, které nevyžaduje žádné pluginy a může být plně přizpůsobeno potřebám každého projektu. Také to byla šance využít flexbox, stejně jako několik dalších užitečných nástrojů. Dejte mi vědět v komentářích, pokud je něco, co byste udělali jinak nebo jen to, co jste si mysleli!
Doporučený snímek / náhled, obraz posuvných dveří přes Shutterstock.
