• ACCUEIL
  • blogger

    Code HTML d'un menu


    CODE HTML du Menu simplifié présenté dans ce blog


    1-copier le code  à l'intérieur du cadre

    2-quelques explications pour configurer le Menu en dessous de ce code




    1-LE CODE
    <div class="d30bl">

    <li><a href="adresse url">ACCUEIL</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><div class="d30blfixe"><a href="#">Menu 3.2</a></div><ul>
    <li><a href="adresse url" target="_blank">Sous Menu 3.2.1</a></li>
    <li><a href="adresse url" target="_blank">Sous Menu 3.2.2</a></li>
    <li><a href="adresse url" target="_blank">Sous Menu 3.2.3</a></li>
    </ul></li>

    <li><a href="adresse url" target="_blank">Menu3.3</a></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="hadresse 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>

    </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-QUELQUES EXPLICATIONS
    Avant de faire une modification, faire une sauvegarde du code d'origine.



    2-1 ÉLÉMENTS  DU MENU

    -le conteneur div nommé d30bl contient les éléments du menu

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

    Exemple menu 1 "simple"
    <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>

    Exemple avec un Menu 2  qui possède un "sous menu  imbriqué" 2.1 

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


    -Notez que le sous menu <li>...</li> est imbriqué dans  <li>...</li>
    -Notez que toute balise ouverte  doit être refermée.

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


    <li><div class="d30blfixe"><a href="#">Menu X</a></div>
    <ul>
    <li><a href="adresse url" target="_blank">Sous Menu1</a></li>
    <li><a href="adresse url" target="_blank">Sous Menu2</a></li>
    </ul>
    </li>





    2-2 ASPECT DU MENU

     <style type ..     introduit l'aspect du menu.


    Il vaut mieux éviter de modifier le début du code qui règle l'affichage des divers onglets selon leur niveau lors du  déroulement du Menu (distances, marges...)

    MAIS
    Il est facile d'y changer les couleurs dans les dernières lignes du code
    Dans le code ci-dessus:

    A-la couleur bleue du fond du Menu correspond à: rgb(38,66,80) => que l'on peut changer




    A savoir : ici pour simplifier nous n'avons pas repris les couleurs de l'auteur avec un effet de  dégradé qui nécessitent dans le code un lien vers un site extérieur  non sécurisé.


    B-On peut aussi changer la couleur lorsque la souris passe sur le menu terminal via :hover qui permet de spécifier l'apparence d'un élément au moment où l'utilisateur le survole avec le pointeur, sans nécessairement l'activer.
     Ici le code est :            .d30bl a:hover{color:#191970;background:white;}


    -la couleur blanche du fond : :white
    -la couleur bleue du texte sur fond blanc  "midnight blue" : #191970



    C-On pourrait changer la couleur au simple survol d'un élément du Menu (d30blfixe )
    Ainsi, l'avant dernière ligne : .d30blfixe a:hover {color:white;background:rgb(38,66,80)  no-repeat;}
    devient après modification de couleur
     .d30blfixe a:hover {color:white;background:rgb(112,128,144)  no-repeat;}

    et s'affichera au survol de la souris