Tuto : Un menu déroulant pour Blog / Blogger

Le fameux menu déroulant pour votre Blog !

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 :

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.

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">Bicolage/deco</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

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

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

Par ici la liste des articles astuces tuto pour votre blog