Comment créer un menu déroulant responsive sur Blogger ?

Comment créer un menu déroulant responsive sur Blogger ?



Comment créer un menu déroulant responsive sur Blogger ? Je me suis décidée à relever le challenge et à vous proposer un tutoriel sur le sujet !

Il existe plein de manières de créer un menu déroulant, celui que je vous propose est en HTML/CSS, avec une pointe de Javascript pour gérer l’ouverture du menu sur mobile. Vous pouvez jeter un oeil au rendu sur CodePen (réduisez la largeur de la zone blanche pour visualiser la version mobile).

Ce n’est pas un tutoriel pour grand débutant, il faut être à l’aise avec l’idée de modifier un peu de code moyennant quelques explications. Si vous cherchez un tuto plus simple, n’hésitez pas à jeter un oeil à celui-ci qui permet de créer un menu horizontal simple sur Blogger.

Menu déroulant responsive pour Blogger
Menu déroulant responsive pour Blogger

A savoir sur les menus de Blogger

Avant de commencer, il faut savoir que certains modèles Blogger incluent par défaut des règles de mise en forme des menus. Elles peuvent être en conflit avec les nouvelles règles que nous allons définir dans ce tutoriel et de ce fait, il est possible que certains éléments s’affichent différemment (ou ne s’affichent pas). Chaque modèle Blogger ayant son propre code, ce sera à vous de faire les ajustements nécessaires.

J’ai cependant conçu le code de manière à ce qu’il « supplante » la plupart de ces mises en forme par défaut. L’image ci-dessus vous montre le rendu sur un blog utilisant un modèle « Simple ».

Je vous conseille fortement, avant toute modification de votre blog, d’effectuer une sauvegarde de votre modèle existant. Ainsi, en cas de problème, vous pourrez facilement restaurer cette sauvegarde.


Créez vos rubriques avant de commencer

Avant d’ajouter un menu à votre blog, vous devez déjà avoir créé les catégories qui apparaîtront à l’intérieur. Si vous ne savez pas comment organiser les articles de votre blog Blogger sous forme de catégories, je vous conseille mon tutoriel qui vous apprend à créer des rubriques sur Blogger.

Le code HTML du menu déroulant responsive

Un menu se présente en fait comme une liste. Vous devez donc commencer par réfléchir à la liste des rubriques que vous allez y inclure et aux liens qui existent entre elles. Imaginons par exemple le cas suivant : vous voulez inclure dans votre menu…

  • La page d’accueil ;
  • Un intitulé voyage qui regroupe deux sous-rubriques Europe et Amérique ;
  • Un intitulé lifestyle avec les sous-rubriques Sorties, Déco, Mode/Beauté ;
  • Un lien vers votre page Contact.

Quand on visualisera votre menu, on devra donc y voir quatre éléments au premier abord (accueil, voyage, lifestyle, contact). En survolant l’élément voyage, on aura deux sous-menus, Europe et Amérique. En survolant l’élément lifestyle, on aura trois sous-menus, Sorties, Déco, Mode/Beauté.

Ça signifie que nous avons d’une part une liste principale de quatre éléments et à l’intérieur de cette liste principale, nous avons deux autres listes qui correspondent aux sous-rubriques. Nous allons traduire ça sous forme de code HTML.

Créer le code HTML du menu

Je vous donne d’abord le code complet… et ensuite, je vous explique à quoi il correspond :

<a href="#menu" class="menubtn">MENU</a>
<nav id="menu" class="menu" role="navigation">
<ul>
<li class="parent"><a href="(URL de la page d'accueil)">Accueil</a></li>
<li class="parent sousmenu"><a href="#">Voyage</a>
		<ul class="sousrubrique">
		<li><a href="(URL de la catégorie Europe)">Europe</a></li>
		<li><a href="(URL de la catégorie Amérique)">Amérique</a></li>
		</ul>
</li>
<li class="parent sousmenu"><a href="#">Lifestyle</a>
		<ul class="sousrubrique">
		<li><a href="(URL de la catégorie Sorties)">Sorties</a></li>
		<li><a href="(URL de la catégorie Déco)">Déco</a></li>
		<li><a href="(URL de la catégorie Mode/Beauté)">Mode/Beauté</a></li>
		</ul>
</li>
<li class="parent"><a href="(URL de la page Contact)">Contact</a></li>
</ul>
</nav>

Explication du code

La ligne <a href="#menu" class="menubtn">MENU</a> nous servira à ouvrir le menu sur mobile grâce à un bouton « Menu ».

Ensuite, on indique que l’on entre dans la zone du menu à l’aide de la ligne <nav id="menu" class="menu" role="navigation"> et on précise à la fin du code que la zone du menu est terminée grâce à la balise </nav>.

Au milieu de tout ça, on place nos listes. En HTML, une liste commence par la balise <ul> et se termine par la balise </ul>. Chaque élément d’une liste commence par la balise <li> et se termine par la balise </li>. Dans notre cas, nous avons donc :

  • Une liste de 4 éléments « parents » (Accueil, Voyage, Lifestyle, Contact).
  • A l’intérieur de l’élément Voyage et de l’élément Lifestyle, on a à nouveau une liste qui contient cette fois-ci les sous-rubriques.

Pour que ça fonctionne sur votre blog, vous devez remplacer l’intitulé de chaque rubrique par celui de vos propres rubriques. Vous devez également indiquer l’adresse de la page en question à tous les endroits où j’ai marqué (URL de la catégorie/page). En revanche, ne touchez pas aux noms des classes (« parent », « sousmenu », « sousrubrique », etc).

Faites bien attention à indiquer http ou https au début de l’adresse et à bien inclure les guillemets comme dans mon exemple.

Erreurs fréquentes

  • Oublier de fermer une balise – Si vous avez ouvert un <ul>, il faut penser à le refermer avec la balise </ul>. Même chose si vous avez ouvert un <li> ou un <a>.
  • Se tromper sur l’emplacement des éléments – Si vous regardez par exemple l’intitulé Voyage de mon exemple, j’ai inclus le sous-menu à l’intérieur avant de refermer la balise </li>. C’est ce qui permet aux sous-rubriques Europe et Amérique d’être rattachées à l’élément Voyage.
  • Modifier les éléments… mais pas tous – Si vous touchez aux noms des classes CSS (comme menubtn, parent, menu, sousmenu), il faut répercuter cette modification partout, sinon votre menu ne fonctionnera pas.

Le code JavaScript du menu déroulant

Ce code va permettre d’ouvrir le menu en cliquant sur un bouton lorsque l’on est sur mobile. Ici, vous n’avez rien à modifier, rien à personnaliser.

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
  	  $('body').addClass('js');
		  var $menu = $('#menu'),
		  	  $menulink = $('.menubtn'),
		  	  $menuTrigger = $('.sousmenu > a');
		
		$menulink.click(function(e) {
			e.preventDefault();
			$menulink.toggleClass('select');
			$menu.toggleClass('select');
		});
		
		$menuTrigger.click(function(e) {
			e.preventDefault();
			var $this = $(this);
			$this.toggleClass('select').next('ul').toggleClass('select');
		});
		
		});
</script>

Souvenez-vous, sur mobile nous ouvrons le menu grâce à ce bout de code HTML : <a href="#menu" class="menubtn">MENU</a>

En simplifiant, le code JavaScript nous permet de définir ce qui se passe quand on tape sur « MENU » ou sur un élément contenant un sous-menu lorsque l’on est sur un smartphone. On définit que pour tout élément sélectionné, on ajoute la classe « select » dans son nom.

Par exemple, notre élément Voyage se présente comme ça par défaut : <li class="parent sousmenu"><a href="#">Voyage</a>
Il deviendra comme ça si on le touche sur mobile : <li class="parent sousmenu"><a href="#" class="select">Voyage</a>

Ça va nous permettre de définir la mise en forme par la suite : faire en sorte que les sous-menus soient cachés jusqu’à ce qu’on clique sur l’élément parent.

Personnaliser le design du menu déroulant responsive

Si on insérait directement les codes HTML et JavaScript que nous avons créés, voilà ce que donnerait l’affichage en utilisant le modèle Simple de Blogger.

Menu déroulant responsive sans mise en forme
Menu déroulant responsive sans mise en forme

Pas très esthétique, n’est-ce pas ? C’est moche pour une très bonne raison : à ce stade, nous n’avons donné aucune indication de mise en forme pour que notre menu soit esthétique. C’est ce que nous allons faire maintenant en faisant appel à un autre langage, le CSS.

Vous allez copier le code CSS ci-dessous et l’insérer sur votre blog en allant dans la rubrique Modèle de Blogger puis en cliquant sur « Personnaliser le HTML ». Cherchez ensuite une ligne qui contient ]]></b:skin>. Vous devrez copier ce code juste avant les deux crochets :

/* MISE EN FORME GENERALE */

nav#menu.menu a {display:block;padding:1em;text-decoration:none;color:#000;border:none;}
nav#menu.menu a:hover {background:#FFE49F;}
.menubtn {display:none;}
nav#menu.menu ul,nav#menu.menu ul li {list-style-type:none;padding:0;margin:0;z-index:99;background:#FFF;}
nav#menu.menu > ul > li > a {text-transform:uppercase;}

/* AFFICHAGE SUR ECRAN > 501 PX DE LARGE */

@media screen and (min-width : 501px){
nav#menu.menu .parent {position:relative;}
nav#menu.menu > ul > li {display:inline-block;}
nav#menu.menu > ul {text-align:center;}
.sousrubrique{visibility:hidden;position:absolute;top:100%;min-width:160px;left:0;z-index:-1;background:#FFF;opacity:0;text-align:left;transform:translateY(-2em);transition:all .3s ease-in-out 0s,visibility 0s linear .3s,z-index 0s linear 10ms;-moz-box-shadow:3px 3px 5px 0 #656565;-webkit-box-shadow:3px 3px 5px 0 #656565;-o-box-shadow:3px 3px 5px 0 #656565;box-shadow:3px 3px 5px 0 #656565;filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=135, Strength=5)}
nav#menu.menu > ul > li > ul > li {float:none;}
nav#menu.menu ul,nav#menu.menu ul li {overflow:visible;}
nav#menu.menu ul li:hover .sousrubrique{visibility:visible;opacity:1;z-index:1;transform:translateY(0);transition-delay:0s,0s,.3s}
}

/* AFFICHAGE SUR PETIT ECRAN */
@media screen and (max-width : 500px){
a.menubtn {display: inline-block;position: relative;padding: 0.5em 1.9em;text-decoration:none;color:#000;margin-top: 1em;border-radius: 3px;border: 1px solid #CCC;background: #FFE49F;}
.menubtn:before{content: "";position: absolute;left: 0.5em;top: 0.75em;width: 1em;height: 0.15em;background: black;box-shadow: 0 0.35em 0 0 black,0 0.7em 0 0 black;}
nav#menu.menu ul,nav#menu.menu ul li {list-style-type:none;padding:0;margin:0;text-transform:uppercase;}
nav#menu.menu > ul {margin-top:10px;}
.js nav#menu.menu, .js nav#menu.menu > ul ul {overflow: hidden;max-height: 0;transition: all 0.3s ease-out;}
nav#menu.menu.select, .js nav#menu.menu > ul ul.select {max-height: 55em;}
nav#menu.menu li a {color: #000;display: block;padding: 0.8em;border-bottom: 1px solid #EEE;position: relative;}
nav#menu.menu li.sousmenu > a:after {content: '+';position: absolute;top: 0;right: 0;display: block;font-size: 1em;padding: 0.7em 0.5em;}
nav#menu.menu li.sousmenu > a.select:after {content: "-";padding: 0.7em 0.5em;}
nav#menu.menu li.sousmenu > ul li {padding-left:1em;text-transform:none;float:none;} 
nav#menu.menu ul,nav#menu.menu ul li {overflow:visible;}
nav#menu.menu > ul > li.parent {float:none;}
nav#menu.menu ul.sousrubrique,nav#menu.menu ul{border-bottom: 0;}
}

Ça apparaîtra comme ça :

Code CSS du menu déroulant sur Blogger
Code CSS du menu déroulant sur Blogger

Comprendre ce code

Si vous êtes curieux de comprendre à quoi correspond ce code, je vais vous en dire un peu plus.

La partie du code intitulée « Mise en forme générale » permet de définir de grandes règles qui vont s’appliquer à notre menu, par exemple la couleur du texte des liens (noir : #000), le fait de mettre le nom des éléments parents en majuscules (« uppercase »), la couleur de fond quand on survole les liens (ici, un jaune léger : #FFE49F), le fait que par défaut on n’affiche pas le bouton MENU (on n’en a besoin que sur smartphone)…

Vous pouvez modifier les couleurs, il faut simplement les indiquer en notation hexadécimale. Vous pouvez vous aider de cet outil pour trouver le code hexadécimal d’une couleur.

La partie suivante permet de définir l’affichage partout sauf sur les smartphones : on précise que dans ce cas, les éléments de menu s’affichent en ligne (« inline-block »), que les sous-rubriques sont cachées par défaut (« visibility:hidden »)… mais que lorsqu’on les survole (« hover »), elles deviennent visibles (« visibility:visible; »).

Enfin, on précise ce qui se passe sur un écran inférieur à 500 pixels de large : cette fois-ci, les liens ne s’affichent plus en ligne mais les uns sous les autres (« block »), on ajoute un petit signe + à côté des éléments qui ont des sous-rubriques, on décale un peu les sous-menus vers la droite en ajoutant un espace à gauche (« padding-left »), etc.

Insérer les codes HTML et JavaScript sur votre blog Blogger

Dernière étape : insérer le code du menu proprement dit sur votre blog. Nous allons rassembler les bouts de code Javascript et HTML créés précédemment et insérer le tout dans un gadget Blogger.

Dans l’administration de votre blog, allez dans la rubrique Mise en page et cliquez sur « ajouter un gadget » à l’endroit où vous voulez insérer votre menu. En général, on l’insère sous le header du site.

Ajouter un gadget pour créer le menu
Ajouter un gadget pour créer le menu

Choisissez le gadget HTML/JavaScript et copiez-y le code JavaScript puis le HTML. Ne mettez aucun titre à ce gadget. Vous pouvez enregistrer !

Gadget HTML/Javascript avec le code du menu déroulant
Gadget HTML/Javascript avec le code du menu déroulant

Sur un modèle Simple, voilà l’affichage que vous devriez obtenir depuis un ordinateur.

Rendu du menu déroulant responsive
Rendu du menu déroulant responsive

Et sur petit écran, voici le rendu avec successivement : le menu fermé ; le menu ouvert qui n’affiche pas les sous-menus par défaut ; le menu quand on clique sur un élément parent et que ses sous-menus s’affichent.

Menu déroulant mobile Blogger
Menu déroulant mobile Blogger

A propos du menu mobile

Le menu mobile ne sera affiché que si votre modèle est prévu pour s’afficher en responsive design. Si vous utilisez le modèle mobile par défaut de Blogger, vous ne verrez pas le menu sur un smartphone.

Pour finir, gardez à l’esprit que votre menu doit rester fonctionnel. N’y mettez pas trop de sous-menus ! En croyant aider le visiteur, vous risquez souvent de créer de la confusion chez lui. J’espère que ce tutoriel vous aidera à y voir plus clair. Encore une fois, si vous cherchez quelque chose de plus simple, vous pouvez consulter mon tutoriel pour créer un menu horizontal sur Blogger… sans oublier les autres tutos Blogger !


Poster un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Lorsque vous postez un commentaire sur le blog, le nom indiqué dans la case "Prénom" ainsi que votre message apparaîtront publiquement. Votre adresse e-mail restera confidentielle.

123 commentaires sur “Comment créer un menu déroulant responsive sur Blogger ?

  • Dan

    Bravo pour ton tuto Marlène,

    J’ai suivi tes instructions et tout a fonctionné à merveille sur mon site (en mode beta). Et comme tu indiques dans ton article, cela ne fonctionnera pas sur les smartphones avec modèle de blogger non responsive.

    Ma question: Y a-t-il un autre tuto permettant de modifier le code afin de rendre responsive le modèle de Blogger?

    Dans la négative: En appliquant le code pour des menus déroulants, je gagne sur la fonctionnalité de mon blogue sur ‘grand écran’ mais je perds le menu initial non-déroulant sur le smartphone. Est-il possible de conserver le menu ‘non déroulant’ sur le smartphone ?

    Merci pour tes conseils

    Répondre à Dan
    • Marlène

      Hello Dan, je ne propose pas ce genre de tuto car pour rendre un modèle responsive, c’est vraiment du code qui va dépendre de la façon dont le code « non-responsive » est construit, ce sera donc propre à chaque site. Il y a un cours sur le responsive design sur OpenClassrooms si le sujet t’intéresse.

      Pour le menu, regarde si son code comporte cet attribut mobile ='yes'.

      Répondre à Marlène


Si vous aimez les articles du site, n'hésitez pas à faire vos achats sur Amazon.fr via ce lien ; il me permettra de toucher une commission grâce au programme Partenaires Amazon EU.