JavaScript : dérouler ses menus

Le but de cette partie est d’empêcher le menu de prendre trop de place, afin que notre visiteur trouve tout de suite, ou en tout cas plus rapidement les informations qu’il cherche. Je vous propose un aperçu de ce que nous (vous !) allons réaliser :

Figure : Le petit bouton en haut à droite permet de dérouler / enrouler le menu

Bon, c’est moche, mais libre à vous de faire mieux que moi ! De plus, il est courant de mettre le lien vers la version ordinateur tout au bas de la page ; c’est à vous de voir. Je vous donne le code que j’ai utilisé pour ce résultat, le but n’est pas de perdre du temps là-dessus maintenant :

<!-- Dans le header -->
<a class="btn btn-navbar" id="btnMenu">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</a>

<!-- J'ai aussi ajouté un id à la balise <nav> -->

.btn {
    display: inline-block;
    cursor: pointer;
}

.btn-navbar {
    display: none;
    float: right;
    padding: 12px 15px;
    margin-right: 5px;
    margin-left: 5px;
}

.icon-bar {
    display: block;
    width: 18px;
    height: 3px;
    background-color: #CECECE;
    -webkit-border-radius: 1px; /* Ce sont des préfixes, pour que les navigateurs */
       -moz-border-radius: 1px; /* prennent en charge les nouvelles propriétés. */
            border-radius: 1px;
}

.icon-bar + .icon-bar { /* Le + permet de sélectionner les éléments qui suivent */
    margin-top: 3px;
}

Et il ne faut pas oublier de cacher le menu en-dessous de 600px, lorsqu’on change sa présentation, avec display: none;.

Place au JavaScript pour afficher/cacher ce menu !

En JavaScript "pur"

Le javascript permet d’avoir de l’interactivité dans vos pages HTML. Maintenant, presque tous les appareils gèrent correctement le JS, donc il n’y a normalement pas de problèmes pour l’utiliser sur votre site. Si vous souhaitez l’apprendre, rendez-vous sur le tutoriel officiel d’OpenClassrooms sur le JavaScript.

Comme ce tutoriel ne concerne pas le JS, je vais directement vous donner ma solution (qui n’est pas unique) :

window.onload=function(){
    var bouton = document.getElementById('btnMenu');
    var nav = document.getElementById('nav');
    bouton.onclick = function(e){
        if(nav.style.display=="block"){
            nav.style.display="none";
        }else{
            nav.style.display="block";
        }
    };
};

Avec des frameworks

Les frameworks JS vous permettent de grandement simplifier votre code et de ne pas vous préoccuper des compatibilités entre les navigateurs (entre autres). Il en existe beaucoup, mais je ne vais vous présenter que ceux que je connais.

jQuery

jQuery est peut-être le framework JS le plus utilisé. Si vous souhaitez vous y initier, vous avez le choix dans les tutoriels : parmi ceux assez complets, il y a celui de MichelMartin et celui de Nassoub et Sainior, tous deux très réussis.

De même, je vais vous donner directement le code puisque je ne souhaite rien vous apprendre ici :

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('#btnMenu').on('click touch', function(e){
            $('#nav').slideToggle();
        });
    });
</script>

Mootools

Mootools est également un framework très utilisé, mais il n’existe malheureusement pas de tutoriel concernant celui-ci sur le Site du Zéro.

Pour ce framework, que je ne maîtrise pas totalement, j’ai dû changer quelques propriétés CSS pour obtenir le résultat voulu. Voici les changements :

nav
{
    /*display: block;*/
    overflow: hidden;
}

/* ... */

@media (max-width: 600px){
    nav
    {
        /* display: none; */
        height: 0;
    }
    /* ... */
}

Et voici directement le code :

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
<script type="text/javascript">
    var tweenerFunction = function(){				
        if($('nav').getStyle('height')=='0px'){
            $('nav').tween('height', '144px');
        }else{
            $('nav').tween('height', '0px');
        }
    }
			
    window.addEvent('domready',function(e){
        $('btnMenu').addEvent('click', tweenerFunction);
    });
</script>

Si vous utilisez Mootools régulièrement et que vous savez comment optimiser ce code, faites-moi signe !

Bien que ce soit de plus en plus rare, une bonne habitude à prendre est de toujours penser aux visiteurs ayant désactivé JavaScript. Pour cela, dans notre cas, rien de plus simple, même si ça peut être parfois problématique.

Ici, tout simplement, on va ajouter une ancre à notre lien :

<a class="btn btn-navbar" id="btnMenu" href="#noscriptMenu">

Ainsi, il nous suffit de rajouter à la fin de notre page (à la fin de notre <footer>), un deuxième menu ! Et pour qu’il ne s’affiche pas pour les visiteurs qui n’en n’ont pas besoin, on va l’entourer d’une balise <noscript> :

<footer>
    <!-- ... -->
    <noscript>
        <nav id="noscriptMenu">
            <ul>
                <li><a href="#">Accueil</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">CV</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </noscript>
</footer>

Il ne faut pas oublier qu’on ne veut l’afficher que sur un petit écran, plus petit que 600px (Je vous laisse faire, vous avez compris depuis le temps !).

Et maintenant, on a un problème avec le JS ! En effet, lorsqu’on clique pour dérouler le menu avec JavaScript activé, on est quand même redirigé vers #noscriptMenu, or on veut empêcher ce comportement.

Et bien tout simplement, avec le paramètre qu’on envoie à la fonction lors du clic, on annule le comportement par défaut :

e.preventDefault();