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>
Our template supports three menu types: GK menu Dropline menu Split menu Each of these menus has different characteristic. It is important to know that in order to gain an additional functionality offered by "GK menu", a user has to install a plug
prejsť na článokMilí zákonní zástupci a žáci, do menu Žáci jsme přidali položku Rozvrh hodin.
prejsť na článokAhojte priatelia, v tomto návode vytvoríme animované tlačidlo ponuky. Tlačidlo ponuky je najdôležitejším prvkom webovej stránky a aplikácie. Tlačidlo Menu sa používa na zobrazenie navigačných odkazov. V našom dizajne, keď používateľ umiestni kurzor myš
prejsť na článokBlog typ webovej stránky alebo on line časopisu , ktorý vám umožní publikovať články a rôzne aktuálne články, ktoré si návštevníci môžu prečítať a komentovať . Zobrazenie reklamy reklamy zobrazené na webových stránkach . Grafické reklamy môžu byť stati
prejsť na článokFlowis offers a unique way of setting up permissions for as many different groups of employees as needed. Its complexity allows you to truly set up Flowis and the information in it with precision, making sure everybody can see, access, edit, and delete on
prejsť na článok