De laatste tijd enkele websites, zoals Dit is de brigade en Alles wat je , zijn begonnen met het weergeven van een dynamisch en geanimeerd menu dat de grootte van het menu verandert tijdens het scrollen. Minimaliseren van de hoofdnavigatie om meer ruimte voor de inhoud toe te staan. In deze tutorial leg ik uit hoe je dit menu zelf kunt maken met HTML5, CSS3 en een beetje jQuery.
Dit soort menu is geweldig als je speciale aandacht wilt geven aan je inhoud op de hele website, en het stelt je ook in staat om een grotere en meer impactvolle navigatie te creëren bij het eerste bezoek van een gebruiker aan een website. U kunt uw websitemerk of -logo beter weergeven, geweldig voor de bovenstaande weergave van de vouw; en nadat de gebruiker bij een bezoek is betrokken, verbergt een kleinere en geminimaliseerde versie subtiel zodat de gebruiker zich voornamelijk op uw inhoud kan concentreren.
Er zijn verschillende manieren om dit te doen. In deze zelfstudie leg ik uit hoe u een vaste menubalk op volledige breedte maakt, die samen met het logo in hoogte wordt aangepast en een eenvoudige geminimaliseerde versie van de eerste maakt. Als u wilt, kunt u het logo ook vervangen door een andere variant van uw logo, zoals initialen of een pictogram, maar houd er rekening mee dat consistentie hier erg belangrijk is, zodat de gebruiker begrijpt hoe het element is gewijzigd en dat het hoofddoel is is nog steeds de originele; navigeren op de website.
Voordat we beginnen, kunt u bekijk de demo of download de bron van hier .
We beginnen met het maken van de eenvoudige HTML-code die we nodig hebben. We houden vast aan een heel eenvoudige HTML5-structuur voor het beginpunt.
How to create a dynamic top bar | Webdesigner Depot Nu onze eerste HTML-code is voltooid, voegen we de code voor het menu en enkele andere details toe aan het hoofd van ons HTML-bestand.
How to create a resizing menu bar | Webdesigner Depot Laten we dat menu klein krijgen!
Einde van de regel.
In our
: we hebben de metatag voor de auteur toegevoegd om de maker van het bestand te identificeren; daarna hebben we de beroemde reset.css van Eric Meyer opgenomen, die bijna elk element in je HTML-bestand zal resetten, waardoor je een schoner en eenvoudiger document krijgt om aan te werken. En aangezien we later jQuery gebruiken, importeren we het in de laatste regel van ons hoofdelement via de jQuery-CDN.Ik heb de meeste bestanden hotlinked om het document zo eenvoudig mogelijk te houden, maar houd er rekening mee dat als je dat liever hebt, je de nieuwste versies van al deze bestanden kunt downloaden en deze lokaal kunt gebruiken in je HTML-bestand, en dit voorkomt mogelijke problemen met compatibiliteit van versies of wijzigingen in deze bestanden in de toekomst.
In onze
tag, hebben we de standaard HTML5 gebruikt