Legutóbb, néhány weboldalak, mint ez Brigade és All You. Kezdtük használni dinamikus animált menü, amely megváltoztatja méretű lefelé görgetve az oldalt. Méretének csökkentésével a navigációs sáv, hogy több helyet hagy a tartalmat. Ebben a leírásban megmutatom, hogyan lehet egy ilyen lebegő menü segítségével HTML5, CSS3 és egy kis jQuery.
Ez a fajta menü nagyszerű, ha azt szeretné, hogy összpontosítson a felhasználó figyelmét a tartalom és ugyanakkor, hogy jelentős navigációs sáv. Ebben az esetben, ha megnyitja az oldalt, akkor jelenjenek meg, például egy nagy logó, lapozunk a lap navigációs sáv csökken összpontosítva a tartalmat.
Számos módja van, hogy hozzon létre egy ilyen menü. Ebben a leírásban megmutatom, hogyan lehet létrehozni egy lebegő menü, amely megváltoztatja a pályán együtt a logó, ami egy egyszerű kicsinyített változata. Azt is helyettesítheti a logó egy másik változata a képet, mint a kezdőbetűit vagy ikont.
Mielőtt elkezdenénk, akkor megjelenik egy demo, vagy töltse le a forráskódot példákat.
Most adjuk hozzá a kódot a menü, valamint néhány egyéb részleteket a fejét a HTML-fájlt.
Hozzon létre egy alap HTML-struktúra
Kezdjük írásban alap HTML-kód, amire szükségünk van. A kiindulási pont egy nagyon egyszerű szerkezet HTML5.
az
tettük a meta tag szerző, hogy adja meg a fájl alkotója; Ezután össze a híres reset.css Erika Meyera visszaállításához az alapértelmezett stílus elemeit HTML-fájl, hogy a munka a tisztább és egyszerűbb dokumentumot. És mivel mi lesz a jQuery később, az utolsó sorban a fej elem csatlakoztattuk a JQuery CDN.
Én csatlakozik a legtöbb fájl távolról, menteni a dokumentumot a lehető legegyszerűbb, de ha úgy tetszik, akkor töltse le a legújabb verzióját az alábbi fájlokat és használja őket helyileg, és ez megakadályozza az esetleges kompatibilitási problémák, vagy módosítja a fájlokat a jövőben.
az
Mi használt szabványos HTML5 elem . mi Úgy nyúlik a teljes szélességű és alkalmazkodni a nagy és a kis változata a menüben. Fejiéceiemben adtunk egy osztály «nagy», amellyel meg tudjuk változtatni bizonyos tulajdonságait CSS menü amikor átvált egy kisebb változata. elem