Slide out Meny med bara CSS & HTML 1


Artikeln finns somPDF version på medlemssidorna

Idag tänkte jag att vi skulle skapa en väldigt populär meny-alternativ, nämligen en slide out meny 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] .

[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. 

Så här ska det se ut gömd och…

Så här ska det se ut gömd och…

Skärmavbild-meny-utfälld

så här, när den kommer fram.

HTML koden

Vi börjar med att skapa en sidospalt som ska innehålla själva menyn, och vi placerar den antingen efter alla andra element, precis innan avslutande </body> taggen eller innan alla andra element precis efter första <body> taggen.

Här kommer koden för sidospalten:

 

CSS

Jag brukar alltid återställa alla element och sätta alla HTML5 element till block-element för äldre webbläsare, plus att jag använder box-sizing för att enklare räkna ut alla mått för då räknas marginaler, kantlinjer och padding i bredd / höjd regler:

Nu ska vi se till att sidospalts-meny tar upp fulla höjden och placera den längst till vänster med fixerad position, plus att vi säter z-index till ett positiv tal så att den hamnar ovanför allt innehåll och kommer då inte att störa flödet när den pressas in från sidan:

Nu ska vi styla ankar-elementen så att dom blir lite snyggare genom att ange font, färg och ta bort text-dekoration:

Skärmavbild-meny-halvvägs

Och det här har vi åstadkommit hittills,
och jag tycker att det börjar arta sig visuellt.

 

”Knappen”

Okej, vi behöver ha en funktion för att gömma / visa menyn, och för att åstadkomma det behövs en ”knapp” som man trycker på, och för det har vi ett par alternativ; input[type=”checkbox”] eller input[type=”radio”], men jag tänkte använda input[type=”checkbox”] varianten för det här exemplet, och så behövs en label som är knuten till den så att när man klickar på label texten så reagerar chockboxen, så label måste ha en for attribut som länkar till checkboxen. Vi skriver in dom och omger allt med en <div> som har klassen menu-wrapper:

 

Växlingsfunktionen

Okej, nu kommer det roliga! Vi börjar med att placera label som blir själva menu-ikonen, och ändrar på muspekaren när man hovrar över den, och till sist ska vi gömma checkboxen:

Skärmavbild-meny-ikon

Och så här ser vår menyikon ut

…och så det magiska, nämligen att när checkbox är ikryssad, så gäller position vänster 0 för dess syskon som är sidebar-menu, och vi åstadkommer det genom att sätta en plus tecken efter checkbox när den har attributet checked:

Till sist byter vi ut värdet för left i sidebar-menu till ett negativt tal som är minst dess bredd:

 

Och här kommer hela koden:

Och det var allt för den här gången, och till nästa, koda smart ; )

Vänligen, Daniel Karjanlahti på cr8gr8designs.com


Lämna en kommentar

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

En tanke om “Slide out Meny med bara CSS & HTML

  • Daniel Inläggsförfattare

    Det här är ett väldigt populärt meny alternativ, och det av en förståelig anledning, nämligen att den är optimal för mobila enheter. Att kunna skapa funktionaliteten helt i CSS är suveränt, och menyikonen som består av tre streck ovanpå varandra är ett lättigenkännligt tecken, och det är nog ingen som inte vet vad den gör.