ABC: BLOG & BLOGGER: Créer un menu déroulant

Selon vos possibilités, votre niveau , vous pouvez réaliser de vrais menus plus ou moins sophistiqués. Toutefois il faudra obligatoirement travailler en mode HTML et modifier en partie le code des menus.
Si cela vous semble trop complexe, vous pouvez, via les liens et les libellés, établir des menus plus simples (voir notre article)

Plan
1-Rappel des bases: notion de lien
2-Un Menu classique avec divers niveaux possibles (sous menu)
-Menu avec 2 niveaux de sous Menu
-Menu avec un seul niveau de sous Menu (conseillé pour débuter !)
3-Explications pour comprendre les items du menu
4-Explications pour adapter et personnaliser les items/liens du menu
5-Explications pour adapter et personnaliser l'aspect du menu (couleurs)
5-D'autres types de Menu
(6-Un autre beau Menu classique mais... qui fonctionne mal avec le HTTPS.)

1-Les bases : notion de lien

Lors de l'édition d'un article ou d'une page, il est aisé de faire un lien à l 'aide du Menu "Associer"

Ce lien pointe vers un article ou une page dont vous avez mémorisé l'adresse.

En mode HTML, voici le code :

-Lien simple : <a href="adresse du lien">titre du lien</a>

avec ce code : cliquer <a href="http://blogavecblogger.blogspot.fr">CLIQUER ICI</a>
on obtient : CLIQUER ICI

-Lien s'ouvrant dans une nouvelle fenêtre : <a href="adresse du lien" target="blank">titre du lien</a>

avec ce code <a href="http://blogavecblogger.blogspot.fr" target="blank"> là</a>
on obtient : CLIQUER ICI

-Lien via un libellé qui permet d'afficher tous les articles ayant ce libellé
(revoir explications ici)

code du lien:
http://nomdublog.blogspot.fr/search/label/nomdulibellé

-Rappel : target="blank" permet d'ouvrir le lien dans un nouvel onglet (élément facultatif)

2-Un Menu classique avec divers niveaux possibles

2.1 Préparation : créer sa structure de Menu

Avant de vous lancer dans la création d'un MENU déroulant, vous devez avoir réfléchi à la structure de votre menu:
-Combien de grandes entrées de Menu (dans nos exemples nous en proposons 5) et prévoir les appellations ou NOMS
-Combien de sous Menu pour chaque entrée et prévoir les NOMS (=>un mot explicite bref)
et
pour ceux qui envisagent de créer des sous/sous Menus, également prévoir leur emplacement, nombre et noms...

Tout cela est noté noir sur blanc !

Bien sûr, vous pourrez toujours, plus tard, modifier votre menu initial

2-2 Choisir un type de Menu

-Il existe de nombreuses possibilités de création de MENUS.

-Nous avons éliminé la possibilité d'insertion de Menus en 2 temps, d'abord via un widget puis ensuite via une modification du fichier "modèle/css" du blog, jugé trop complexe pour un débutant

=> voir le principe par cet exemple : ladybird ou celui ci notuxedo

-Ne sont retenus que les menus s'affichant et se gérant uniquement dans un simple Gadget HTML/Javascript (tout le code est à coller uniquement dans un gadget html)

-Désormais nous conseillons le Menu en fonctionnement sur ce blog :

-ce type de Menu est issu du site qui n'existe plus et qui proposait d'autres modéles : http://menus-deroulants-pour-blogger.blogspot.com/

-Nos explications sont basées sur le menu présenté ci-dessus que nous avons simplifié ci-dessous pour faciliter la compréhension

-REMARQUE : si ce menu ne vous convient pas, choisissez, chez l'auteur, un autre thème de MENU. Vous visualisez les divers thèmes proposés, ensuite, en bas, cliquer sur le lien correspondant au code du menu choisi (un numéro) ici sur ce blog, il s'agit des codes des exemples 11 à 14.
Et, en, particulier, pour notre exemple, le code du numéro 11 que vous pouvez copier (ou ICI)

2-3 Débuter à partir de ce menu

Pour créer un premier menu, nous proposons deux codes quasi identiques : l'un avec des sous Menus et l'autre sans sous menu (à conseiller pour débuter)

Vous pourrez facilement modifier les items du menu, changer la couleur... Ce menu est le même que celui utilisé dans ce blog, menus et sous menus sont simplifiés pour faciliter la compréhension

2-3-1 le code du Menu avec des sous/sous Menus ( pour les utilisateurs expérimentés ou ayant déjà réalisé le menu simple)

Ce menu se compose de
-5 Menus principaux : MENU 1 avec 5 sous menus) + MENU 2 avec 4 sous menus + MENU 3 avec 5 sous menus + MENU 4 avec 3 sous menus +MENU avec 6 sous menus
-de plusieurs "Sous" / "Sous menu" : 5 sous menu pour 2.1 + 2 sous menu pour 3.1 + 3 sous menu pour 3.2
-de 3 Menus... sans aucun "Sous Menu" (ACCUEIL + MENU A + MENU B) en accès direct

à copier à l'intérieur du cadre

<div class="d30bl">

<li><a href="adresse url du blog">ACCUEIL</a></li>
<li><a href="adresse url" target="_blank"">MENU A</a></li>

<li><div class="d30blfixe"><a href="#">MENU 1</a></div><ul>
<li><a href="adresse url" target="_blank">Menu 1.1</a></li>
<li><a href="adresse url" target="_blank">Menu 1.2</a></li>
<li><a href="adresse url" target="_blank">Menu 1.3</a></li>
<li><a href="adresse url" target="_blank">Menu 1.4</a></li>
<li><a href="adresse url" target="_blank">Menu 1.5</a></li>
</ul></li>

<li><div class="d30blfixe"><a href="#">MENU 2</a></div><ul>

<li><div class="d30blfixe"><a href="#">Menu 2.1</a></div><ul>
<li><a href="adresse url" target="_blank">Sous Menu 2.1.1</a></li>
<li><a href="adresse url" target="_blank">Sous Menu 2.1.2</a></li>
<li><a href="adresse url" target="_blank">Sous Menu 2.1.3</a></li>
<li><a href="adresse url" target="_blank">Sous Menu 2.1.4</a></li>
<li><a href="adresse url" target="_blank">Sous Menu 2.1.5</a></li>
</ul></li>

<li><a href="adresse url" target="_blank">Menu 2.2</a></li>
<li><a href="adresse url" target="_blank">Menu 2.3</a></li>
<li><a href="adresse url" target="_blank">Menu 2.4</a></li>
</ul></li>

<li><div class="d30blfixe"><a href="#">MENU 3</a></div><ul>

<li><div class="d30blfixe"><a href="#">Menu 3.1</a></div><ul>
<li><a href="adresse url" target="_blank">Sous Menu 3.1.2</a></li>
<li><a href="adresse url" target="_blank">Sous Menu 3.1.3</a></li>
</ul></li>

<li><a href="adresse url" target="_blank">Menu 3.2 </a></li>

<li><div class="d30blfixe"><a href="#">Menu 3.3</a></div><ul>
<li><a href="adresse url" target="_blank">Sous Menu 3.3.1</a></li>
<li><a href="adresse url" target="_blank">Sous Menu 3.3.2</a></li>
<li><a href="adresse url" target="_blank">Sous Menu 3.3.3</a></li>
</ul></li>

<li><a href="adresse url" target="_blank">Menu 3.4 </a></li>
<li><a href="adresse url" target="_blank">Menu 3.5</a></li>
</ul></li>

<li><div class="d30blfixe"><a href="#">MENU 4</a></div><ul>
<li><a href="adresse url" target="_blank">Menu 4.1</a></li>
<li><a href="adresse url" target="_blank">Menu 4.2</a></li>
<li><a href="adresse url" target="_blank">Menu 4.3</a></li>
</ul></li>

<li><div class="d30blfixe"><a href="#">MENU 5</a></div><ul>
<li><a href="adresse url" target="_blank">Menu 5.1</a></li>
<li><a href="adresse url" target="_blank">Menu 5.2</a></li>
<li><a href="adresse url" target="_blank">Menu 5.3</a></li>
<li><a href="adresse url" target="_blank">Menu 5.4</a></li>
<li><a href="adresse url" target="_blank">Menu 5.5</a></li>
<li><a href="adresse url" target="_blank">Menu 5.6</a></li>
</ul></li>
<li><a href="adresse url" target="_blank">MENU B</a></li>
</div>

<style type="text/css">

.d30bl, .d30bl ul{list-style: none;text-align: center;z-index:999;padding: 0;margin: 0;}
.d30bl{width:925px;margin:0px auto;margin-top:0px;}
.d30bl li{float: left;}
.d30bl li ul{position: absolute;width: 125px;left: -999em;z-index:999;}
.d30bl li:hover ul ul {left: -999em;}
.d30bl li:hover ul ul ul{left: -999em;}
.d30bl li:hover ul, .d30bl li li:hover ul,.d30bl li li li:hover ul{left: auto;min-height:1%;}
.d30bl li ul {border-top: 1px solid rgb(38,66,80);width:144px;margin-top:-1px;}
.d30bl li a {

margin-right:4px;

-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 0;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 0;
-goog-ms-border-top-left-radius: 10px;
-goog-ms-border-bottom-left-radius: 0;

border-top-left-radius: 10px;
border-bottom-left-radius: 0;

-moz-border-radius: 10px 10px 0 0;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-goog-ms-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}

.d30bl li ul a {
-moz-border-radius-topleft: 0px;
-moz-border-radius-bottomleft: 0;
-webkit-border-top-left-radius: 0px;
-webkit-border-bottom-left-radius: 0;
-goog-ms-border-top-left-radius: 0px;
-goog-ms-border-bottom-left-radius: 0;
border-top-left-radius: 0px;
border-bottom-left-radius: 0;
-moz-border-radius: 0;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-goog-ms-border-radius: 0;
border-radius: 0;
}

.d30bl li ul li a {width:125px;}
.d30bl li ul ul{margin: -34px 0 0 144px;min-height: 0;}
.d30bl a {color:white;background:rgb(38,66,80) no-repeat;border-right: 1px solid rgb(38,66,80);border-bottom: 1px solid rgb(38,66,80);padding:7px 9px; display:block;text-decoration: none; font-weight:bold;font-family: arial;font-size: 14px;line-height: 14px;}
.d30bl a:hover{color:#191970;background:white;}
.d30blfixe a:hover {color:white;background:rgb(38,66,80) no-repeat;}

</style>

2-3-2 le code du Menu sans sous menus au 2° niveau (plus facile à configurer : conseillé pour débuter)

Ce menu se compose uniquement de 8 Menus principaux dont 5 avec des sous Menus simples :

-ACCUEIL + MENU A + MENU B sans aucun sous menu ( accès direct)

-MENU 1 avec 5 sous menus + MENU 2 avec 4 sous menus + MENU avec 4 sous menus + MENU 4 avec 3 sous menus + MENU 5 avec 6 sous menus.

-La couleur du Menu est en gris (background:rgb(128,128,128) ou background:gray

-Vous pourrez facilement ajouter/supprimer un menu et modifier les couleurs

CODE DU MENU copier le code à l'intérieur du cadre

<div class="d30bl">

<li><a href="adresse url du blog">ACCUEIL</a></li>

<li><a href="adresse url" target="_blank">MENU A</a></li>

<li><div class="d30blfixe"><a href="#">MENU 1</a></div><ul>
<li><a href="adresse url" target="_blank">Menu 1.1</a></li>
<li><a href="adresse url" target="_blank">Menu 1.2</a></li>
<li><a href="adresse url" target="_blank">Menu 1.3</a></li>
<li><a href="adresse url" target="_blank">Menu 1.4</a></li>
<li><a href="adresse url" target="_blank">Menu 1.5</a></li>
</ul></li>

<li><div class="d30blfixe"><a href="#">MENU 2</a></div><ul>
<li><a href="adresse url" target="_blank">Menu 2.1</a></li>
<li><a href="adresse url" target="_blank">Menu 2.2</a></li>
<li><a href="adresse url" target="_blank">Menu 2.3</a></li>
<li><a href="adresse url" target="_blank">Menu 2.4</a></li>
</ul></li>

<li><div class="d30blfixe"><a href="#">MENU 3</a></div><ul>
<li><a href="adresse url" target="_blank">Menu 3.1 </a></li>
<li><a href="adresse url" target="_blank">Menu 3.2</a></li>
<li><a href="adresse url" target="_blank">Menu 3.3 </a></li>
<li><a href="adresse url" target="_blank">Menu 3.4</a></li>
</ul></li>

<li><div class="d30blfixe"><a href="#">MENU 4</a></div><ul>
<li><a href="adresse url" target="_blank">Menu 4.1</a></li>
<li><a href="adresse url" target="_blank">Menu 4.2</a></li>
<li><a href="adresse url" target="_blank">Menu 4.3</a></li>
</ul></li>

<li><div class="d30blfixe"><a href="#">MENU 5</a></div><ul>
<li><a href="adresse url" target="_blank">Menu 5.1</a></li>
<li><a href="adresse url" target="_blank">Menu 5.2</a></li>
<li><a href="adresse url" target="_blank">Menu 5.3</a></li>
<li><a href="adresse url" target="_blank">Menu 5.4</a></li>
<li><a href="adresse url" target="_blank">Menu 5.5</a></li>
<li><a href="adresse url" target="_blank">Menu 5.6</a></li>
</ul></li>

<li><a href="adresse url" target="_blank">MENU B</a></li>

</div>

<style type="text/css">
.d30bl, .d30bl ul{list-style: none;text-align: center;z-index:999;padding: 0;margin: 0;}
.d30bl{width:925px;margin:0px auto;margin-top:0px;}
.d30bl li{float: left;}
.d30bl li ul{position: absolute;width: 125px;left: -999em;z-index:999;}
.d30bl li:hover ul ul {left: -999em;}
.d30bl li:hover ul ul ul{left: -999em;}
.d30bl li:hover ul, .d30bl li li:hover ul,.d30bl li li li:hover ul{left: auto;min-height:1%;}
.d30bl li ul {border-top: 1px solid rgb(128,128,128);width:144px;margin-top:-1px;}

.d30bl li a {
margin-right:4px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 0;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 0;
-goog-ms-border-top-left-radius: 10px;
-goog-ms-border-bottom-left-radius: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-goog-ms-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}

.d30bl li ul a {
-moz-border-radius-topleft: 0px;
-moz-border-radius-bottomleft: 0;
-webkit-border-top-left-radius: 0px;
-webkit-border-bottom-left-radius: 0;
-goog-ms-border-top-left-radius: 0px;
-goog-ms-border-bottom-left-radius: 0;
border-top-left-radius: 0px;
border-bottom-left-radius: 0;
-moz-border-radius: 0;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-goog-ms-border-radius: 0;
border-radius: 0;
}

.d30bl li ul li a {width:125px;}
.d30bl li ul ul{margin: -34px 0 0 144px;min-height: 0;}
.d30bl a {color:white;background:gray no-repeat;border-right: 1px solid rgb(128,128,128);border-bottom: 1px solid rgb(128,128,128);padding:7px 9px; display:block;text-decoration: none; font-weight:bold;font-family: arial;font-size: 14px;line-height: 14px;}
.d30bl a:hover{color:black;background:white;}
.d30blfixe a:hover {color:white;background:black no-repeat;}

</style>

2-4 Copier/coller le code du Menu dans un Gadget HTML

-TRÈS IMPORTANT :

Pour bien fonctionner le GADGET HTML doit être inséré dans le bloc Principal (au-dessus des articles) dans le cas contraire couleurs et affichage des sous menus ne sont pas corrects.

Ne pas mettre de titre à ce gadget (il apparaît au dessus du Menu ce qui est inutile !)

Il faut éviter de mettre un gadget (comme"Pages" qui crée des Onglets) dans l'en tête, en effet votre Menu (situé dans "principal") ne sera pas ajusté sous votre en-tête, mais décalé vers le bas. Supprimer votre gadget pages qui crée des onglets placé sous l'en-tête ou, pour le garder, placez le sur le côté droit

PREAMBULE avant CONFIGURATION : TESTER !

Ce menu fonctionne parfaitement, mais...

Dysfonctionnement : quelques causes

dans nos démos, les Templates (Modèles) Blogger utilisées sont "SIMPLES" : le menu présenté fonctionne parfaitement avec ce type de template et parfois certaines templates ne permettent pas un bon fonctionnement (déroulement du menu)

L'affichage du Menu et des Sous menu peut parfois différer selon le modèle utilisé par votre blog.
Parfois il arrive des petits décalages des blocs dans l'affichage du menu : ils sont liés au CSS d'origine de votre template. Il est souvent impossible de corriger le décalage dans le code du template du Menu.
Aussi, deux solutions

Modifier votre template : en choisissant un modèle SIMPLE vous avez la garantie d'un excellent fonctionnement de votre menu !
Vous devez impérativement tester le menu dans votre blog avant de commencer à le configurer ou dans un blog de démo

Nous avons remarqué que la présence de certains scripts (javascript) présents dans des articles ou gadget sur la page d’accueil du Blog, peuvent parfois faire dysfonctionner le déroulement du menu . Cas par exemple d'un diaporama en javascript.

Donc faire des tests pour trouver la cause précise du dysfonctionnement, il existe toujours une explication...
Tester le menu dans votre blog avant de commencer à le configurer ou dans un blog de démo

~~Si nécessaire, choisir et tester un autre type de menu chez l'auteur~~

2-5 Comprendre les 2 grandes parties du code

Le code comprend 2 grandes parties successives

1- D'abord le code correspondant au contenu du menu (items classés et hiérarchisés sous forme d'une liste avec balises li et ul) qui commence par <div

2- Ensuite le code de mise en forme du menu sous forme d'un Css (couleurs, largeurs...) qui débute par <style

3-Explications pour comprendre les items du menu
Ici les explications sont données pour les items du Menu de la première partie du code

=> Principe de sécurité avant de commencer ou modifier !
-D'abord sauvegarder votre code de Menu
-Faire des tests.
-Ne pas faire les liens ...attendre que le menu soit complet et parfaitement fonctionnel

=> toujours faire des sauvegardes avec l'évolution de votre travail
>Copier votre code pour le coller dans le bloc notes (en texte brut)
Menu Démarrer > Accessoires Windows > Bloc notes
et enregistrez le avec un nom de fichier explicite (Menu blog du 20 02 2020)
> N'hésitez pas à faire de nombreuses sauvegardes

3-1 Comprendre le code des items du Menu

-le conteneur <div> ....</div> nommé d30bl contient les éléments du menu => <div class="d30bl">

-liste des Items du menu:
<li> encapsule des éléments présents dans une une liste </li>
<ul> définit une liste dont les éléments sont <li>....</li> </ul>

-Toute balise ouverte doit être refermée:

<li><div class="d30blfixe"><a href="#">MENU 1</a></div><ul>
<li><a href="URL" target="_blank">Menu1.1</a></li>
<li><a href="URL" target="_blank">Menu1.2</a></li>
<li><a href="URL" target="_blank">Menu1.3</a></li>
<li><a href="URL" target="_blank">Menu1.4</a></li>
</ul></li>

3-2 Exemple de "MENU " simple

-chaque bloc de menu est encadré par <li>....</li>
-ensuite le conteneur "d30blfixe" est annoncé dans <div>........</div>
-puis entre <ul>......</ul> les items du menu
-chaque ligne <li>....</li> correspond à un item du Menu : vous pouvez supprimer des lignes ou en ajouter

<li>

<div class="d30blfixe"><a href="#">MENU 1</a></div>

<ul>

<li><a href="adresse url" target="_blank">Menu 1.1</a></li>

<li><a href="adresse url" target="_blank">Menu 1.2</a></li>

<li><a href="adresse url" target="_blank">Menu 1.3</a></li>

<li><a href="adresse url" target="_blank">Menu 1.4</a></li>

<li><a href="adresse url" target="_blank">Menu 1.5</a></li>

</ul>

</li>

Dans le code global, vous pouvez ajouter/supprimer ce bloc de menu (ici nous en avons mis 5 de MENU 1 à MENU 5)

3-3 Exemple d'une MENU A sans aucun "Sous Menu"
Une seule ligne de code

<li><a href="adresse url" target="_blank">MENU A</a></li>

-Vous pouvez ajouter/ supprimer ces "MENU" sans aucun sous Menu ( correspondant à MENU A et MENU B mais il est indispensable de conserver l'ACCUEIL ( avec un lien vers votre blog)
-Il faudra indiquer l'adresse URL de destination après clic sur ce menu

3-4 Exemple de "MENU " qui possède un "sous menu imbriqué" 2.1

-Le principe est exactement le même que ci-dessus.
-Pour créer le sous menu imbriqué nous avons inséré le code de <li>......</li>
que l'on peut supprimer ou ajouter ailleurs pour créer un sous menu
-Notez que le sous menu <li>...</li> est imbriqué dans <li>...<ul>......</ul></li>
-On peut rajouter d'autres items au sous menu ( 1 ligne à ajouter)
ex : <li><a href="adresse url" target="_blank">Sous Menu 2.1.3</a></li>

<li><div class="d30blfixe"><a href="#">MENU 2</a></div>
<ul>
<li><div class="d30blfixe"><a href="#">Menu 2.1</a></div>
<ul>
<li><a href="adresse url" target="_blank">Sous Menu 2.1.1</a></li>
<li><a href="adresse url" target="_blank">Sous Menu 2.1.2</a></li>
</ul>
</li>
<li><a href="adresse url" target="_blank">Menu 2.2</a></li>
<li><a href="adresse url" target="_blank">Menu 2.3</a></li>
<li><a href="adresse url" target="_blank">Menu 2.4</a></li>
</ul>
</li>

3-5 Pour intégrer un Sous Menu, insérer au bon endroit
(vous pouvez ajouter d'autres lignes de sous menu)

Faire un espace vide avant/après pour bien voir votre bloc de Menu

<li><div class="d30blfixe"><a href="#">Menu X</a></div>

<ul>

<li><a href="adresse url" target="_blank">Sous Menu X1</a></li>

<li><a href="adresse url" target="_blank">Sous Menu X2</a></li>

</ul>

</li>

-Conseil : insérez ce sous menu entre 2 lignes de menu classique (quitte à supprimer ensuite une ligne de menu inutile)
-Attention : si vous insérez un sous menu en fin de groupe, vous aurez obligatoirement :
</ul></li></ul></li>
en effet le premier </ul></li> concerne le sous menu
et le deuxième </ul></li> concerne l'ensemble du groupe de menu
Si vous l'oubliez, votre menu dysfonctionnera (affichage partiel en vertical !)
-Exemple

<li><div class="d30blfixe"><a href="#">MENU 2</a></div>
<ul>
<li><div class="d30blfixe"><a href="#">Menu 2.1</a></div>
<ul>
<li><a href="adresse url" target="_blank">Sous Menu 2.1.1</a></li>
<li><a href="adresse url" target="_blank">Sous Menu 2.1.2</a></li>
</ul>
</li>
<li><a href="adresse url" target="_blank">Menu 2.2</a></li>
<li><a href="adresse url" target="_blank">Menu 2.3</a></li>
<li><a href="adresse url" target="_blank">Menu 2.4</a></li>
<li><div class="d30blfixe"><a href="#">Menu 2.5</a></div>
<ul>
<li><a href="adresse url" target="_blank">Sous Menu 2.5.1</a></li>
<li><a href="adresse url" target="_blank">Sous Menu 2.5.2</a></li>
</ul>
</li> </ul>
</li>

4-Explications pour personnaliser votre menu

Comment Adapter, Structurer, Modifier votre Menu: exemple pour le menu simple
-Vous avez tous éléments pour structurer votre Menu et sous menus...selon vos besoins.
-Vous pourrez, toujours, plus tard, modifier si nécessaire votre menu.

ASTUCE: Pour travailler plus facilement il faut agrandir la fenêtre du gadget HTML concerné en "tirant" sur son côté droit et le dessous pour qu'elle s'affiche en plus grand.

Ouvrir le gadget HTML MENU et.. l'agrandir !

A- Adapter le nombre de blocs de MENU avec sous Menu (par défaut 5)
=> vous pouvez ajouter/supprimer un bloc de menu (ici nous en avons mis 5 de MENU 1 à MENU 5)
=> donc vous pouvez ajouter /supprimer ce type de bloc

<li><div class="d30blfixe"><a href="#">Menu X</a></div>

<ul>

<li><a href="adresse url" target="_blank">Sous Menu X1</a></li>

<li><a href="adresse url" target="_blank">Sous Menu X2</a></li>

</ul>

</li>

B- Adapter le nombre de blocs de MENU sans aucun sous Menu (par défaut3)
=> vous pouvez ajouter/supprimer un bloc de menu ide (ici nous en avons mis 3 : ACCUEIL +MENU A + MENU B

=> donc vous pouvez ajouter /supprimer ce type de bloc

<li><a href="adresse url" target="_blank">MENU A</a></li>

C- Adapter le nombre de blocs de sous Menus
Menu 1 avec 5 sous Menus
Menu 2 avec 4 sous Menus
Menu 3 avec 4 sous Menus
Menu 4 avec 3 sous Menus
Menu 5 avec 6 sous Menus

=> vous pouvez ajouter/supprimer un ligne de Menu (pour ajouter faire un copier coller)

<li><a href="adresse url" target="_blank">Menu 1.1</a></li>

C bis- Adapter le nombre de blocs de sous/sous Menus
uniquement pour le Menu avec des sous sous Menus

Exemple : 1 bloc de sous/sous Menu

<li><div class="d30blfixe"><a href="#">Menu 3.1</a></div><ul>

<li><a href="adresse url" target="_blank">Sous Menu 3.1.2</a></li>

<li><a href="adresse url" target="_blank">Sous Menu 3.1.3</a></li>

</ul></li>

Exemple : Menu 3 avec 2 blocs de sous/sous Menu (3.1 et 3.3)

<li><div class="d30blfixe"><a href="#">MENU 3</a></div><ul>

<li><div class="d30blfixe"><a href="#">Menu 3.1</a></div><ul>

<li><a href="adresse url" target="_blank">Sous Menu 3.1.2</a></li>

<li><a href="adresse url" target="_blank">Sous Menu 3.1.3</a></li>

</ul></li>

<li><a href="adresse url" target="_blank">Menu 3.2 </a></li>

<li><div class="d30blfixe"><a href="#">Menu 3.3</a></div><ul>

<li><a href="adresse url" target="_blank">Sous Menu 3.3.1</a></li>

<li><a href="adresse url" target="_blank">Sous Menu 3.3.2</a></li>

<li><a href="adresse url" target="_blank">Sous Menu 3.3.3</a></li>

</ul></li>

<li><a href="adresse url" target="_blank">Menu 3.4 </a></li>

<li><a href="adresse url" target="_blank">Menu 3.5</a></li>

</ul></li>

D-Enregistrez et Testez votre Menu
si tout fonctionne bien; continuez avec

E- Adapter les Titres de MENUS et sous Menus

devient

<li><div class="d30blfixe"><a href="#">DESSERTS</a></div><ul>

<li><a href="adresse url" target="_blank">Tartes</a></li>

-Testez votre Menu avec les titres
si tout fonctionne bien; continuez avec

F-Indiquer toutes les URL d'accès

Vous devez créer tous les liens du Menu vers vos articles <a href="http://adresse URL de l'article.html"

Accueil vous devez indiquez le lien qui dirige vers votre blog

<li><a href="adresse url du blog">ACCUEIL</a></li>
devient
<li><a href="http://monblog.blospot.com">ACCUEIL</a></li>
adresse d'un article ou page

dans : <li><a href="adresse url" target="_blank">Sous Menu</a></li>

A faire par copier/coller :ouvrez l"article concerné dans le navigateur et copier l'adresse URL complète puis coller dans le Menu

devient: <li><a href="http://blogavecblogger.blogspot.com/2014/03/creer-un-menu.html" target="_blank">Sous Menu</a></li>

adresse via un libellé qui permet d'afficher tous les articles ayant ce libellé
(revoir explications ici)

de type :

http://nomdublog.blogspot.fr/search/label/nomdulibellé

Nota

Les titres de MENU n'ont pas de lien actifs aussi laissez le code ainsi :

Testez votre Menu avec les liens

si tout fonctionne bien faire une copie de votre travail
passer à la mise en forme de votre menu (couleurs) voir partie 5 ci-dessous

5-Explications pour adapter et gérer l'aspect du menu : couleurs et police

-Ici les explications sont données pour les items du Menu de la deuxième partie du code
-D'abord sauvegarder le code de votre Menu (en mode texte)

Le code concerné se situe entre les balises <style>
<style type ="tex/css">
code de l'aspect du menu
</style>

1-COULEURS : PRINCIPES GÉNÉRAUX

Rappel : les codes couleurs

voir une liste de NOMS et CODES html de couleur à utiliser

une couleur peut être indiquée dans le code de 3 manières Nom anglais/ Hexa / RGB :

exemples de code html
Ici, dans le menu simplifié, les couleurs s'affichent ainsi, selon l’élément concerné:

bordure (border) toujours en rgb(128,128,128) = gris
fond (background) toujours via nom anglais: color:black color: white color: gray
couleur écriture toujours via nom anglais : color: black

toujours pour simplifier, nous utilisons uniquement 3 couleurs : blanc, gris, noir
bien sûr, vous pourrez modifier tout cela selon vos compétences !

2-DÉBUT DU CODE
Il vaut mieux éviter de modifier le début du code qui règle l'affichage des divers onglets selon leur position et niveau lors du déroulement du Menu (distances, marges...)
Une seule ligne concernée : la couleur et largeur indiquée dans la 8ème ligne peut être changée

.d30bl li ul {border-top: 1px solid rgb(128,128,128);width:144px;margin-top:-1px;}

=>il s'agit de la couleur du trait de bordure supérieure (border-top) du MENU => qui doit être de la même couleur que le MENU :
ici en gris rgb(128,128,128)

OU
plus simplement, supprimer la largeur pour ne plus avoir ce trait visible = > border-top: 0 px

3-FIN DU CODE

Il est facile d'y changer les couleurs dans les 3 derniers groupes de lignes du code qui commencent par .d30bl :

3-1 couleur générale du MENU (ici fond en gris et lettres en blanc) et POLICE CARACTERES

.d30bl a {color:white;background:gray no-repeat;border-right: 1px solid rgb(128,128,128);border-bottom: 1px solid rgb(128,128,128);padding:7px 9px; display:block;text-decoration: none; font-weight:bold;font-family: arial;font-size: 14px;line-height: 14px;}

=> couleur texte (ici color:white) sur couleur générale du MENU ici en gris background:gray

=> ensuite il s'agit des couleurs couleur de bordure (en gris comme le menu) rgb(128,128,128)

peut aussi être noire pour faire ressortir le menu...

=>modifier la POLICE de caractère
font-weight:bold; voir explication normal/blod/bolder/lighter...
font-family: arial; voir explication pour choix de police hevetica/arial/serif
font-size: 14px   voir explication pour taille de police 12/14/16
line-height: 14px voir explication pour hauteur mini

exemple de modification :  font-weight:bold;font-family: helvetica;font-size: 18px;line-height: 18px;

3-2 Couleur au survol d'un sous Menu avec lien (ici fond en blanc et texte en noir)

.d30bl a:hover{color:black;background:white;}

=>survol souris d'un sous Menu avec lien : background en blanc (background:white) et texte en noir color:black

3-3 Couleur au survol d'un MENU ayant des sous menus (ici fond en noir et texte en blanc)

.d30blfixe a:hover {color:white;background:black no-repeat;}

=>survol souris du MENU (fixe) ayant des sous Menus : background:black fond en noir et color:white texte en blanc

D-Compléments explicatifs

Pour plus de détails :
-Voir cette page de l'auteur qui donne des explications complémentaires
http://modifier-les-modeles-de-blogger.blogspot.com/2012/10/barre-de-liens-deroulante-en-deux-lignes.html

-Sur les Balises
http://www.startyourdev.com/html/tag-html-balise-li
http://www.startyourdev.com/html/tag-html-balise-ul

5-D'AUTRES TYPES de MENUS

Rappel : http://theblogueur.blogspot.fr/2012/11/menu-navigation-horizontal-deroulant.html

5-1 selon ce même concept
=> uniquement un code à coller dans un gadget html/javascript puis configurer les titres/liens des items du menu), vous pouvez trouver 35 autres menus sur ce site (en anglais)
-http://24work.blogspot.com
-même concept avec un graphisme différent : "Personnaliser Blogger"
-template avec menu déroulant intégré "template simple clean white"

5-2 autres liens pour d'autres menus:

=> ces menus nécessitent le plus souvent de modifier le fichier du Modèle du blog (CSS) ce qui peut pour certains sembler difficile et risqué...

Voir ces dossiers très complets qui présentent diverses possibilités

-https://www.notuxedo.com/menu-deroulant-responsive-blogger/

-http://optimisation-blogger.blogspot.fr/search/label/Menus

-http://menus-deroulants-pour-blogger.blogspot.fr/

-http://optimisation-blogger.blogspot.fr/2011/04/menu-vertical-blog-blogger-utile.html

-http://24work.blogspot.com/2013/09/drop-down-menu-widget-in-blogger.html

-http://ladybirdr.blogspot.fr/2014/09/creer-un-menu-deroulant.html

-http://theblogueur.blogspot.fr/2012/11/menu-navigation-horizontal-deroulant.html

-http://modifier-les-modeles-de-blogger.blogspot.fr/2007/12/menu-horizontal-d%C3%A9roulant-trois-niveaux.html

-http://le-blog-facile.ek.la/menu-horizontal-superieur-deroulant-methode-simplifiee-p348708

5-3 en anglais

https://smileportfolio.blogspot.com/2015/06/tutorial-add-drop-down-menu-bars-for-blogger.html

http://101helper.blogspot.com/search/label/Blogger%20menus

http://popup-toolkit.com/webmaster-tools/web-menus/

Simples à utiliser et à générer. Mais en anglais !
------------------------------------------------------------------------------------------------------------

------------------------------------------------------------

ANCIEN EXEMPLE DE MENU qui dysfonctionne !

6- Un autre Menu classique mais... qui fonctionne mal avec le HTTPS.

Voici donc un exemple, selon le même principe, de création d'un menu horizontal déroulant comme celui de notre ancien blog:

ATTENTION : désormais ce menu dysfonctionne avec le HTTPS : problème d'affichage !
il ne fonctionne correctement qu'en http (sans s). Aussi nous le déconseillons, toutefois, nous laissons nos explications pur ceux qui possèdent encore ce menu

Code à copier/coller/adapter qui correspond au menu ci-dessus
(4 MENUS, le Menu 2 ayant 3 sous menus)
-------------------------------------------------------------------------------------------------------

<script src='http://theblogueur-menu.googlecode.com/files/TheBlogueur_Menu.js'
type='text/javascript'></script>
<style>
/* ######### Menu Horizontal Déroulant TheBlogueur.blogspot.com ######### */
/* ######### Menu Horizontal Déroulant à Multiple Niveaux ######### */
.ddsubmenustyle, .ddsubmenustyle div {
/*topmost and sub DIVs, respectively*/
font: normal 13px Verdana;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: white;
border: 1px solid black;
border-bottom-width: 0;
visibility: hidden;
z-index: 100;
}

.ddsubmenustyle ul {
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
border: 0px none;
}

.ddsubmenustyle li a {
display: block;
width: 170px;
/*width of menu (not including side paddings)*/
color: black;
background-color: skyblue;
text-decoration: none;
padding: 4px 5px;
border-bottom: 1px solid black;
}

* html .ddsubmenustyle li {
/*IE6 CSS hack*/
display: inline-block;
width: 170px;
/*width of menu (include side paddings of LI A*/
}

.ddsubmenustyle li a:hover {
background-color: black;
color: white;
}

.downarrowpointer {
/*CSS for "down" arrow image added to top menu items*/
padding-left: 4px;
border: 0;
}

.rightarrowpointer {
/*CSS for "right" arrow image added to drop down menu items*/
position: absolute;
padding-top: 3px;
left: 100px;
border: 0;
}

.ddiframeshim {
position: absolute;
z-index: 500;
background: transparent;
border-width: 0;
width: 0;
height: 0;
display: block;
}
/* ######### Black Strip Main Menu Bar CSS ######### */
.mattblackmenu ul {
margin: 0;
padding: 0;
font: bold 12px Verdana;
list-style-type: none;
border-bottom: 1px solid gray;
background: #414141;
overflow: hidden;
width: 100%;
}

.mattblackmenu li {
display: inline;
margin: 0;
}

.mattblackmenu li a {
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 6px 8px;
/*padding inside each tab*/
border-right: 1px solid white;
/*right divider between tabs*/
color: white;
background: #414141;
}

.mattblackmenu li a:visited {
color: white;
}

.mattblackmenu li a:hover {
background: black;
/*background of tabs for hover state */
}

.mattblackmenu a.selected {
background: black;
/*background of tab with "selected" class assigned to its LI */
}
</style>
<div id="ddtopmenubar" class="mattblackmenu">

<ul>
<li><a href="URL de votre BLOG">ACCUEIL</a></li>
<li><a href="#" rel="ddsubmenu1">MENU 1</a></li>
<li><a href="#" rel="ddsubmenu2">MENU 2</a></li>
<li><a href="#" rel="ddsubmenu3">MENU 3</a></li>
<li><a href="#" rel="ddsubmenu4">MENU 4</a></li>
</ul>
</div>

<script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar| sidebar")
</script>

<ul class='ddsubmenustyle' id='ddsubmenu1'>

<li><a href='URL'>MENU 1.1</a></li>
<li><a href='URL'>MENU 1.2</a></li>
<li><a href='URL'>MENU 1.3</a></li>
<li><a href='URL'>MENU 1.4</a></li>
<li><a href='URL'>MENU 1.5</a> </li>
</ul>

<ul class='ddsubmenustyle' id='ddsubmenu2'>

<li><a href='#'>MENU 2.1</a>
<ul>
<li><a href='URL'>SOUS MENU 2.1.1</a></li>
<li><a href='URL'>SOUS MENU 2.1.2</a></li>
<li><a href='URL'>SOUS MENU 2.1.3</a></li>
<li><a href='URL'>SOUS MENU 2.1.4</a></li>
<li><a href='URL'>SOUS MENU 2.1.5</a></li>
</ul></li>

<li><a href='URL'>MENU 2.2</a></li>
<li><a href='URL'>MENU 2.3</a></li>
<li><a href='URL'>MENU 2.4</a></li>
<li><a href='URL'>MENU 2.5</a></li>
<li><a href='URL'>MENU 2.6</a></li>

<li><a href='#'>MENU 2.7</a>
<ul>

<li><a href='URL'>SOUS MENU 2.7.1</a></li>
<li><a href='URL'>SOUS MENU 2.7.2</a></li>
<li><a href='URL'>SOUS MENU 2.7.3</a></li>
<li><a href='URL'>SOUS MENU 2.7.4</a> </li>
<li><a href='URL'>SOUS MENU 2.7.5</a></li>
</ul></li>

<li><a href='URL'>MENU 2.8</a></li>

<li><a href='#'>MENU 2.9</a>
<ul>
<li><a href='URL'>SOUS MENU 2.9.1</a></li>
<li><a href='URL'>SOUS MENU 2.9.2</a></li>
</ul></li>

<ul class='ddsubmenustyle' id='ddsubmenu3'>

<li><a href='URL'>MENU 3.1</a></li>
<li><a href='URL'>MENU 3.2</a></li>
<li><a href='URL'>MENU 3.3</a></li>
<li><a href='URL'>MENU 3.4</a></li>
<li><a href='URL'>MENU 3.5</a></li>
<li><a href='URL'>MENU 3.6</a></li>
<li><a href='URL'>MENU 3.7</a></li>
</li> </ul>

<ul class='ddsubmenustyle' id='ddsubmenu4'>

<li><a href='URL'>MENU 4.1</a></li>
<li><a href='URL'>MENU 4.2</a></li>
<li><a href='URL'>MENU 4.3</a></li>
<li><a href='URL'>MENU 4.4</a></li>
<li><a href='URL'>MENU 4.5</a></li>
<li><a href='URL'>MENU 4.6</a></li>
<li><a href='URL'>MENU 4.7</a></li>
</li> </ul>

Comment Personnaliser le code du Menu De Navigation

TESTER

D'abord, copier ce code.
Allez sur "Mise En Page" et , en dessous de l'entête de votre blog, cliquez sur "Ajouter un Gadget" > "HTML/JavaScript"
Collez le code dans la petite fenêtre qui s'ouvre, cliquez sur "Enregistrer".
Vérifier le bon fonctionnement du Menu.
Ensuite vous devez l'adapter à votre blog en choisissant le nombre de menus et l'emplacement éventuel des sous menus.

MODIFIER

Vous n'avez pas à modifier la première partie du code sauf pour changer l'aspect graphique du Menu (couleurs, police...) Soyez prudents !

Pour changer les couleurs (fond...), il suffit de changer le code background mais il en existe plusieurs, aussi faire des tests... et bien noter ce qui est modifié...
A savoir: certaines couleurs (texte des liens en particulier) sont déterminées par le choix de votre modèle Blogger, il faudra donc les modifier via : Modèles >Personnaliser > Avancé puis aller sur "Liens" / "Texte des onglets" /"Arrière Plan des onglets" : changer les couleurs et tester !
Pour toutes les autres modifications de mise en forme et graphisme du Menu, à vous de voir... selon vos compétences.

Vous devez obligatoirement modifier les éléments indiqués dans la deuxième partie du code (à partir de: URL de votre Blog) :

Remplacez toutes les indications URL avec votre propres liens.
Remplacez MENUS et SOUS MENUS avec vos propres titres de liens.
Pour modifier / supprimer / créer un sous-menu comme à l'intérieur du MENU 2 qui comprend 2 sous menus, il faut modifier le code comme indiqué (procéder par copier coller)
Pour mieux comprendre l'organisation du menu, les 4 lignes de code qui introduisent les 4 menus sont mises en rouge

A savoir : les tags <ul> = liste et <li>= élément de liste

les tags fonctionnent par pairs avec un début <li>et une fin</li>
=> attention de ne pas oublier de fermer un tag !

SI PROBLEME....

d'adresse du SCRIPT (menu ne fonctionnant plus)

remplacer le code du début du Menu

~~<script src='http://theblogueur-menu.googlecode.com/files/TheBlogueur_Menu.js'~~
~~type='text/javascript'></script>~~

par celui-ci:
<script src='http://uia.ii.free.fr/menu/Menu_whitearrow.js'
type='text/javascript'></script>

Comment changer les flèches ?
Il faut modifier le script du Menu
1-Récupérer le script "TheBlogueur_Menu.js" ou autre (voir ci-dessus)
2-Ouvrir ce script (bloc notes...)
3-Retrouver, tout au début du script, ce code qui indique le lien vers les images (gif) de flèches

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcaf3b22YaE4X2L1EEmdtux9mVOM35SGsqetbzGkHHYxKiJoL-DVabWY_cjXKYnsn20T_KGc5s19u7KuwsdaLpGrkqyDu_0n0x8M2L_k6jTNTX2DX7lDw-zVd22SvIFUCR9FMDaGFVqFo/s1600/helperblogger.com-arrow-down.gif

http://3.bp.blogspot.com/NjdLcKUwgLA/T8o5oRsLskI/AAAAAAAAB3Q/CY1mCsobpdA/s1600/helperblogger.com-arrow-right.gif
(voir dans le script ci-dessus le fluo jaune)

4-Modifier ou créer vos flèches de la couleur souhaitée avec un logiciel image
5-Stocker vos images sur un serveur (ou utiliser celles proposées ci-dessous)
6-Modifier 2 adresses au début du script avec la nouvelle adresse des flèches

exemple fonctionnel d'adresse de flèches blanches:
http://uia.ii.free.fr/menu/arrow-down-white.gif
http://uia.ii.free.fr/menu/arrow-right-white.gif

D'autres couleurs de flèches sont proposées à la même adresse :
arrow-down-white.gif / arrow-right-green.gif / arrow-right-grey.gif /arrow-right-blue.gif/ arrow-right-yellow.gif/

arrow-right-white.gif / arrow-right-green.gif / arrow-right-grey.gif /arrow-right-blue.gif / arrow-right-yellow.gif