Bygg en hamburger-meny

En hamburger-meny används ofta för att få till en snygg navigationsbar för mindre skärmar så som smartphone och iPads. Det festliga namnet har kommer såklart från att de tre liggande strecken ser ut som en hamburgare 🍔. Att få till en välfungerande och snygg hamburger-meny är dock inte det lättaste, särskilt inte om du endast använder CSS vilket vi kommer att göra i denna utmaning.

Till höger ser du ett exempel på hur det kan komma att se ut, men i slutändan är det du som bestämmer. Det finns väldigt många sätt att gå tillväga och vi är spända på att se vad du kommer att skapa! 🙋‍♀️

Få hjälp

Gå med i vår Slack kanal och få hjälp av hela vårt community och hjälp coacher. Gå med här.

1. Så här startar du

Ladda ned kodfilerna här till din email och öppna i din kodeditor. Inuti filerna hittar du vidare instruktioner och kommentarer om hur du går tillväga för att lösa utmaningen, i nästa stycke hittar du dessutom grymma tips och trix!

Vi rekommenderar att du använder Visual studio code som editor. Det är gratis och går att ladda ned👉 här .

2. Tips & trix

Få inspiration från andra hamburger-menyer från Dribble.
Ett tips är att använda Flexbox för att enklare positionera dina element 👀 Läs mer om det här .
Här 👈 kan du läsa mer om hur du skapar en navigationsmeny för mobilen.
CSS erbjuder många sätt att animera din hamburgare meny. Ett exempel är att göra det med “transition”. Med transition kan du flytta och rotera element. Läs mer här.

3. Inspiration

Cornelia gick från Motion designer till att animera i kod

Technigo-studenten Cornelia jobbade tidigare med animationer i Adobe After effects, men valde att byta karriär till frontend-utvecklare. Det betyder inte att det är slutanimerat, men animering i en annan form. Läs om hur Cornelia upplever skillnaden och se exempel på vad hon har animerat hittills i boot campet.

👉 Läs hela intervjun med Cornelia här

4. Dela din lösning

Självklart vill vi se din lösning, dela den gärna på vår Instagram under hashtaggen #kodutmaningen. Och du, passa på att utmana din vän – dela kodutmaningen 💪.