Slide out Meny med JavaScript

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:

<div class="menu-wrapper">
        <label for="toggle" class="menu-icon">☰</label>
	<input type="checkbox" id="toggle" />
         <aside id="sidebar-menu" class="hide">
		<nav class="main-menu">
			<ul>
				<li class="menu-item active"><a href="http://google.com">Google</a></li>
				<li class="menu-item"><a href="http://localhost/~d/labb_cms2/wordpress/wp-login.php">cr8gr8dsgns</a></li>
				<li class="menu-item"><a href="#">DeviantART</a></li>
				<li class="menu-item"><a href="http://facebook.com">Facebook</a></li>
			</ul>
		</nav>
	</aside>
</div><!--  /.menu-wrapper -->

 

 

…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:

body {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    font:100 1rem/150% Futura, 'Avenir Next', Avenir, sans-serif;
    width:100%;
    min-height:1000px;
    background-color:rgb(252,252,252);
}
.menu-wrapper {
    position: relative;
}
#sidebar-menu {
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    position:fixed;
    top:0;
    width: 125px;
    z-index:1;
    height:100%;
    padding:38px 38px 38px 0;
    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);
}
input[type="checkbox"] {
    visibility: hidden;
}
.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;
}<br>

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

.hide {
    left: -125px;
}
.show {
    left: 0;
}

 

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:

 <label for="toggle" class="menu-icon" onclick="hideShow()">☰</label>

 

 

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:

function hideShow() {
    menu = document.getElementById("sidebar-menu");
    if (menu.className === "show") {
        menu.className = "hide";
    } else {
        menu.className = "show";
    }
}
Slide out Meny med JavaScript

Lämna ett svar

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

Rulla till toppen