Navigation "Off Canvas"

Cette navigation adaptée de celle présentée par Dave Bushell sur Smashing Magazine offre un fonctionnement privilégiant les performances (utilisation de CSS transform au lieu de JS animate) et proposant une dégradation progressive rendant la navigation utilisable par les utilisateurs sans JS.

HTML

<script src="https://dl.dropboxusercontent.com/u/5855663/modernizr.js"></script>
<div class="layout">
    <div class="wrap">
        <div id="top" class="header">
            <h1>Navigation "Off Canvas"</h1>
            <p><a href="#nav" class="js-trigger-nav js-no-close">Menu</a></p>
        </div>
        <div id="nav" class="panel-nav js-no-close">
            <ul class="site-nav">
                <li><a href="#">Lien 1</a></li>
                <li><a href="#">Lien 2</a></li>
                <li><a href="#">Lien 3</a></li>
                <li><a href="#">Lien 4</a></li>
                <li><a href="#">Lien 5</a></li>
            </ul>
            <p class="hide-btn">
                <a id="nav-close-btn" href="#top">Fermer</a>
            </p>
        </div>
        <div class="content">
            <p>Adaptée de Dave Bushell</p>
            <p><a href="http://coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/" target="_blank">http://coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/</a></p>
            <p>Curabitur a felis mauris. Vestibulum imperdiet condimentum sapien vel vehicula. Nunc convallis, elit vitae molestie pretium, orci tortor lobortis odio, sed volutpat nibh metus aliquam ipsum. Nam non felis condimentum; congue leo bibendum, molestie metus. Pellentesque quis ullamcorper elit? Suspendisse sem enim, ornare quis mauris quis, porttitor egestas augue. Proin scelerisque lorem sit amet nisi mattis, ac blandit augue gravida. Vivamus faucibus diam sed diam egestas; nec placerat tortor rhoncus! Mauris dictum leo velit, nec vestibulum turpis faucibus dictum. Phasellus nisi nibh, euismod quis tincidunt at, convallis a odio.</p>
<p>Phasellus vel condimentum justo. Nam eget libero eu orci lobortis dignissim. Nunc lacinia tellus ante, placerat pulvinar massa sagittis vitae. Aliquam hendrerit euismod sagittis. Nam ullamcorper ultrices odio non commodo. Suspendisse potenti. Ut iaculis quam...

CSS

/* Lazy reset */
* {margin:0; padding:0;}

* {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
html, body {min-height: 100%;}
body {font-size: 14px; font-family:Arial; background:lightgray;}

a {display:inline-block; padding:3px; color:darkblue; background:lightgray;}

.wrap {padding:10px 20px; background:white;}
    .header {padding-bottom:10px; border-bottom:3px solid lightgray; margin-bottom:10px;}
   .panel-nav {padding:10px; background:lightgray; -webkit-box-shadow:-15px 0 15px -15px #171717 inset; box-shadow:-15px 0 15px -15px #171717 inset;}
        .site-nav {list-style:none;}
    .content p {margin-bottom:10px;}

/**********************************/
/* Mise en place de la navigation */
/**********************************/

body {overflow-x:hidden; -webkit-overflow-scrolling:touch;} /* Empêche le lag lorsque l'on scroll sur mobile */

.layout {position: relative; height: 100%; overflow-x:hidden;} /* Conteneur général du site - contient la navigation masquée et le contenu principal */
	.wrap {position:relative; width: 100%; height:100%; left:0;} /* Contenu principal - il sera poussé par la navigation (Attention : la navigation est contenue dans ce bloc) */

/* Navigation */
.panel-nav {position:absolute; overflow: hidden; width: 100%; top:0; z-index: 2;} /* ¨Par défaut (ie : sans JS), la navigation est positionnée en absolue et apparait en haut de l'écran */
/* Contrôle de la navigation (lorsque le JS est désactivé) */
#nav:not(:target) {z-index: 1; height:0;} /* Lors du clic sur un lien ancre contenant l'ID de la navigation, on désactive height:0; pour afficher le menu */

/* La classe .js est ajoutée via Modernizr et nous assure que ces comportements n'interviennent que si le JS est activé */
.js .panel-nav {height: 100%!important; width: 70%; left: -70%;} /* La navigation est poussée hors de l'espace visible de l'écran */
/* .js .panel-nav {height: 100%!important; width: 70%; left:100%;} Variante pour apparition sur la...

JavaScript

/* Ajout de Modernizr pour tester le support des propriétés CSS transform3d et transition :
http://modernizr.com/download/#-csstransforms3d-csstransitions-inputtypes-cssclasses-teststyles-testprop-testallprops-prefixes-domprefixes */

var doc = $('html'), // Reçoit la classe permettant d'afficher la navigation
    nav_open = false, // Indique que la navigation est masquée par défaut
    nav_class = 'js-nav'; // Classe à ajouter pour afficher la navigation

/* Pour refermer le menu */
function closeNav() {
    doc.removeClass(nav_class);
    nav_open = false;
}
/* Pour ouvrir le menu */
function openNav() {
    if (nav_open) {
        return;
    }
    doc.addClass(nav_class);
    nav_open = true;
}
/* Switch entre ouverture/fermeture du menu */
function toggleNav(e) {
    if (nav_open && doc.hasClass(nav_class)) {
        closeNav();
    } else {
        openNav();
    }
}

$('.js-trigger-nav').click(function(e) {
    toggleNav();
    e.preventDefault();
});

// Autoriser le clic sur les éléments du menu
$('.site-nav').find('a').addClass('js-no-close');

var events = 'click touchstart';
$(document).on(events, function(e) { // Pour masquer la navigation au clic sur la partie partiellement cachée du site
    var el = $(e.target);
    
    if (nav_open && !el.hasClass('js-no-close') && !el.parents().hasClass('js-no-close') ) { // Les éléments avec la classe "no-close" sont ceux qui reste cliquables lorsque la navigation est affichée (ie: la navigation en elle-même et le bouton trigger)
        e.preventDefault();
        closeNav();
    }
    
    $('.panel-nav').on(events, function(e) {
        e.stopPropagation();
    });
});