Un menu réactif

La navigation responsive

Pour rappel, le responsive design est essentiellement un moyen de concevoir un site web de manière que son contenu et ses éléments s'adaptent automatiquement à la taille de l'écran sur lequel il est visualisé. Il empêche les images d'être plus grandes que la largeur de l'écran et évite aux visiteurs utilisant des appareils mobiles d'avoir à fournir un effort supplémentaire pour lire votre contenu. Considérant le cas particulier d'un menu de navigation, la stratégie consiste à transformer une liste de liens linéaire, généralement placée sous la bannière d'accueil, en une liste déroulante verticale apte à être ouverte puis fermée en fonction des besoins. Le déplacement de la "div" depuis sa position originelle, s'effectue en modifiant le statut de position de celle-ci, soit de "relative" à "absolute", ce qui permet de la disposer à l'endroit le plus approprié : généralement dans l'angle supérieur droit, ou encore dans le bas de l'écran…

Bluefish/AneArtiste.com

« Qu'est-ce que la perfection, sinon un concept variable suivant le lieu, le temps et les autres circonstances ? »
—Ernest Ouellet

Du HTML au CSS

Concrètement, pour la partie html, la section dédiée (#menu) contient successivement l'image cliquable (#iconav), puis la liste du menu de navigation (#navig). Le comportement de cette structure adaptable au format de l'écran se joue ensuite uniquement au travers des styles css. Pour le passage d'un format à l'autre, on se sert de la rubrique @media screen and (max-width: x) { … } généralement située au bas de la feuille de style. Cette règle permet d'appliquer une partie d'une feuille de styles en fonction du résultat d'une ou de plusieurs media queries. Dans le premier cas, l'image cliquable est cachée, La liste est linéaire ( float:left; ), et la div de menu occupe toute la largeur de la page. Dans le second, l'image cliquable est visible, la liste est verticale, de largeur réduite, et se retrouve cachée tant que la demande d'ouverture n'a pas été formulée. La gestion de cette action sera ensuite gérée par quelques lignes de code en JavaScript dans une fonction dédiée, ainsi que par le moyen d'un "window.addEventListener" en bas de page html.

De façon succincte, on a pour le HTML :

<div id="menu">

	    <img id="iconav" src="image.png">

	    <nav id="navig">

	        <ul>

		    <li><a href="#">Home</a></li>

		    <li><a href="#">News</a></li>

		    <li><a href="#">Contact</a></li>

		    <li><a href="#">About</a></li>

                </ul> 

	    </nav>

</div> 

Et pour le css :

#menu { position:relative; display:block; }

#iconav{ position:fixed; display:none; }

#navig { display:inline; }

#navig ul li { float:left }

@media screen and (max-width: 700px) {

    #menu { position:absolute; }

    #iconav { display:inline; }

    #navig { display:none; }

    #navig ul li { float:none; }

} 

Menu/Aneartiste.com

« Dureté et rigidité sont compagnons de la mort. Fragilité et souplesse sont compagnons de la vie. »
—Lao Tseu

Interaction javascript

Afin de permettre l'apparition/disparition du menu déroulant dans le cadre d'un format d'écran portable, on utilise le code JavaScript suivant. Si vous téléchargez l'archive (4,8 ko) pleinement fonctionnelle contenant la totalité des fichiers, vous constaterez que cette procédure a été doublée d'un dispositif "EventListener" afin de demeurer réactif à un éventuel redimensionnement manuel de la fenêtre du navigateur. La condition "if" permet de déterminer si le menu est visible ou non, et d'adapter le code en conséquence.
Ce qui donne :

function opennav () {

  if (document.getElementById("navig").style.display === 'none') {

     document.getElementById("navig").style.display = 'inline';

     document.getElementById("menu").style.width = '100px';

     document.getElementById("iconav").style.backgroundPosition = "left bottom";

  } else {

     document.getElementById("navig").style.display = 'none';

     document.getElementById("menu").style.width = '50px';

     document.getElementById("iconav").style.backgroundPosition = "left top";

  }

}