V poslední době některé webové stránky, jako To je brigáda a Všichni vy , začali představovat dynamické a animované menu, které se mění na rolovací kolečku. Minimalizace hlavní navigace, která umožní větší prostor pro obsah. V tomto tutoriálu vám vysvětlím, jak si můžete vytvořit toto menu s HTML5, CSS3 a jen trochu jQuery.
Tento druh menu je skvělý, pokud chcete věnovat zvláštní pozornost vašemu obsahu na celém webu, a také vám umožní vytvořit větší a efektivnější navigaci při první návštěvě uživatele na webových stránkách. Můžete lépe zobrazovat značku nebo logo vašeho webu, skvělé pro zobrazení výše uvedeného náhledu; a po zapojení uživatele do návštěvy se menší a minimalizovaná verze skryje jemně, aby se uživatel zaměřil především na váš obsah.
Existuje několik způsobů, jak to udělat. V tomto tutoriálu vám vysvětlím, jak vytvořit pevnou lištu s pevnou šířkou v plné šíři, která má společně s logem výšku, a vytváří tak jednoduchou minimalizovanou verzi prvního. Pokud dáváte přednost, můžete také logo nahradit jinou variantou vašeho loga, jako jsou iniciály nebo ikona, ale pamatujte na to, že konzistence je zde opravdu důležitá, aby uživatel pochopil, jak se element změnil a že jeho hlavní účel je stále původní; navigaci na webu.
Než začneme, můžete hotovo demo nebo stáhnout zde zdroj .
Začneme vytvořením základního kódu HTML, který budeme potřebovat. Budeme se držet opravdu jednoduché struktury HTML5 pro výchozí bod.
How to create a dynamic top bar | Webdesigner Depot Po dokončení našeho původního kódu HTML přidáme do menu kód HTML a další podrobnosti v hlavičce našeho souboru HTML.
How to create a resizing menu bar | Webdesigner Depot Pojďme, aby to menu bylo malé!
Konec linky.
In our
: přidali jsme metaznačku autora pro identifikaci tvůrce souborů; poté jsme zahrnovali slavnou verzi reset.css Eric Meyer, která obnoví téměř každý prvek ve vašem souboru HTML, což vám umožní pracovat na čistějším a jednodušším dokumentu. A protože budeme používat jQuery později, v posledním řádku našeho hlavního prvku jej importujeme přes jQuery CDN.Nejvíce souborů jsem spustil, aby byl dokument co nejjednodušší, ale pamatujte na to, že pokud si přejete stáhnout nejnovější verze všech těchto souborů a použít je lokálně podél souboru HTML, zabráníte tak možným problémům s kompatibilitou verze nebo změny v těchto souborech v budoucnu.
V našem
tag, použijeme výchozí jazyk HTML5