V poslednej dobe sa na webových stránkach začalo objavovať dynamické a animované menu, ktoré zmení veľkosť pri posúvaní obsahu nadol – minimalizácia hlavnej navigácie, aby zostalo viac miesta pre samotný obsah. V tomto príklade si ukážeme, ako si môžete vytvoriť animované menu s HTML5, CSS3 a len s pár riadkami jQuery.
Vytvoríme si navigačnú lištu s menu a s logom na plnú šírku web stránky, ktorá zmení svoju veľkosť pri odscrollovaní / posunutí stránky smerom dolu.
Vytvorenie základnej štruktúry v HTML
<!DOCTYPE HTML><html> <head> <meta charset=UTF-8" /> <title>Animované top menu: fixná a prispôsobivá navigačná lišta</title> </head> <body> </body> </html>
Do základnej HTML šablóny následne pridáme kód pre navigačnú lištu a v nej umiestnené menu a logo. Do HEAD ešte vložíme odkaz na externý kód jQuery.
<!DOCTYPE HTML> <html> <head> <meta charset=UTF-8" /> <title>Animované top menu: fixná a prispôsobivá navigačná lišta</title> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <header class="large"> <nav> <img class="logo" src="https://www.ayris.sk/wp-content/icon/ayris.png"/> <ul> <li><a class="active" href="#">Home</a></li> <li><a href="#">Články</a></li> <li><a href="#">Blog</a></li> </ul> </nav> </header> <section class="stretch"> <p>↓ Odscrollujte nižšie a menu sa zmenší ↓</p> <p> obsah stránky </p> <p class="bottom">↑ Koniec odstavca ↑ <br /><br /></p> </section> </body> </html>
V našom BODY sme použili štandardný HTML5 element HEADER, ktorý bude ohraničovať celú šírku navigačnej lišty a bude „zodpovedný“ za zmeny veľkosti medzi „veľkou a malou verziou“ menu. Element HEADER sme pomenovali triedou s názvom „large“. Element NAV vytvára kontajner pre ponuku s naším jednoduchým menu a logom.
Pretože nemáme žiadny obsah, pridali sme element SECTION s triedou „stretch“, ktorý nám obsah stránky nahradí.
Vytvorenie CSS pre navigačnú lištu, menu a stránku
CSS štýl vložím priamo do hlavičky HTML súboru – takže môžeme začať základným layoutom: do stránky si importujeme Google font (písmo) Ubuntu a nastavíme štýl pre menu a logo.
/* Reset */ html, body, ul, li, img { margin: 0; padding: 0; } /* Importing Ubuntu Font */ @import url(http://fonts.googleapis.com/css?family=Ubuntu); /* Basic layout */ body { background-color: #fefefe; } ul { list-style-type: none; float: right; } li { display: inline; float: left; } img.logo { float: left; }
A pokračujeme štýlom pre SECTION a NAV:
nav{ width: 1140px; margin: 0 auto; } section.stretch{ float: left; height: 1500px; width: 100%; } section.stretch p{ font-family: Ubuntu, sans-serif; font-size: 30px; color: #969696; text-align: center; position: relative; margin-top: 250px; } section.stretch p.bottom{ top: 100%; }
Element NAV nám zabezpečí, aby bolo logo + menu široké 1140px a umiestnené v strede navigačnej lišty HEADER. Triede .stretch sme definovali výšku 1500px, aby nám zastúpila obsah stránky. Zostáva už len definovať navigačnú lištu HEADER:
header{ background: #eeeeee; border-bottom: 1px solid #cccccc; float: left; width: 100%; position: fixed; z-index: 10; } header a{ color: #969696; text-decoration: none; font-family: Ubuntu, sans-serif; text-transform: uppercase; } header a.active, header a:hover{ color: #3d3d3d; } header li{ margin-right: 30px; } /* Sizes for the bigger menu */ header.large{ height: 90px; padding-top: 5px; } header.large img{ width: 400px; height: 74px; } header.large li{ margin-top: 45px; }
HEADER bude slúžiť ako kontajner pre naše menu: tu definujeme farbu pozadia, výšku a šírku navigačnej lišty, atď. Šírka HEADER sa prispôsobí obrazovke (100%) a zostane zafixovaná voči ostatným prvkom na stránke. Nezabudli sme nastaviť z-index, pomocou ktorého dostaneme HEADER na vrchnú vrstvu, aby prekrývala všetky ostatné elementy web stránky.
Okrem nastavenia štýlu pre HEADER sme definovali aj štýl header.large – počiatočný stav hlavičky, ktorá sa zobrazí po načítaní stránky.
Dynamická veľkosť menu
Teraz máme naše menu hotové a naštýlované, ale potrebujeme mu ešte zadať parametre, aby sa zobrazovalo aj v zmenšenej forme. Musíme preto vytvoriť novú triedu pre HEADER v CSS s názvom „small“, ktorá bude zodpovedná za zmenu veľkosti.
/* Sizes for the smaller menu */ header.small{ height: 55px; -webkit-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.3); box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.3); } header.small img{ width: 270px; height: 50px; } header.small li{ margin-top: 17px; }
Keď už máme všetky potrebné štýly definované – pre správnu funkčnosť sa musíme pokúsiť dynamicky zmenit triedu pri scrollovaní hore a dolu, t.j. je potrebné zmeniť v HTML <header class=“large“> na <header class=“small“>.
Zmena CSS triedy s jQuery
Pri všetkých našich definíciach štýlu je potrebné pridať trochu JavaScriptu, aby sme zabezpečili prechod medzi triedami „large“ a „small“. Vzhľadom na to, že triedy chcem vymeniť na základe scrollovania užívateľa – použijeme funkciu v jQuery .scrollTop(). Táto funkcia nám získa alebo nastaví pozíciu scrollovania v pixeloch. Pozícia scrollovania je počet pixelov, ktoré už boli posunuté z pohľadu prehliadača. V tomto prípade stačí len vedieť, aké množstvo pixelov užívateľ odscrolloval (posunul), takže môžeme spustiť náš kód na výmenu tried:
<script type="text/javascript"> $(document).on("scroll",function(){ if($(document).scrollTop()>100){ $("header").removeClass("large").addClass("small"); } else{ $("header").removeClass("small").addClass("large"); } }); </script>
Tento JavaScript je potrebný na zistenie, kedy užívateľ scrolluje web stránku. Akonáhle užívateľ posunie stránku o viac ako 100 pixelov, odstráni sa trieda „large“ a pridá sa nová trieda „small“. Týmto spôsobom sa menu zmení tak, ako sme ho vopred definovali v CSS.
CSS Transitions – animované menu
Ak chceme prepínať medzi triedami v našom menu plynulejšie – použijeme CSS Transitions. Stačí nám použiť tento kus kódu v našom CSS:
header, a, img, li{ transition: all 1s; -moz-transition: all 1s; /* Firefox 4 */ -webkit-transition: all 1s; /* Safari and Chrome */ -o-transition: all 1s; /* Opera */ }
A sme na konci. Môžete si pozrieť kompletný kód alebo DEMO ukážku.
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Animované top menu: fixná a prispôsobivá navigačná lišta</title> <script src="http://code.jquery.com/jquery-latest.js"></script> <style> /* Reset */ html, body, ul, li, img { margin: 0; padding: 0; } /* Importing Ubuntu Font */ @import url(http://fonts.googleapis.com/css?family=Ubuntu); header, a, img, li{ transition: all 1s; -moz-transition: all 1s; /* Firefox 4 */ -webkit-transition: all 1s; /* Safari and Chrome */ -o-transition: all 1s; /* Opera */ } /* Basic layout */ body{ background-color: #fefefe; } ul{ list-style-type: none; float: right; } li{ display: inline; float: left; } img.logo{ float: left; } nav{ width: 1140px; margin: 0 auto; } section.stretch{ float: left; height: 1500px; width: 100%; } section.stretch p{ font-family: Ubuntu, sans-serif; font-size: 30px; color: #969696; text-align: center; position: relative; margin-top: 250px; } section.stretch p.bottom{ top: 100%; } header{ background: #eeeeee; border-bottom: 1px solid #cccccc; float: left; width: 100%; position: fixed; z-index: 10; } header a{ color: #969696; text-decoration: none; font-family: Ubuntu, sans-serif; text-transform: uppercase; } header a.active, header a:hover{ color: #3d3d3d; } header li{ margin-right: 30px; } /* Sizes for the bigger menu */ header.large{ height: 90px; padding-top: 5px; } header.large img{ width: 400px; height: 74px; } header.large li{ margin-top: 45px; } /* Sizes for the smaller menu */ header.small{ height: 55px; -webkit-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.3); box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.3); } header.small img{ width: 270px; height: 50px; } header.small li{ margin-top: 17px; } </style> <script type="text/javascript"> $(document).on("scroll",function(){ if($(document).scrollTop()>100){ $("header").removeClass("large").addClass("small"); } else{ $("header").removeClass("small").addClass("large"); } }); </script> </head> <body> <header class="large"> <nav> <img class="logo" src="https://www.ayris.sk/wp-content/icon/ayris.png"/> <ul> <li><a class="active" href="#">Home</a></li> <li><a href="#">Články</a></li> <li><a href="#">Blog</a></li> </ul> </nav> </header> <section class="stretch"> <p>↓ Odscrolujte nižšie a menu sa zmenší ↓</p> <p> obsah stránky </p> <p class="bottom">↑ Koniec odstavca ↑ <br /><br /></p> </section> </body> </html>