Navigationsfält, navbars på svengelska, är en ofta nödvändig komponent för att navigera på webben. De finns i olika former och har olika funktioner. I denna introduktion introduceras några grundläggande exempel.
Börja här
Instruktioner för den här sidans exempel visas på Codepen, det finns även förklarande text där.
Alla exempel som visas är responsiva, vilket innebär att de anpassar sig efter skärmstorleken på enheten.
I alla exempel används kombinationer av klasser för att styra navbarens beteende. Det innebär att många element har flera klasser, och de separeras med mellanslag.
Hamburgermeny
En hamburgermeny är en vanlig navigeringsmeny som används på webbsidor och appar för att visa en samling av länkar eller navigeringsalternativ på ett kompakt sätt.
Vad
En hamburgermeny är en typ av navigeringsmeny som visas som tre horisontella linjer, vilket liknar utseendet på en hamburgare. När användaren klickar på hamburgerikonen visas eller döljs navigeringsmenyn.
Varför
Hamburgermenyn är användbar när det finns begränsat utrymme på skärmen, särskilt på mobila enheter. Den kompakta designen gör det möjligt för användaren att enkelt få tillgång till navigeringsalternativen genom att klicka på hamburgerikonen. Detta minimerar också synligheten av navigeringsmenyn när den inte används och ger mer utrymme för annat innehåll på webbsidan.
Betyder det att hamburgermenyn enbart ska användas på små enheter? Inte nödvändigtvis, men designmönstret påverkar tillgängligheten och användbarheten så det bör kunna motiveras.
See the Pen Navbars - hamburger by Jens Andreasson (@jensadev) on CodePen.