Slide out Meny med bara CSS & HTML

Artikeln finns somPDF här 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:

<!-- HTMl koden -->             
<aside class="sidebar-menu">
	<nav class="main-menu">
		<ul>
			<li class="menu-item active"><a href="#">Hem</a></li>
			<li class="menu-item"><a href="#">Portfolio</a></li>
			<li class="menu-item"><a href="#">Galleri</a></li>
			<li class="menu-item"><a href="#">Kontakt</a></li>
		</ul>
	</nav>
</aside>

 

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:

/* jag använder * som är en wildcard, och gäller för alla element */

* {
	box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	-webkit-box-sizing: border-box;
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 100%;
    	font: inherit;
    	vertical-align: baseline;
}

/* HTML5 display-roll för äldre webbläsare */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

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:

body {
	width:100%;
	min-height:1000px;
	background-color:rgb(250,250,250);
}
.sidebar-menu {
	position:fixed;
	top:0;
	left:0px; /**
			* vänster position ändrar vi senare till ett negativt tal, 
			* för att gömma den, men nu vill vi se den 
			*/
	width:120px;
	height:100%;
	padding:38px 38px 38px 20px;
	background-color:rgb(20,20,20); /* nice mörk bakgrund */
}

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

.menu-item a {
	font:100 1rem/250% Futura, 'Avenir Next', Avenir, sans-serif;
	color:rgba(255,255,255,.9);
	text-decoration:none;
}
.active a {
	color:rgba(255,100,100,.8);
}
/* och så stilar för :hover läge */
.menu-item a:hover {
	color:rgba(255,100,100,.8);
}
.active a:hover {
	color:rgba(255,100,100,.8);
}
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:

<div class="menu-wrapper">
	<label for="toggle" class="menu-icon">☰</label>
	<input type="checkbox" id="toggle" name="" value="" />
	<aside class="sidebar-menu">
		<nav class="main-menu">
			<ul>
				<li class="menu-item active"><a href="#">Hem</a></li>
				<li class="menu-item"><a href="#">Portfolio</a></li>
				<li class="menu-item"><a href="#">Galleri</a></li>
				<li class="menu-item"><a href="#">Kontakt</a></li>
			</ul>
		</nav>
	</aside>
</div><!--  /.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:

.menu-icon {
	text-decoration:none;
	position:fixed;
	top:20px;
	left:200px;
	font-size:2.5rem;
	color:rgb(0,0,0,.9);
}
.menu-icon:hover {
    cursor: pointer;
}
#toggle {
	/* göm checkbox */
	display: none;	
}
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:

#toggle:checked + .sidebar-menu {
	left:0;
}

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

.sidebar-menu {
	left:-120px;
}

 

Och här kommer hela koden:

<!doctype html>
<html lang="sv-SE">
<head>
	<meta charset="UTF-8" />
	<title>Slide-out Meny | cr8gr8designs.com</title>
<style>
* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
	font:100 1rem/150% Futura, 'Avenir Next', Avenir, sans-serif;
	width:100%;
	min-height:1000px;
	background-color:rgb(252,252,252);
}
.sidebar-menu {
    	transition: all 0.4s;
    	-webkit-transition: all 0.4s;
	position:fixed;
	top:0;
	left:-120px;
	z-index:1;
	width:120px;
	height:100%;
	padding:38px 38px 38px 20px;
	background:rgb(20,20,20);
}
.menu-item a {
	font:100 1rem/250% Futura, 'Avenir Next', Avenir, sans-serif;
	color:rgba(255,255,255,.9);
	text-decoration:none;
	display:block;
}
.menu-item a:hover {
	color:rgba(255,100,100,.8);
}
.active a {
	color:rgba(255,100,100,.8);
}
.active a:hover {
	color:rgba(255,100,100,.8);
}
.menu-icon {
	text-decoration:none;
	position:fixed;
	top:20px;
	left:200px;
	font-size:2.5rem;
	color:rgb(0,0,0,.9);
}
.menu-icon:hover {
    cursor: pointer;
}
#toggle {
	display: none;  /*hide */
	
}
#toggle:checked + .sidebar-menu {
	left:0;
}
</style>
</head>
<body>
	<div class="menu-wrapper">
		<label for="toggle" class="menu-icon">☰</label>
		<input type="checkbox" id="toggle" />
		<aside class="sidebar-menu">
			<nav class="main-menu">
				<ul>
					<li class="menu-item active"><a href="#">Hem</a></li>
					<li class="menu-item"><a href="#">Portfolio</a></li>
					<li class="menu-item"><a href="#">Galleri</a></li>
					<li class="menu-item"><a href="#">Kontakt</a></li>
				</ul>
			</nav>
		</aside>
	</div><!--  /.menu-wrapper -->
</body>
</html>

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

Vänligen, Daniel Karjanlahti på cr8gr8designs.com

Slide out Meny med bara CSS & HTML

Lämna ett svar

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

Rulla till toppen