Slide-out Meny med JavaScript 1


Idag ska vi skapa ett väldigt populär meny-alternativ, nämligen en slide-out meny med JavaScript som man gömmer som standard och visar (och gömmer igen) genom att man trycker på en meny-ikon som består av tre streck ☰ [1] . Jag gjorde en likadan meny i en tidigare artikel ”Slide out Meny med bara CSS & HTML” som använde bara CSS, den här gången så använder vi oss av JavaScript istället, för att gömma och visa menyn. 

[1] Meny-ikonen ☰ kan du enkelt hämta från http://copypastecharacter.com som har en massa roliga tecken och symboler som man kan kopiera. 

HTML basen

Till en början får vi skapa själva HTML koden för menyn, och till den så använder jag mig av en enkel oordnad lista med ankare:

 

 

…Och så CSS koden där vi sätter box-sizing till border-box vilket betyder att när man anger en bredd eller höjd är det med kantlinjer inkluderade:

…och för att enkelt kunna ändra beteende på menyn, skapar vi två klasser som dynamiskt läggs till/tas bort:

 

Onclick event

Nu ska vi lägga till en onclick event på <label> för det är den som ska reprecentera meny-ikonen. Här kommer koden till den:

 

 

JavaScript koden

Nu kommer själva motorn i menyn, nämligen JavaScripten. Vi hämtar menyn med getElementById och kollar med en if sats vilken klass den har för tillfället, och ändrar den i förhållande till det, d.v.s. att om den har klassen hide så byter vi ut den mot show och vice versa:

Ladda in sidan med din webbläsare så ska du få följande resultat:

Slide-out menu med JavaScript; check V

Slide-out menu med JavaScript; check V

Så där, nu kan du få saker att hända med JavaScript. Till nästa gång, koda smart 😉


Lämna en kommentar

E-postadressen publiceras inte. Obligatoriska fält är märkta *

En tanke om “Slide-out Meny med JavaScript