Menu Mobile - Panel top

Essai menu mobile façon "Paneau" qui arrive du haut de page.

by oilvier

HTML

<div class="main-nav right">
	<button class="btn nav-trigger">Menu</button>
	<div class="nav-tab">
		<ul class="nav nav-vertical site-nav left">
			<li><a href="#">Accueil</a></li>
			<li><a href="#">Item 1</a></li>
			<li><a href="#">Item 2</a></li>
			<li><a href="#">Item 3</a></li>
			<li><a href="#">Item 4</a></li>
		</ul>
		<button class="btn nav-trigger active">Fermer</button>
	</div>
</div>

CSS

* {margin:0; padding:0;}

body {font-family:Arial; font-size:14px;}
input, select, option, optgroup, textarea { font: inherit;}
[type="submit"], [type="button"], [type="reset"], button { cursor:pointer; border:0; -webkit-appearance: none; overflow:visible; }
[type="submit"]::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, button::-moz-focus-inner {border:0; padding: 0;}
[type="submit"]:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, button:-moz-focusring { outline: 1px dotted black; }

/* Box model */
*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

.right {text-align:right;}

/* Boutons
=====================*/
.btn {display:inline-block; line-height:normal; margin:0; background:#eb0f2d; font-size:15px; color: #FFF; padding:10px 15px; font-family:Arial, Helvetica, sans-serif; -webkit-border-radius:5px; border-radius:5px;}
/*======================*/

/* Navigation
=====================*/
.nav > li, .nav > li > a {display:inline-block;}
.ie7 .nav > li, .ie7 .nav > li > a {display:inline; zoom:1;}

/* Navigation verticale */
.nav-vertical > li,
.children > li {display:list-item;}
/*====================================*/

/* Nav */
.main-nav {position:absolute; top:0; right:0; width: 100%;}
	.nav-trigger {background:#eb0f2d; font-size:15px; color: #FFF; padding:1px 15px; margin-right:10px; display: inline-block; font-family:Arial, Helvetica, sans-serif; -webkit-border-radius:0 0 5px 5px; border-radius: 0 0 5px 5px;}

	.nav-tab {top:-40em; left:0; position:absolute; width: 100%; z-index:2001; font-size:13px; -webkit-transition: top .5s; -moz-transition: top .5s; -ms-transition: top .5s; -o-transition: top .5s; transition: top .5s;}
		.nav-tab .nav-trigger {float: right; position: relative; z-index:1;}

		.site-nav {text-align: left;}
			.site-nav a {color: #FFF; display: block; padding:9px 13px;}
			.site-nav > li > a {font-size:14px;...

JavaScript

document.addEventListener('DOMContentLoaded', function() {
    var trigger = document.querySelectorAll('.nav-trigger');
    var nav = document.querySelector('.nav-tab');
    
    function slide(){
        nav.classList.toggle('hidden-tab');
    }
    
    [].forEach.call( trigger, function(el) {
        el.addEventListener('click', function() {
            slide();
        }, false);
    });
});