ABC: BLOG & 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>

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"

</ul>
</li>

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

</ul>
</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)

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

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

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