• ACCUEIL
  • 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 le NOMS
    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   : http://menus-deroulants-pour-blogger.blogspot.com/ qui propose divers modèles avec une présentation différente mais tous sont basés sur le même principe.

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

    <!--[if IE]><style type="text/css">.d30bl{width:929px;}</style><![endif]-->


    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>

    <!--[if IE]><style type="text/css">.d30bl{width:929px;}</style><![endif]-->






    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




    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

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

    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"

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


    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  :


    <a href="#">



    • 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
      •  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, notre source : 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)

    <script src='http://theblogueurmenu.googlecode.com/files/TheBlogueur_Menu.js'
    type='text/javascript'></script>


    2 POSSIBILITES de REPARATION

    A- remplacer, au début du script, cette ligne de code
    <script src='http://theblogueurmenu.googlecode.com/files/TheBlogueur_Menu.js'
    type='text/javascript'></script

    par [copier/coller via le bloc notes]
     le code affiché sur cette page
    ou
     le télécharger via  ce fichier txt


    B. (ou)  Déplacer  le fichier  "TheBlogueur_Menu.js" 

    Comme le fichier est indisponible, télécharger ici le fichier "TheBlogueur_Menu.js"

    ou  l'obtenir via ce fichier txt

    Ensuite positionner ce fichier  sur un serveur et modifier l'adresse d'accès

    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/TheBlogueur_Menu.js' type='text/javascript'></script>


    => Attention le code  pour A ( à coller au début du script) est différent  de B qui est un fichier  à placer sur un serveur distant!



    COULEUR DE FLÈCHE DU MENU

    Comment obtenir un Menu avec une autre couleur de flèche ? ex : blanches ( à la place des flèches rouges...)



    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

    http://1.bp.blogspot.com/-8CsFG7HWkos/T8o5nSpSnWI/AAAAAAAAB3I/7A4hohJANEM/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