8 septembre 2018

Tuto : Un menu déroulant pour Blog / Blogger

Le fameux menu déroulant pour votre Blog !


Tuto : Un menu déroulant pour Blog/Blogger

Aujourd'hui je m'attaque à un gros morceau : vous expliquer le plus clairement possible la mise en place d'un menu déroulant en remplacement (ou pas comme dans mon cas) de votre barre de menu fixe fournie par blogger.


Ce tuto est valable pour les blogs sous Blogger. Je n'ai pas la possibilité de tester pour les autres, mais on peut partir du principe que si c'est un blog mode CSS HTML la mise en oeuvre doit être identique ou proche.

Voici ma barre de menu fixe fournie par blogger :

Tuto : Un menu déroulant pour Blog/Blogger


Avec comme vous pouvez le compter 8 rubriques.

Mais avec le temps et l'expansion de mes articles, je ne trouvais plus cette barre suffisante et fonctionnelle pour 3 raisons :

- elle ramène à l'ensemble des articles par libellés d'une façon beaucoup trop générale,
- elle donne une navigation moins fine pour les visiteurs,
- et enfin parce que les gadgets j'adore !

Je me suis donc décidée pour installer un menu déroulant.

J'ai parcouru le net de long en large, fait x essais avec des tutos trouvés, certains ne fonctionnaient pas sur mon blog, d'autres ne me plaisaient pas ou étaient vraiment compliqués.
Après plusieurs jours, plusieurs essais et surtout un arrachage de cheveux réguliers, j'ai réussi à mettre enfin en place mon menu déroulant.

Le modèle que j'ai choisi est basique mais fonctionnel et pour le moment c'est tout ce que je lui demande, le coté esthétique je verrais plus tard pour le coup !

Vous pouvez modifier quelques éléments tout de même pour le personnaliser, les couleurs et la police par exemple.
Tuto : Un menu déroulant pour Blog/Blogger

La première chose à mettre en place ce sont les rubriques et les sous rubriques et le nom que vous souhaitez leur attribuer. Il sera toujours possible d'en rajouter, supprimer, modifier, par la suite selon vos besoins.

Je prends pour plus de clarté pour la suite mon exemple personnel qui se décompose ainsi, rouge les rubriques et mauve les sous rubriques :

- Accueil
- Nos lectures :
           - Index des livres
           - Chroniques
- Articles livresques :
           - Index des articles
           - Articles
- Astuce blogging
           - Index 
           - Astuces blog
- Concours
- Contacts
           - Contacts
           - A propos
           - Partenariats

Je vous conseille d'ouvrir une feuille Word, de noter vos rubriques et sous rubriques, puis de copier les codes que je vais vous donner pour pouvoir les modifier avec vos liens personnels tranquillement et ensuite les coller aux emplacements prévus.

Il vous sera plus facile de travailler ainsi, de revoir votre copie si cela ne fonctionne pas car il n'est pas rare que l'on fasse des erreurs de frappe et lorsque c'est copié dans le bloc HTML c'est beaucoup moins visible et beaucoup plus galère à reprendre donc autant effacer et repartir à zéro parfois.
Vous pourrez ainsi également étaler "votre travail" sur plusieurs jours, tout en gardant un blog fonctionnel.

C'est parti !!!

Après avoir listé toutes vos rubriques, il faut lister tous les liens qui amèneront à ses rubriques.

Je vais utiliser un code en fonction de mes propres rubriques, à vous de le modifier selon vos besoins, supprimer des rubriques, en ajouter, en fonction des codes couleurs, et les associer aux liens qu'elles renvoient (soit des pages, soit des libellés).

C'est une étape où il faudra utiliser votre cerveau à pleine puissance, car au départ le code ainsi donné ressemble à du chinois et le personnaliser parait mission impossible, un peu de gymnastique cérébrale et rien de bien méchant au final.

Attention avant toute manipulation dans le codage HTML penser à sauvegarder votre thème blogger.

Rappel :

rouge : rubrique
mauve : sous rubrique
bleu : lien associé

Quand le code commence par <li class="parent" cela signifie qu'il n'y a qu'une seule rubrique
Quand il commence par <li class="parent sousmenu" c'est qu'il aura des sous rubriques

Toutes les lignes de code sont faites sur le même modèle ouverture et fermeture <li  et </li> et entre chaque s'il y a des sous rubriques encore des ouvertures et des fermetures <ul et </ul> ; Si vous oubliez un seul signe votre code ne fonctionnera pas.

Voici le code dans son intégralité :

<a href="#menu" class="menubtn">MENU</a>
<nav id="menu" class="menu" role="navigation">

<ul>

<li class="parent"><a href="https://lien de la rubrique/">Accueil</a></li>
<li class="parent sousmenu"><a href="#">Nos lectures</a>
<ul class="sousrubrique">
<li><a href="https://lien de la sous rubrique">Index livres</a></li>
<li><a href="https://lien de la sous rubrique">Chroniques</a></li>
</ul>
</li>

<li class="parent sousmenu"><a href="#">Articles livresques</a>
<ul class="sousrubrique">
<li><a href="https://https://lien de la rubrique">Index articles</a></li>
<li><a href="https://lien de la rubrique">Articles</a></li>
</ul>
</li>

<li class="parent sousmenu"><a href="#">Astuces blogging</a>
<ul class="sousrubrique">
<li><a href="https://lien de la sous rubrique">Index</a></li>
<li><a href="https://lien de la sous rubrique">Astuces blog</a></li>
</ul>
</li>

<li class="parent"><a href="https://lien de la rubrique">Bricolage/Déco</a></li>

<li class="parent"><a href="https://lien de la rubrique">Concours</a></li>

<li class="parent sousmenu"><a href="#">Contacts</a>
<ul class="sousrubrique">
<li><a href="https://lien de la sous rubrique">Contacts</a></li>
<li><a href="https://lien de la sous rubrique">A propos</a></li>
<li><a href="https://lien de la sous rubrique">Partenariats</a></li>
</ul>
</nav>


Vous copiez collez ce code sur votre page Word et vous le modifiez avec vos propres rubriques et sous rubriques, vous remplacer les liens par vos liens qui renvoient à la bonne page (pages ou libéllés selon, par exemple dans mon cas la rubrique Chroniques renvoie au libellé Livres, c'est à dire que dans cette catégorie vous aurez tous les articles ayant le libélé Livres. Par contre la sous rubrique Index articles renvoie à un lien page unique).

A la suite de ce code, vous ajoutez cette partie sans la modifier, c'est le code JavaScript qui permet la fonctionnalité du menu sur mobile.

<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>

Où coller ce code ? Tout simplement dans un gadget HTML.

Vous allez sur votre tableau de bord, MISE EN PAGE - choisir votre zone de gadget normalement en haut - AJOUTER UN GADGET - choisir le gadget HTML - coller votre code et ENREGISTRER


Tuto : Un menu déroulant pour Blog/Blogger
Voilà vous venez de faire la partie la plus fastidieuse. Soufflez faites une pause !

Maintenant direction la modification du code HTML.

Donc comme d'habitude, pensez à sauvegarder votre thème avant toute modification de celui ci.

Puis vous vous rendez dans le tableau de bord THEME  - MODIFIER
Clic à l'intérieur du cadre CTRL F rechercher la balise : ]]></b:skin> et coller le code juste avant ces deux crochets ]]


Tuto : Un menu déroulant pour Blog/Blogger
Le code dans son intégralité :


/* MENU DEROULANT */
nav#menu.menu a {display:block;padding:1em;text-decoration:none;color:#000;border:none;font-size:18px}
nav#menu.menu a:hover {background:#ffffff;}
.menubtn {display:none;}
nav#menu.menu ul,nav#menu.menu ul li {list-style-type:none;padding:0;margin:0;z-index:99;background:#a9bfd6;}
nav#menu.menu > ul > li > a {text-transform:lowercase;}
/* AFFICHAGE GRAND 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:##a9bfd6;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 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: #a9bfd6;}
.menubtn:before{content: "";position: absolute;left: 0.5em;top: 0.75em;width: 1em;height: 0.15em;background: white;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;}
}


C'est sur ce code qu'il faut agir pour modifier l'apparence de votre menu déroulant quelques exemples en gras dans le code.
Le choix de la police : Font Family : Georgia (verdana, arial, times, courier il en existe tellement à vous de choisir)

Font-size est la taille de la police.

Couleur du texte : #000 c'est à dire noir dans cet exemple.

text-transform:lowercase signifie que toutes les lettres sont en minuscule. Si vous les souhaitez en majuscule il faut mettre le mot : uppercase.

Le fond :
-  background : #a9bfd6 qui correspond à un bleu gris et #ffffff au blanc de mes sous rubriques.

Là aussi choisissez les couleurs (format hexadécimal) qui s'adaptent au thème général de votre blog.

Terminé !! et pour moi aussi.

J'espère que vous y êtes arrivés, du premier coup j'en suis sure.

Pour info : Je ne suis pas une pro et je ne m'attribue en rien la création du code uniquement son explication dans cet article. L'élaboration de cette aide est le fruit de mes nombreuses recherches et essais. Evidemment, avec le temps, il m'est de plus en plus facile de décoder, de modifier et d'appliquer, donc si vous avez des questions je pourrais vous aider. De nombreux sites sont aussi à votre disposition proposant des menus déroulants sur des bases identiques dont les explications peuvent peut être mieux vous convenir ou peaufiner votre application de celui-ci, n'hésitez pas à faire vos propres recherches.

Personnaliser un blog prend du temps, mais vous en tirerez une grande fierté, un savoir et un aspect esthétique et fonctionnel qui vous comblera vous et vos visiteurs.

♥ L'article vous a plu ? Pensez à laisser un commentaire ! ♥



tuto menu deroulant blogger happy manda passions

tuto menu deroulant blogger happy manda passions







13 commentaires:

  1. Merci pour ce tuto, je m'y mets la semaine prochaine et te dirai combien de fois je me suis arrachée les cheveux lol

    RépondreSupprimer
    Réponses
    1. t'inquiète ils repoussent tous ! et nous nous sommes aux anges à la fin

      Supprimer
  2. Coucou,
    merci pour ce tuto qui a parfaitement fonctionné pour mon blog... sauf sur téléphone où je n'ai plus du tout de menu.Aurais-tu une explication? un conseil?
    Merci

    RépondreSupprimer
    Réponses
    1. si ton menu n'apparait pas sur ton telephone, c'est qu'il manque un code javascript - as tu bien mis cette partie du code ? donne moi le lien de ton blog que je regarde

      Supprimer
  3. je viens de trouver ton blog, le code semble bon - est ce que ton blog est responsive ? essaie de ne pas choisir thème mobile sur l'interface blogger et voir si ton menu apparait, si oui c'est que ton theme n'est pas responsive, donc soit tu le rends responsive soit tu appliques un menu pour ta version web et un menu pour ta version mobile

    RépondreSupprimer
  4. Coucou,
    moi ça a marché du premier coup! Mais petit problème, le menu n'est pas vraiment déroulant dans le sense que j'ai une sous-catégorie qui s'affiche en dessous de la catégorie... de plus j'ai un mot qui apparait sous le titre "PLUS..." Comment l'enlever?
    Merci beaucoup

    RépondreSupprimer
    Réponses
    1. coucou - bon déjà il fonctionne quelques petits ajustements probablement pas grand chose tu as le lien de ton blog car je ne vois pas ce que tu sous entends dans "une sous catégorie qui s'affiche en dessous de la catégorie" - c'est à dire que c'est une catégorie qui ne devait pas avoir de sous catégorie ? si c'est le cas tu as du ajouter une rubrique sous catégorie vide dans ton code ou alors tu n'as pas fermé la balise catégorie par - le mot pareil à mon avis regarde ton code le mot doit y etre supprime le tout simplement

      Supprimer
  5. Salut, merci pour cet article mais je n'arrive pas à trouver la balise ']]>' sur blogger 2019...

    RépondreSupprimer
    Réponses
    1. bonsoir, avez vous tapez la balise entière : ]]> sinon essayez les deux crochets ou que skin pour tenter de le trouver car elle y est forcément

      Supprimer
  6. J'ai bien essayé mais impossible de le faire marcher.

    Je ne sais pas où ajouter le gadget?
    Les tutos anglos parlent de "cross-column" mais moi, je n'ai absolument rien ici donc je ne peux rien faire.
    Je ne peux ajouter de gadget que à certaines parties du blog (sidebar-right, footer). Rien pour faire un menu.
    J'ai aussi ajouté le code au HTML au thème avant la balise ]]> mais ça ne fait rien de bon.
    En fait, il n'y a que le texte: https://foreverpeace123.blogspot.com/ c'est ce que ça me donne... J'utilise la dernière version, évidemment, puisque l'on est en 2019 et que je l'ai créé que aujourd'hui.

    RépondreSupprimer
    Réponses
    1. Il faut ajouter le gadget dans la zone ou tu veux que se situe ton menu. Sur ce blog je l'ai ajouté sous mon image de présentation comme tu peux le voir. La zone doit etre assez large pour pouvoir l'accueillir esthétiquement. Par contre, est ce que cela vient d'une version nouvelle de blogger, mes gadgets peuvent être ajoutés dans toutes les zones. Sur ce point je ne peux t'éclairer. Ton code HTML ne pourra s'activer si le gadget est en place. Effectivement sur ton blog je vois le codage du menu en bas de ta page ce code doit etre dans la partie HTML dans le gadget c'est l'autre code. Je te conseille de reprendre une version sauvegardée de ton blog et de reprendre à zéro l'encodage.

      Supprimer
  7. Salut impressionnant mais sa ne marche pas chez moi www.nemafi.ml

    Pour celui qui cherche ]]> tape dans la barre de recherche ceci b: regarde parmi eux tu trouvera ]]> qui est fermé avec ...

    RépondreSupprimer
    Réponses
    1. Je suis sur ton blog, je vois que tu as 2 menus dont un déroulant. Ou se situe ton problème ?

      Supprimer

Instagram