Ostatnio niektóre witryny, takie jak To jest Brygada i Cały ty , zaczęliśmy wyświetlać dynamiczne i animowane menu, które zmienia rozmiar po przewinięciu. Minimalizowanie głównej nawigacji, aby zapewnić więcej miejsca dla treści. W tym samouczku wyjaśnię, jak samodzielnie utworzyć to menu za pomocą HTML5, CSS3 i tylko trochę jQuery.
Ten rodzaj menu jest świetny, jeśli chcesz skupić się na swoich treściach w całej witrynie, a także pozwala stworzyć większą i bardziej efektowną nawigację po pierwszej wizycie użytkownika na stronie internetowej. Możesz lepiej pokazać markę lub logo swojej witryny, idealne dla widoku z góry; i po angażowaniu użytkownika w wizytę, mniejsza i zminimalizowana wersja ukrywa się subtelnie, pozwalając użytkownikowi skupić się głównie na twoich treściach.
Jest na to kilka sposobów. W tym samouczku wyjaśnię, jak utworzyć stały pasek menu o pełnej szerokości, który zmienia wysokość wraz z logo, tworząc prostą zminimalizowaną wersję początkowej. Jeśli wolisz, możesz również zastąpić logo obrazem inną odmianą logo, na przykład inicjałami lub ikoną, ale pamiętaj, że spójność jest tutaj bardzo ważna, aby użytkownik zrozumiał, w jaki sposób element się zmienił i jaki jest jego główny cel. jest nadal oryginalny; poruszanie się po stronie internetowej.
Zaczniemy od utworzenia podstawowego kodu HTML, który będzie nam potrzebny. Będziemy trzymać się naprawdę prostej struktury HTML5 dla punktu wyjścia.
How to create a dynamic top bar | Webdesigner Depot
Po zakończeniu naszego początkowego kodu HTML dodamy kod do menu oraz kilka innych szczegółów w nagłówku naszego pliku HTML.
How to create a resizing menu bar | Webdesigner Depot
Zróbmy to menu małe!
Koniec kolejki.
In our
: dodaliśmy metatag dla autora, aby zidentyfikować twórcę pliku; potem włączyliśmy słynny reset.css Erica Meyera, który zresetuje prawie każdy element w pliku HTML, dając ci łatwiejszy i bardziej przejrzysty dokument do pracy. A ponieważ będziemy używać jQuery później, w ostatniej linijce naszego elementu head importujemy go przez jQuery CDN.
Ułożyłem wiele odsyłaczy do większości plików, aby dokument był jak najprostszy, ale pamiętaj, że jeśli wolisz, możesz pobrać najnowsze wersje wszystkich tych plików i używać ich lokalnie wzdłuż pliku HTML, co pozwoli uniknąć problemów z kompatybilnością wersji lub zmiany w tych plikach w przyszłości.
W naszym
tag, użyliśmy domyślnego HTML5 element. Nasz będzie pełnej szerokości i będzie odpowiedzialny za zmiany między dużymi i małymi wersjami menu. Dajemy nasze klasa o nazwie "large", abyśmy mogli zmienić niektóre właściwości CSS, aby zmienić nasze menu na mniejsze. The
