Barre de liens horizontale déroulante codes 2

obtenir ces boutons

Barre de liens horizontale
DÉROULANTE A QUATRE NIVEAUX :
CODES DES EXEMPLES 5 ET 6

Sur cette page, on trouve les code correspondant aux exemples 5 et 6 de barre de liens horizontale déroulante à 4 niveaux (explications ici). EXEMPLES ICI.

* * * * *
Contrairement aux barres précédentes, l'arrière des onglets de la barre de liens noire (avec des caractères rouges) n'est pas une image mais une simple couleur qu'on peut changer facilement à la fin du code.

Le code pour obtenir la 5° barre de liens (fond noir - caractères rouges) est le suivant :

<div class="d20no">

<li><a href="#">ACCUEIL</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 2</a></li>

<li><div class="d20nofixe"><a href="#">LIEN 3</a></div><ul>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 3.1</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 3.2</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 3.3</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 3.4</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 3.5</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 3.6</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 3.7</a></li></ul></li>

<li><div class="d20nofixe"><a href="#">LIEN 4</a></div><ul>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 4.1</a></li>

<li><div class="d20nofixe"><a href="#">LIEN 4.2</a></div><ul>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 4.2.1</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 4.2.2</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 4.2.3</a></li></ul></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 4.3</a></li>

<li><div class="d20nofixe"><a href="#">LIEN 4.4</a></div><ul>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 4.4.1</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 4.4.2</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 4.4.3</a></li></ul></li></ul></li>

<li><div class="d20nofixe"><a href="#">LIEN 5</a></div><ul>

<li><div class="d20nofixe"><a href="#">LIEN 5.1</a></div><ul>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 5.1.1</a></li>

<li><div class="d20nofixe"><a href="#">LIEN 5.1.2</a></div><ul>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">L. 5.1.2.1</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">L. 5.1.2.2</a></li></ul></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 5.1.3</a></li></ul></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 5.2</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 5.3</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 5.4</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 5.5</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 5.6</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 5.7</a></li></ul></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 6</a></li>

<li><a href="http://radios-en-ligne.blogspot.com/" target="_blank">Radios</a></li>

<li><a href="http://televisions-en-ligne.blogspot.com/" target="_blank">Télévisions</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">CONTACT</a></li>

<a href="http://modifier-les-modeles-de-blogger.blogspot.com" style="display:none;">blogger</a>

</div>

<style type="text/css">
.d20no, .d20no ul{list-style: none;
text-align: center;z-index:999;padding: 0;margin: 0;}
.d20no{width:925px;margin:0px auto;margin-top:0px;}
.d20no li{float: left;}
.d20no li ul{position: absolute;width: 125px;left: -999em;z-index:999;}
.d20no li ul{margin-top: -1px;}
.d20no li:hover ul ul {left: -999em;}
.d20no li:hover ul ul ul{left: -999em;}
.d20no li ul li a {width:125px;border:none;}

.d20no li ul {margin-left:-28px;width:143px;border: 1px solid black;}
.d20no li ul ul{width:143px;border-left: 1px solid red;}
.d20no li ul ul{margin: -33px 0 0 144px;min-height: 0;}

.d20no li:hover ul, .d20no li li:hover ul,.d20no li li li:hover ul{left: auto;min-height:1%;}

.d20no a {color:red;background:black;padding:7px 9px; display:block;text-decoration: none; font-weight:bold;font-family: arial;font-size: 18px;line-height: 18px;}

.d20no a:hover{color:white;background:red;}

.d20nofixe a:hover {color:red;background:black;}
</style>

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

* * * * *
Le code pour obtenir la 6° barre de liens (à fond gris) est le suivant :

<div class="d10gr">

<li><div class="couleurrouge"><a href="#">ACCUEIL</a></div></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 2</a></li>

<li><div class="d10grfixe"><a href="#">LIEN 3</a></div><ul>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 3.1</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 3.2</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 3.3</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 3.4</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 3.5</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 3.6</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 3.7</a></li></ul></li>

<li><div class="d10grfixe"><a href="#">LIEN 4</a></div><ul>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 4.1</a></li>

<li><div class="d10grfixe"><a href="#">LIEN 4.2</a></div><ul>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 4.2.1</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 4.2.2</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 4.2.3</a></li></ul></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 4.3</a></li>

<li><div class="d10grfixe"><a href="#">LIEN 4.4</a></div><ul>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 4.4.1</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 4.4.2</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 4.4.3</a></li></ul></li></ul></li>

<li><div class="d10grfixe"><a href="#">LIEN 5</a></div><ul>

<li><div class="d10grfixe"><a href="#">LIEN 5.1</a></div><ul>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 5.1.1</a></li>

<li><div class="d10grfixe"><a href="#">LIEN 5.1.2</a></div><ul>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">L. 5.1.2.1</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">L. 5.1.2.2</a></li></ul></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 5.1.3</a></li></ul></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 5.2</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 5.3</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 5.4</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 5.5</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 5.6</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 5.7</a></li></ul></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 6</a></li>

<li><a href="http://radios-en-ligne.blogspot.com/" target="_blank">Radios</a></li>

<li><a href="http://televisions-en-ligne.blogspot.com/" target="_blank">Télévisions</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">CONTACT</a></li>

<a href="http://modifier-les-modeles-de-blogger.blogspot.com" style="display:none;">blogger</a>

</div>

<style type="text/css">
.d10gr, .d10gr ul{list-style: none;
text-align: center;z-index:999;padding: 0;margin: 0;}
.d10gr{width:925px;margin:0px auto;}
.d10gr li{float: left;margin-right:2px;}
.d10gr li ul{position: absolute;width: 125px;left: -999em;z-index:999;}

.d10gr li:hover ul ul {left: -999em;}
.d10gr li:hover ul ul ul{left: -999em;}
.d10gr li:hover ul, .d10gr li li:hover ul,.d10gr li li li:hover ul{left: auto;min-height:1%;}

.d10gr li ul li a {width:125px;margin-top:1px;margin-bottom:0px;margin-left:-28px;}
.d10gr li ul ul{margin: -34px 0 0 146px;min-height: 0;}

.d10gr a {color:#191970;background:#ddd;border-right: 1px solid #000;border-bottom: 1px solid #000;padding:7px 9px; display:block;text-decoration: none; font-weight:bold;font-family: arial;font-size: 18px;margin-bottom:1px;line-height: 18px;}
.couleurrouge a {color:red;}
.d10gr a:hover{color:white;background:blue;}
.d10grfixe a:hover {color:#191970;background:#ddd;}
</style>

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

Aucun commentaire: