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 här och få hjälp av vårt community.

Häng med på Code along den 11:e mars 12:00-12:30 med Karan, utvecklare från Technigo, som visar sin take på kodutmaningen. Det är Karan som har hjälpt till att skapa denna utmaning, HEJA!

ANMÄL DIG TILL CODE ALONGEN

1. Såhär startar du

De 20 första får feedback på sin kod (inlämnat innan 17:e mars), för att delta i detta behöver du gå in på vår Github här , sedan trycker du på uppe till höger. Nu har du kopierat koden över till din användare på Github. För att ladda ned koden på din dator och starta utmaningen trycker du sedan på och download zip. Färdig!

Vill du endast ladda ned kodfilerna, kan du göra det här.

Vi rekommenderar att du använder Visual studio code som editor. Det är gratis och går att ladda ned👉 här . Inuti filerna finner du några kommentarer som kan hjälpa dig på vägen till att lösa utmaningen. Du kan även läsa nedan för tips och trix!

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. Få feedback på din kod

Lämnar du in din kod innan den 17:e mars och är en av de 20 första kan du få feedback på din kod av utvecklare från Technigo.För att få feedback krävs det att du lägger upp din lösning på Github. Men det är inte så krångligt som du tror, kolla igenom denna videon eller gå igenom stegen nedan.

1. Gå in på ditt konto i GitHub och välj fliken "repositories". Leta upp utmaningen som du en gång forkade och klicka in på den.

2. Väl inne på utmaningen på GitHub, på ditt konto - dra kodfilerna från din dator och släpp de i detta fönster (var som helst).

3. Filerna laddas nu upp på din GitHub, skrollar du ned finner du en ruta med rubriken "Commit changes". Skriv någon kommentar om du vill, tryck sedan den gröna knappen "commit changes".

4. Tryck sedan "New pull request". Då ser du vilka ändringar du har gjort i koden. Tryck "Create pull request" två gånger i rad. Tadaaa, färdig!

Har du lyckats bli en av de 20 första att lämna in kodutmaningen kommer du att bli notifierad om det i GitHub 👏.

4. Dela din lösning!

Självklart vill vi se din lösning, dela den gärna på vår Github eller på våra sociala medier under hashtaggen #kodutmaningen .

Och du, passa på att utmana din vän - dela kodutmaningen 💪.