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


Si on m’avait donné 1€ à chaque fois que l’on m’a réclamé ce tutoriel, je serais probablement en train d’écrire cet article sur une plage à l’autre bout du monde :) 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

Petite note préalable

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, 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).

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.

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 !

Thèmes : Blogger Navigation 

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.

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

  • Vanessa

    J’ai réussis à résoudre le problème en supprimant la parenthèse en trop !
    et j’ai resolu le problème en écrivant overflow:hidden
    c’était le soucis de la crossbar :)
    par contre pour la taille de la police j’ai posté mon message dans la bonne rubrique.
    Merci et bonne journée à toi !

    Répondre à Vanessa
  • Vanessa

    Bonjour Marlène,

    me revoilà …. lol

    Alors voici mes questions :

    1.sur mon profil à droite il y’a un onglet vertical gris comme pour descendre le niveau de lecture, je suppose qu’il est apparue à cause du fait que mon menu est trop « gros » puisque quand je passe sur « voyage » je vois à peine le menu déroulant écosse créer en dessous. Comment supprimer cette barre ou le cas échéant comment changer la taille de mon menu ?

    2. J’ai rattaché correctement les adresses de l’article correspondant au menu déroulant écosse ainsi que la catégorie, idem pour la page Accueil, cependant quand je vais prévisualiser mon blog et que je clique sur écosse ou sur accueil ou sur la rubrique ça m’affiche « cette page n’existe pas / page introuvable). Je trouve ça bizarre parce que mon article est bien publié…;
    Merci de ton temps,
    :)

    Répondre à Vanessa
    • Marlène

      Hello, pour ta question 1., je ne peux malheureusement pas te répondre sans analyser le code du site, chose que je n’ai pas le temps de faire « individuellement ». Pour ta deuxième question, il y a une parenthèse en trop dans ton lien, à la fin. C’est ce qui fait que le lien bugue (après ton « .html » tu as ajouté une parenthèse).

      Répondre à Marlène
  • Vanessa

    Bonjour Marlène,

    je souhaite ouvrir un blog simple pour parler de mon voyage en Ecosse (organisation déroulé) à des amies d’un groupe facebook. Je ne pensais pas que cela soit aussi difficile ! J’ai réussis ton tutoriel sur mettre son menu en horizontal, mais pour le menu déroulant impossible cela ne veut pas fonctionner…. je ne comprends pas j’ai passé deux jours à refaire et refaire les codes et ma sous catégorie ne se met qu’en dessous de la catégorie Parent qui elle remonte, du coup mon menu principal n’est pas homogène….
    Peut-tu aller jeter un coup d’oeil et me dire ce qui cloche ?

    Merci :)

    Répondre à Vanessa
    • Marlène

      Bonjour Vanessa, tu ne sembles pas avoir correctement suivi le tutoriel car tu as modifié le nom des classes indiquées dans l’article. Par exemple, je lis dans ton code <li class="Voyages">. C’est normal que ça ne fonctionne pas.

      Répondre à Marlène
    • Vanessa

      Bonjour Marlène,
      merci beaucoup pour ta réponse,
      je pensais qu’il fallait changer tous les intitulés selon mon menu…
      en tout cas merci de ta réactivité.

      Bonne journée !

      Répondre à Vanessa
  • discoveRin

    Coucou Marlène !

    Tout d’abord un énorme merci pour ton tuto qui est topissime et très bien expliqué.
    J’ai un léger souci, et j’ai dû me planter quelque part mais impossible de savoir où : si le menu sur PC marche très bien, et sur mobile aussi, sur mobile il apparaît non stop, c’est-à-dire que je ne peux pas le ferme lorsque je clique à nouveau sur « menu ». Il apparaît tout le temps et masque donc l’intégralité de ma page sur mobile …
    Saurais-tu comment remédier à ce souci ? Je peux te passer mes codes si besoin est :)

    Merci encore !
    Rin

    Répondre à discoveRin
    • Marlène

      Hello Rin, je ne peux malheureusement pas t’expliquer à quoi c’est dû, peut-être une interaction avec un élément de ton thème existant :-/

      Répondre à Marlène
    • discoverin

      Hey!
      Merci pour ta réponse !!
      En fait je m’en suis sortie, j’avais changé le nom de la balise  » nav  » et ça venait de là.
      Merci pour ce tuto en tout cas!☺

      Répondre à discoverin
    • Marlène

      Ah d’accord :) En fait, beaucoup de balises correspondent à des « codifications » prédéfinies et universelles.

      Schématiquement, c’est un peu comme si tu disais « je n’aime pas le mot pomme donc je décide que ce fruit s’appelle un groumigraba« . Sauf que si tu demandes ça à ton marchand de fruits et légumes, il va faire des yeux ronds et te répondre qu’il ne connaît pas cette espèce ;) Tout simplement parce que le nom « pomme » correspond à un sens partagé par tout le monde. C’est pareil avec le code, il y a des éléments qu’on peut nommer comme on veut ou presque (comme les classes en CSS, qui permettent de personnaliser le style d’un élément du design) et des éléments qui ont un nom prédéterminé.

      Répondre à Marlène
    • discoverin

      Ahah oui j’avais cru comprendre tout ça, je code depuis le lycée pour le loisir, mais parfois je bidouille des trucs en pensant bien faire et je finis par tout faire planter ahah.

      Et en fait j’avais déjà un code pour la navigation (pour la centrer et la fixer en haut) et je croyais que les deux faisaient interférence donc j’avais changé tous les noms et puis j’ai réalisé deux mois plus tard que ça bugguait sur le téléphone parce que sur le pc ça ne changeait rien.
      Et en fait bah j’ai tout essayé tout bidouiller et j’ai fini par sauvegarder mes codes sur un bloc-notes et j’ai tout repris de zéro ton tuto, et ça a marché ahaha ! ^^

      Je suis contente car grâce à tes tutos et ceux d’autres blogueuses généreuses j’apprends énormément de choses et je progresse à fond! Ca fait trop plaisir :) Alors merci !!

      Répondre à discoverin
  • Brisco

    Bonjour Marlène et merci pour tes supers tutos super utiles! J’aurais une question par rapport à la taille du menu. La page de mon blog a une largeur de 1200 px (ce que j’ai moi même voulu :-) ) Du coup, le menu est tout petit dessus, j’ai essayé de bidouiller le code dans la section pour écran, en augmentant, le min-width mais rien n’y fait. Du coup je m’en remet à tes conseils avisés. D’avance merci!

    Répondre à Brisco
    • Marlène

      Hello, pour ma part je ne jouerais pas sur la largeur mais plutôt sur la marge entre les éléments… sachant qu’il faut définir des conditions pour que ça s’ajuste à différentes tailles d’écran. Imaginons que je dise « il faut une marge de 25px autour de chaque élément de menu ». Je retire la notion de « margin:0 » de la ligne « nav#menu.menu ul,nav#menu.menu ul li ».

      Et je crée des lignes avec :
      nav#menu.menu ul li {margin:0 25px;}
      nav#menu.menu ul li li {margin:0;}

      En gros, les éléments du menu parent ont 25px de chaque côté mais les éléments du sous-menu n’ont pas cette marge. Ensuite, il faudrait adapter ça à différentes tailles d’écran car un tel espace, qui paraît confortable sur un grand écran, peut l’être beaucoup moins sur une tablette ou un écran plus petit.

      Répondre à Marlène
  • Misstephy

    merci beaucoup pour ce tuto clair et super utile, j’ai enfin un chouette menu ;)
    Petit problème toutefois pour la version mobile où le menu s’affiche à toute la page en vertical et ne fonctionne pas , aurais tu une solution?
    merci beaucoup!!

    Répondre à Misstephy
    • Marlène

      Hello, j’imagine qu’il doit y avoir une interaction avec un autre élément de ton thème mais je ne peux malheureusement pas te dire ce qui coince.

      Répondre à Marlène
  • philippe retor

    On peut dire que ça m’a foutu un beau bordel !
    Et pour revenir en arrière je me démerde…

    Répondre à philippe
    • Marlène

      Bonjour, avant toute modification sur un thème, il est conseillé d’effectuer une sauvegarde. Ainsi, si vous oubliez un bout du tuto/du code, que vous « perdez le fil » (ça peut arriver qu’on soit interrompu), qu’il y a une incompatibilité entre certains éléments du thème et le tuto, ça permet de restaurer facilement la version antérieure. D’ailleurs, j’ai bien mentionné ce conseil dans le tutoriel…

      Répondre à Marlène
  • Laure

    Bonsoir,
    Quelle galère pour moi !!
    déjà peux t’on fixer la barre en haut ainsi lors du défilement elle est toujours visible ?
    j’ai de plus sur le dessus de la barre une espèce de ligne en pointillés pas tres esthétique là j’ai mis une barre gris foncé donc ça ne se voit pas trop mais sous fond plus clair ce n’est pas terribe

    il y a t’il une possiblité de donner un contour à cette barre pour la rendre plus esthétique ? comme celle que j’ai actuellement sur le site

    pour le moment j’ai laissé la barre de blogger et celle ci qui reste fixe et donc pratique en attendant de pouvoir la supprimer
    on voit le contour qu’elle possède et que j’aimerais bien reproduire

    encore bravo pour votre blog tres pro tres sympathique et tres jolie
    et evidemment plein d’astuces du feu de dieu

    Répondre à Laure
    • Marlène

      Bonjour Laure, pour fixer une barre de menu il faut utiliser l’attribut « position:fixed; » sur celle-ci. En l’état, je n’ai pas testé et il se peut qu’il y ait d’autres ajustements à faire dans le code du menu pour que ça fonctionne correctement.

      On peut ajouter une bordure grâce à une instruction de type nav#menu {border:1px solid #000}, en remplaçant « #000 » par le code hexadécimal de la couleur souhaitée (cf l’article où je donne un site pour trouver l’équivalent hexadécimal d’une couleur). On peut changer l’épaisseur de la bordure (au lieu de « 1px », mettre « 5px » par exemple).

      La ligne en pointillés n’est pas créée par mon tuto, elle doit venir du code existant de ton thème donc c’est à ce niveau qu’il faut chercher pour la retirer.

      Répondre à Marlène
  • Christine

    Allo!
    Merci pour les tutos, ça m’a bien aidé avec mon blog. J’ai suivi tes tutos pour faire un menu responsive sur mon blog. J’ai changé la couleur par défaut quand on survole le lien (hover). En copiant ton code, il devenait orangé sur mon blog et j’aimais pas, donc je l’ai mis gris. Toutefois, le bouton MENU sur mobile demeure orangé. Est-ce que je peux le mettre gris aussi, comme le reste? Si oui, comment?
    Merci!

    Répondre à Christine
    • Marlène

      Hello, il faut que tu changes la ligne « background: #FFE49F; » en remplaçant #FFE49F par la couleur de ton choix en notation hexadécimale :)

      Répondre à Marlène
    • Christine

      C’est génial, merci!

      J’avais pourtant cherché une autre ligne « Background », mais bon, j’étais aveugle. Ça fonctionne parfaitement maintenant.

      Merci!

      Répondre à Christine
  • Aurélie - Mounette

    Bonjour,
    J’ai déjà un menu sur mon blog qui me convient bien. Du coup, est ce faisable de créer un autre menu rien que pour le site sur mobile et demander à cacher l’autre quand on est sur mobile pour le pas qu’il y est un doublon?
    Merci beaucoup pour votre aide :D
    Aurélie

    Répondre à Aurélie
    • Marlène

      Bonjour Aurélie, pour dissimuler certains éléments en fonction de la taille de l’écran, il faut utiliser ce qu’on appelle les media queries, c’est ce que je fais sur No Tuxedo pour afficher un menu différent sur mobile et sur desktop.

      Répondre à Marlène
    • Aurélie - Mounette

      Ah oui d’accord mais l’utilisation de Mobile:yes ca ne peut pas fonctionner?
      ca m’a l’air compliqué, merci quand meme et bonne journée

      Répondre à Aurélie
    • Marlène

      A ma connaissance, ça permet de rendre une zone de gadget accessible sur mobile mais pas d’offrir un contrôle fin sur ce qui s’affiche sur chaque appareil :)

      Répondre à Marlène
  • Maïlys LD

    Bonsoir,

    Si j’ai déjà modifié et créé l’apparence de mon menu, est-ce que le fait de coller le code JavaSript va faire que je vais tout devoir recommencer ?

    Est-ce que ce code JS va modifier l’apparence de mon MENU sur mon blog sur ordinateur ou rien en va bouger de ce côté-là ?

    Pour le moment, ma version mobile est la version « simple » de Blogger, je n’ai pas activé le bouton d’appliquer le thème que j’ai créé car tout s’affiche en immense et tout décalé (mes sous-titres en énorme alors que le titre de mon blog est minuscule, etc).

    Ce code JavaScript va juste permettre au MENU de s’afficher, pas au reste du blog, c’est bien cela ?

    As-tu créé un article pour le reste du blog ou saurai-tu me dire comment faire ? :)

    Répondre à Maïlys
    • Marlène

      Hello Maïlys, je te réponds ici et supprime ton autre commentaire qui concerne le même problème. Le tutoriel est un ensemble. Si tu ne reprends qu’un bout, ça ne fonctionnera pas sur ton blog. Le code ne concerne que le menu, ça permet d’ajouter un menu déroulant sur son blog, avec des rubriques principales et des sous-rubriques, mais ça ne touche pas au reste du contenu du blog (articles, widgets, etc).

      Pour ton histoire de « menu déroulant dans un menu déroulant », tu souhaites simplement ajouter un niveau de sous-menu. Pour ma part j’ai choisi délibérément de ne pas le proposer dans le tutoriel car je trouve que les « mega menus » deviennent de moins en moins efficaces à l’ère du mobile… mais il faut rajouter des parties au code, d’une part pour créer une liste supplémentaire et ensuite pour définir dans la partie CSS le comportement de ces éléments de « troisième niveau ». Si tu ne t’en sors pas, tu peux demander de l’aide sur un forum de code type StackOverflow.

      Répondre à Marlène
    • Maïlys LD

      Du coup, le fait de mettre le code JavaScript ne change rien à mon menu par rapport à celui sur ordinateur (donc pas le menu responsive je suppose). Il doit sûrement me manquer quelque chose quelque part, mais je vais continuer de chercher. :)
      Par contre, maintenant mon thème s’affiche sur mobile comme sur l’ordinateur alors qu’avant c’était du n’importe quoi.

      Répondre à Maïlys
    • Maïlys LD

      En fait, tu peux supprimer le message juste avant. Mettre le code JS n’a rien changé du tout à mon menu même sur mobile.
      Et si maintenant mon thème mobile s’affiche comme sur l’ordinateur c’est juste parce que j’ai désactivé l’option d’affichage spéciale mobile… Bref, du coup rien n’a changé, j’ai toujours le même soucis d’affichage que ce soit pour le menu (qui ne s’affiche pas du tout sur la version mobile) ou pour tout le reste qui s’affiche n’importe comment. :/

      Répondre à Maïlys
    • Marlène

      Hello, il ne suffit pas de copier-coller le code Javascript pour que ton menu existant devienne adapté aux mobiles. Le tutoriel proposé est un ensemble où toutes les parties sont liées (HTML, CSS, JS) pour que ça fonctionne bien.

      Répondre à Marlène
  • Crash Tolo

    Salut la rêne, j’ai suivis tout les conseils que tu as donné dans cet article, heureusement le menu fonctionne avec les ordinateurs mais malheureusement n’est pas compatible avec les smartphone.
    Peux-tu m’aider à afficher sur les petits écran je suis sur un modèle simple fournit par Blogger.

    Répondre à Crash
    • Marlène

      Bonjour, le menu que j’ai mis en ligne sur Codepen et que je présente dans le tuto est bien responsive. En revanche, attention à l’avertissement indiqué en conclusion : « 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 ».

      Répondre à Marlène
  • Tamara

    Bonjour,

    voila j’ai un petit souci par rapport au menu de mon blog. Il fonctionnait très bien, mais j’ai voulu changer l’apparence de mon blog et depuis, impossible d’afficher les sous-menu… Je ne sais pas d’où ça vient, pourriez-vous m’aider ?

    Merci beaucoup, désolée du dérangement ^^

    Répondre à Tamara
    • Marlène

      Hello Tamara, il faut simplement comparer le code du tutoriel avec le code qui figure actuellement sur le blog et voir s’il y a des lignes qui ont disparu.

      Répondre à Marlène
    • Tamara

      Merci beaucoup pour votre réponse ! Malheureusement je n’ai rien repéré d’anormal dans les lignes, j’ai même refait un copié collé du code d’origine, mais rien n’a changé… je me suis débrouillée autrement, ce n’est pas bien grave :) Merci quand même !

      Répondre à Tamara
  • Egideofbooks

    Bonjour,

    J’ai bien réussi a faire ton menu déroulant, hors les sous rubriques s’affichent sur la gauche automatiquement… J’aimerai qu’ils s’affiche en dessous de la rubrique principal. De plus, j’ai du coller le HTML Dans le CSS de personnalisation du thème. Pour la couleur et l’écriture, je verrais ça après. Car cela fait genre 1 mois j’essaye de faire un menu déroulant et j’suis passé par 4 tutos. Seul le tiens à fonctionner ! xD

    Peux-tu m’aider ? Pour l’instant mon blog est en privé car c’un blog test pour éviter de faire des bêtises sur mon principal. Merci

    Répondre à Egideofbooks
    • Marlène

      Je ne peux malheureusement pas aider sans voir le code… C’est probablement parce que l’un des éléments du thème actuel entre en conflit avec l’affichage du menu. Par ailleurs, copier le HTML dans la partie CSS est une très mauvaise idée, ça risque de provoquer beaucoup de soucis d’affichage par la suite ;)

      Répondre à Marlène
    • Egideofbooks

      Il faut donc que je me mette en public c’est ça pour que tu vois le code ?

      Le CSS, je l’ai lu en commentaire plus haut c’est dans personnaliser le thème ect, c’est pour ça que je lai fais, sinon cela ne fonctionner pas… Cela m’afficher le code carrément sur le blog… Il n’y a que comme ça que j’ai obtenu un résultat.. :/

      Répondre à Egideofbooks
    • Marlène

      Ah mais tu parles de mettre le code CSS dans le modèle HTML, si c’est ça bien sûr que ça ne pose pas de problème, c’est même ce qu’il faut faire ;) Le problème serait de mettre du HTML dans la partie « style » du code du thème. Si j’ai le temps et que je trouve le problème rapidement, je peux effectivement regarder ton code si le blog est en public (et je te conseille la lecture de cet article pour savoir pourquoi c’est utile ;)).

      Répondre à Marlène
    • Egideofbooks

      D’accord pas de soucis,
      après lecture de l’article, j’ai mis mon blog en public pour te montrer le soucis. https://egidebook-test.blogspot.fr/, c’est un blog test donc pas de liens dans les rubriques sous rubrique ect par contre. Et oui j’ai mis les choses là où je t’ai dis sur le CSS c’pour ça ^^’ vu que j’y connais absolument rien.
      J’ai suivi ton tuto à la lettre et je n’ai rien changer du tout. Mais ca m’affiche juste sur la gauche à chaque fois, enfin tu le verras. ^^

      Merci d’avance

      Répondre à Egideofbooks
    • Marlène

      Hello, tu me dis que tu n’as « rien changé du tout »… sauf que dans ton code, je vois des modifications. Tu as des classes qui s’appellent « Rubrique » (qui n’existent pas dans mon tutoriel), pas de classe intitulée « sousmenu ». Je pense donc que tu as oublié des morceaux du code et/ou que tu as modifié des choses… car dans mon tuto, je n’ai aucune classe qui s’appelle « Rubrique ».

      Répondre à Marlène
    • Egide

      Je ne parlais pas de ça mais du code CSS que je n’ai pas changer.. après je pensais qu’on pouvais les changer c’est pour me rappeler que cet la rubrique ect donc il faut que je remette comme dans le tutoriel? C’est ça qui poserait soucis ? Oo

      Répondre à Egide
    • Marlène

      C’est probable ! Le code CSS est écrit pour s’appliquer à des éléments HTML précis. Si tu changes le nom de ces éléments, forcément le code ne s’applique plus… et l’affichage se modifie.

      Répondre à Marlène
    • Egideofbooks

      Merci ! C’était ça ^^
      Je te recontacte au cas ou j’ai un autre soucis, pour l’instant, ça s’affiche en dessous mais à côté ensuite si le mot est petit. Je vais voir si je peux changer ça dans la personnalisation. :)

      Répondre à Egideofbooks
  • Cri04

    Bonjour,
    J’avais mal tapé l’adresse mail pour la réponse
    J’ai copié les fichiers codepen dans mon site test (c’est pas blogger) après l’avoir modifié. Sur codepen, ça fonctionne parfaitement, mais dans mon test, en mode mobile, le menu change mais apparaît ouvert. J’ai bien copié le code javascript.
    Merci de vos suggestions

    Répondre à Cri04
    • Marlène

      Bonjour, impossible pour moi de donner une explication sans me plonger dans le code de votre site, malheureusement. Demandez peut-être conseil sur un forum dédié au développement web (sites type Stack Overflow), il y aura peut-être des membres bénévoles qui auront le temps d’analyser les interactions possibles entre le code du site et celui du menu.

      Répondre à Marlène
  • Garance

    Bonjour Marlène,

    Merci pour tes nombreux tutos, grâce à toi, je construis petit à petit le blog de mes rêves. J’ai effectué sans problème ce tuto pour ma barre de navigation, mais j’ai juste un petit problème : à gauche et à droit de mon menu, il y à une espèce de ligne grisâtre qui traverse l’écran, ce qui est assez moche. Ca fait des jours que je cherche une solution mais je ne trouve pas. J’ai aussi essayé de masquer le problème en plaçant un fond blanc en arrière-plan mais il ne se met que derrière la partie inférieure du blog… Aurais-tu un conseils à ce sujet? Je commence à désespérer :(

    Un tout grand merci <3

    Garance

    Répondre à Garance
    • Marlène

      Bonjour Garance, je ne vois pas de ligne grise à gauche/à droite du menu dans ma résolution d’écran mais j’ai réduit la fenêtre et j’ai effectivement l’impression qu’il y a un souci. En fait, ton thème actuel prévoit une marge qui décale l’emplacement de ton menu vers la droite (au niveau de la ligne .tabs-inner .section, il y a une instruction « margin: 0 16px; ». Si tu mets seulement margin:0;", le menu n’a plus ce décalage vers la droite mais comme je ne connais pas ton thème dans le détail, je ne sais pas si le fait de supprimer totalement cette marge peut jouer sur d’autres éléments. A tester, donc :)

      Répondre à Marlène
    • Garance

      Bonjour,

      J’avais entretemps posé la question sur le forum blogger et quelqu’un a pu m’aider :) Par contre je vais aller voir ce que tu me dis sur la marge car je ne vois pas cela sur mon propre ordinateur, merci de m’avoir prévenue :D

      Répondre à Garance
  • Clémence

    Coucou Marlène , merci pour tes tutos !
    Mais j’ai un petit souci, j’ai réussi à faire les premières étapes mais arrivé à la mise en page de mon menue impossible de trouver ]]> dans mon code….
    Merci d’avance !

    Répondre à Clémence
    • Clémence

      ]]> cette ligne plutôt (petit beugue… :/)

      Répondre à Clémence
    • Marlène

      Hello Clémence, parfois il suffit qu’il y ait un saut de ligne en plus dans ton thème pour que le moteur de recherche ne trouve pas l’expression entrée. Tu peux essayer d’entrer un bout du code au lieu de chercher la ligne exacte…

      Répondre à Marlène
    • Clémence

      J’ai réussi à trouver la ligne où il fallait rentrer le code mais rien ne s’affiche sur mon blog…

      Répondre à Clémence
    • Marlène

      Bonjour Clémence, le code inséré au niveau de la partie style ne s’affiche pas sur le blog, il est interprété pour influer sur l’affichage de la partie en HTML. Je pense que tu n’as pas suivi tout mon tuto car il y a des morceaux de code qui figurent dans mon tuto et que je ne retrouve pas sur ton blog. Créer un menu déroulant exige un peu d’aisance avec le code pour la personnalisation, si tu as du mal tu peux essayer ce menu plus simple (mais pas déroulant) !

      Répondre à Marlène
  • Ade

    Bonjour Marlène,

    Super tes tutos! D’ailleurs je suis sûrement pas dans la bonne conversation mais je n’ai rien trouvé sur ton blog concernant le diapo Carousel alors je voulais savoir si tu avais une idée de pourquoi mon diapo disparait lorsque je publie un nouvel article? Des que je clique sur « rétablir le brouillon » le diapo reapparait!
    En tous cas merci de ton aide!!

    Répondre à Ade
  • Tamara

    Bonjour ! J’avais un menu qui ne fonctionnait plus et j’ai pu en refaire un grâce à ce tutoriel, c’est super !
    Merci beaucoup pour vos tutos ! :)

    Répondre à Tamara
    • Marlène

      Merci d’avoir pris le temps de laisser un commentaire ! Bon dimanche :)

      Répondre à Marlène
  • Mikosiwa

    Coucou Marlène,

    Déjà, un peu désolée, je sais qu’il est tard,mais je galère, et je voulais te demander avant d’oublier. Est-ce qu’il est nécessaire de suivre d’abord ton tuto sur comment créer des catégories si on veut faire le menu déroulant, ou on peut directement faire ce tuto? J’espère que tu vas me répondre vite :). Je suis une vraie novice, mais tes tutos sont tellement bien expliqués que ça m’a motivée à essayer.

    Merci d’avance!

    Répondre à Mikosiwa
    • Marlène

      Hello, si tu comptes mettre des catégories dans le menu déroulant, mieux vaut les créer en amont pour pouvoir tester si tout fonctionne et mettre directement les bons liens. Si tu comptes mettre autre chose dans le menu (pages, etc), dans ce cas pas besoin de créer des catégories avant.

      Répondre à Marlène
  • Laura

    Coucou Marlène !
    Déjà merci pour ton tutoriel, j’en ai essayé pas mal d’autre et je n’y arrivais jamais.. Le tient m’a beaucoup aidé, seul petit bémol, mes catégories s’affichent en ligne et tout à gauche de ma barre de navigation (tu pourras le voir sur mon blog). Si jamais tu as la solution, je suis preneuse ;)
    Merci encore pour tes tutos !

    Répondre à Laura
    • Marlène

      Hello, j’ai l’impression qu’il manque des éléments dans le code de ton menu. Par exemple, je ne vois pas l’intitulé « parent » ou l’intitulé « sousmenu » qui figurent dans mon tuto.

      Répondre à Marlène
  • Valérie

    Bonjour Marlène,
    Tout d’abord un grand merci car j’ai tout créé mon blog grâce à vos tutos vraiment de qualité, alors que je n’ai aucune connaissance en informatique. Un tout grand MERCI ! Par contre, aujourd’hui je voudrais créer des menus déroulants alors que j’ai déjà un menu « simple ». Dois-je tout recommencer depuis le début ou simplement ajouter les sous-rubriques sous mon menu existant ? Merci d’avance !

    Répondre à Valérie
    • Marlène

      Tout dépend de votre aisance avec le code :) Quand on maîtrise bien on peut combiner deux tutos pour obtenir le résultat souhaité mais si vous n’êtes pas très à l’aise, mieux vaut recommencer depuis le début.

      Répondre à Marlène
    • Valérie

      Merci beaucoup Marlène ! Je vais y réfléchir ! J’ai tellement peur de tout perdre en cas d’erreur(même si je fais la sauvegarde à chaque fois…)

      Répondre à Valérie
  • Agathe

    Bonjour Marlène,
    Tout d’abord merci pour tes instructions très précises et efficaces !
    J’ai cependant un petit soucis concernant la version mobile, tout a bien fonctionné mais le soucis étant que lorsque l’on ouvre le blog sur téléphone, le menu vient descendre en permanence sur la page ce qui empêche la lecture. Quelle ligne du code dois-je modifier pour le laisser statique ?
    Merci de ta réponse !

    Répondre à Agathe
    • Marlène

      Hello, il n’y a rien dans le code qui dit au menu de descendre et sur le blog où j’ai créé le tuto, il n’y a pas ce problème… donc je pense qu’il est provoqué par un élément du code de ton thème existant.

      Répondre à Marlène
    • Agathe

      Merci beaucoup de ta réponse, je vais donc chercher ça !

      Répondre à Agathe
  • david

    Bonsoir,

    j’ai suivi votre tuto et tout s’est passé comme prévu jusqu’aujourd’hui. Pour les articles existant avant de créer le menu déroulant çà a fonctionné,j’ai réussi a les placer dans les catégories avec les libellés correspondant. Mais si je crée un nouvel article, j’ai beau mettre le même libellé qu’un autre article figurant dans la catégorie, celui-ci ne s’affiche pas sur la page de la catégorie en elle meme mais uniquement sur la page d’accueil dans les « articles récents ». j’ai fait quelques test mais rien n’y fait. Auriez-vous une solution pour m’aider ?

    Merci beaucoup!!!

    Répondre à david
    • Marlène

      Bonjour, je n’ai jamais vu ce problème (à part quand il y a une légère différence dans le nom du libellé : un espace en trop, un accent en moins…). Sans l’adresse du blog, je ne peux pas vous en dire plus !

      Répondre à Marlène
    • david

      Bonsoir, je viens d’ajouter l’adresse du blog en question si vous voulez voir. En clair, sur la page d’accueil, le post s’affiche comme post récent mais si vous allez dans la catégorie à laquelle il est sensé se rapporter ( Ethan test -> Jouets ) il ne s’affiche pas sur la page..
      D’ailleurs, merci beaucoup pour ce tuto !!! :-)

      Répondre à david
    • Marlène

      Merci pour l’adresse, je pense que ça pourrait être lié au fait que tu ne renvoies pas vers la même URL : ton menu renvoie vers une version de la page en https… alors que quand on clique sur le libellé « Jouets » on a une adresse en http.

      Répondre à Marlène
    • David

      Ahhh ca pourrait etre cela alors ! Je regarde ca tout à l’heure et vous tiens au courant si ca s’ est solutionné :-) merciiii !!

      Répondre à David
    • david

      Re,
      En testant votre solution, j’ai compris que le problème ne venait pas de l’url en question ( car tous les articles déjà présent sur le blog étaient redirigé eux aussi vers un http) mais plutot du fait que l’article créé était le « dernier » article et donc le plus récent. Lorsque je créée une autre article, celui-ci remplace le précédent dans la « catégorie » « New » et l’article précédent va se placer automatiquement ( biensur en ayant le bon libellé) dans la catégorie à laquelle il se rapporte. Je pense donc qu’au final, cela est plus lié au thème du blog et donc à sa mise en page plutôt qu’à la manière dont est intitulé l’article ou au codage de celui-ci.
      En tout cas, merci beaucoup d’avoir pris la peine de m’aider! :-) car d’une certaine manière, c’est en cherchant comment modifier la redirection http -> https que j’ai trouvé d’ou venait le problème!

      Bonne journée a vous !! :-)

      Répondre à david
    • david

      Maintenant, si vous avez une petite idée pour savoir comment je pourrais non seulement avoir l’article dans les « News » mais également dans la catégorie qui lui correspond en même temps, je suis preneur ! A moins que ça ne soit pas possible ! Je suis a l’écoute de toute idée :-)

      Répondre à david
    • Marlène

      Bonjour David, peut-être qu’effectivement le thème « exclut » l’article le plus récent des flux dans la mesure où il a une présentation différente… Il faudrait demander au créateur du thème ou plonger dans le code pour le savoir.

      Répondre à Marlène
  • Pauline

    Bonjour Marlène,
    et merci beaucoup pour ce tuto.
    J’ai 2 questions :
    – Sur mon site le menu déroulant disparait lorsque je place le menu à cet endroit de ma page (soit l’endroit normal)… Saurais-tu s’il y a une solution, ou si c’est propre au modèle ?
    -Et moins important, est-il possible de réduire la typo de la barre de menu et comment ?
    Merci d’avance !

    Répondre à Pauline
    • Marlène

      Hello Pauline, sauf erreur de copie d’un tuto, la plupart du temps les problèmes d’affichage proviennent du modèle : le thème existant définit certaines règles qui entrent en conflit avec les nouvelles règles de mise en forme que l’on ajoute.

      Pour modifier la taille d’une typo, on utilise la propriété « font-size » (= ce qui signifie littéralement « taille de la police d’écriture »). Par exemple, pour modifier la taille des liens au niveau de cette ligne :
      nav#menu.menu a {display:block;padding:1em;text-decoration:none;color:#000;border:none;}

      On ajoute une taille comme ceci :
      nav#menu.menu a {display:block;padding:1em;text-decoration:none;color:#000;border:none;font-size:0.8em}

      La taille « 0.8em » signifie que la police fera 80% de sa taille « standard ». Si on veut une taille « normale », on écrit « 1em », etc. La taille peut aussi être exprimée en pixels. A la place de font-size:0.8em on aurait pu écrire font-size:12px par exemple.

      Répondre à Marlène
  • celine

    J’ai tenté ce tuto, tout allais bien jusqu’au moment de copier le code CSS avant « skin », en effet cela s’affiche après sur le blog, je ne comprend pas pourquoi…
    Je n’ai pas les ]] avant skin …

    En esperant que tu puisses m’aider :)
    Merci

    Répondre à celine
    • Marlène

      Il faut copier le code à l’endroit où se trouvent les autres styles de ton blog, il n’est pas censé s’afficher sur le blog, c’est un code que le visiteur ne voit pas s’il est copié au bon endroit :)

      Tu peux essayer une autre méthode : dans le menu « Thèmes », clique sur « Personnaliser » puis va dans le menu « Avancé » et dans le sous-menu « Ajouter le fichier CSS ». Tu copies les informations de style ici et tu sauvegardes en cliquant sur « Appliquer au blog ».

      Répondre à Marlène
  • CarolinaRosa

    Vraiment merci pour tous ces tutos vraiment bien expliqué!

    Répondre à CarolinaRosa
  • Victor

    Salut Marlène,
    Merci beaucoup pour ce tuto, mais il reste une barre grise au dessus de mon menu déroulant. Aurais-tu une solution pour l’enlever ?

    Répondre à Victor
    • Marlène

      Hello, je ne peux pas accéder à ton blog à l’adresse indiquée dans ta signature donc je ne peux malheureusement pas t’aider.

      Répondre à Marlène
    • Victor

      Ok, j’ai changé le lien :)

      Répondre à Victor
    • Marlène

      La ligne n’est pas liée au menu, elle est causée par d’autres éléments de ton modèle, .tabs-inner .section:first-child ul et .tabs-inner .widget ul qui spécifient des bordures.

      Répondre à Marlène
    • Victor

      Merci beaucoup pour ta réponse !

      Répondre à Victor
  • sophia

    aah et je voudrais également diminuer la police mais que dans les sous-menus!
    Merci beaucoup

    Répondre à sophia
    • Marlène

      Hello Sophia, le fond blanc se change au niveau des zones spécifiant « background:#FFF; ». #FFF désigne la couleur blanche en notation hexadécimale, il suffit de remplacer ça par la couleur de ton choix (en notation hexadécimale également). Pour le centrage et la police, ça dépend du code actuel de ton blog. On peut définir une police à l’aide de la propriété « font-family » que l’on ajoute à la classe CSS dont on souhaite changer la police… et définir sa taille avec la propriété « font-size ».

      Répondre à Marlène
  • sophia

    Bonjour Marlène!
    Merci pour ce tuto qui est super. Pourrais-tu m’aider car je n’arrive pas à changer le fond blanc, la police d’écriture et à centrer le menu.
    Merci enciore

    Répondre à sophia
  • Thomas

    Salut Marlène,
    Je suis actuelement en train de créer mon blog et avant de me lancer dans l’écriture de mes articles j’aimerai avoir bien « calé » la mise en forme.
    J’avance doucement et j’ai utilisé ton tuto pour créer des menus déroulant. Jusqu’ici tout était parfait.
    Quand j’ai changé ma présentation d’article en page d’accueil, je me suis rendu compte que les menus déroulant passé derrière certain éléments des articles.
    Aurai tu une solution pour empêcher ça ?
    Merci d’avance :)

    Répondre à Thomas
    • Marlène

      Hello Thomas, c’est parce que la date de tes articles comporte déjà une instruction « z-index »:
      h2.date-header {
      z-index: 999;
      }

      Cette instruction indique que la date doit être « par-dessus » tout le reste. Essaie de modifier le z-index de cette partie de ton code en ajoutant des « 999 » de telle sorte que le nombre soit plus élevé que le « 999 » existant :) Par exemple :
      nav#menu.menu ul, nav#menu.menu ul li {
      list-style-type: none;
      padding: 0;
      margin: 0;
      z-index: 999999;
      background: #FFF;
      }

      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.