Barre de liens horizontale déroulante codes 1

obtenir ces boutons

Barre de liens horizontale
DÉROULANTE A QUATRE NIVEAUX :
CODES DES EXEMPLES 1 A 4

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

* * * * *
L'arrière des onglets de la première barre de liens (bleue) est une image.

Le code pour obtenir la première barre de liens (bleue) est le suivant :

<div class="d20bl">

<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="d20blfixe"><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 test test</a></li></ul></li>

<li><div class="d20blfixe"><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="d20blfixe"><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="d20blfixe"><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="d20blfixe"><a href="#">LIEN 5</a></div><ul>

<li><div class="d20blfixe"><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="d20blfixe"><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" style="border-right:1px solid rgb(38,66,80);">CONTACT</a></li>

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

</div>

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

.d20bl li ul {margin-left:-28px;border-top: 1px solid rgb(38,66,80);border-right: 1px solid rgb(38,66,80);width:144px;margin-top:-1px;}

.d20bl li ul li a {width:125px;}
.d20bl li ul ul{margin: -34px 0 0 144px;min-height: 0;}

.d20bl a {color:white;
background:rgb(38,66,80) url('http://1.bp.blogspot.com/-yaeJ3oXQ2pc/TqVNe1XGfpI/AAAAAAAAA3M/-XMh8wD3WvM/s400/onglet%2Bfond%2Bbleu%2B3.PNG') no-repeat;border-bottom: 1px solid rgb(38,66,80);border-left: 1px solid rgb(38,66,80);padding:7px 9px; display:block;text-decoration: none; font-weight:bold;font-family: arial;font-size: 18px;line-height: 18px;}

.d20bl a:hover{color:#191970;background:white;}

.d20blfixe a:hover {color:white;
background:rgb(38,66,80) url('http://1.bp.blogspot.com/-yaeJ3oXQ2pc/TqVNe1XGfpI/AAAAAAAAA3M/-XMh8wD3WvM/s400/onglet%2Bfond%2Bbleu%2B3.PNG') no-repeat;}
</style>

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

* * * * *
Pour obtenir le code permettant de réaliser la 2° barre de liens (rouge), le code nécessaire est le suivant :

<div class="d20ro">

<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="d20rofixe"><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 test test</a></li></ul></li>

<li><div class="d20rofixe"><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="d20rofixe"><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="d20rofixe"><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="d20rofixe"><a href="#">LIEN 5</a></div><ul>

<li><div class="d20rofixe"><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="d20rofixe"><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" style="border-right:1px solid rgb(90,0,0);">CONTACT</a></li>

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

</div>

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

.d20ro li ul {margin-left:-28px;border-top: 1px solid rgb(90,0,0);border-right: 1px solid rgb(90,0,0);width:144px;margin-top:-1px;}

.d20ro li ul li a {width:125px;}
.d20ro li ul ul{margin: -34px 0 0 144px;min-height: 0;}

.d20ro a {color:white;
background:rgb(90,0,0) url('http://1.bp.blogspot.com/-LXIr9bIgAVU/TqVNn8_OWyI/AAAAAAAAA3Y/9r095VTWVKA/s400/onglet%2Bfond%2Brouge%2B3.PNG') no-repeat;border-bottom: 1px solid rgb(90,0,0);border-left: 1px solid rgb(90,0,0);padding:7px 9px; display:block;text-decoration: none; font-weight:bold;font-family: arial;font-size: 18px;line-height: 18px;}

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

.d20rofixe a:hover {color:white;
background:rgb(90,0,0) url('http://1.bp.blogspot.com/-LXIr9bIgAVU/TqVNn8_OWyI/AAAAAAAAA3Y/9r095VTWVKA/s400/onglet%2Bfond%2Brouge%2B3.PNG') no-repeat;}
</style>

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

* * * * *
Pour obtenir le code permettant de réaliser la 3° barre de liens (verte), le code nécessaire est le suivant :

<div class="d20ve">

<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="d20vefixe"><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 test test</a></li></ul></li>

<li><div class="d20vefixe"><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="d20vefixe"><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="d20vefixe"><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="d20vefixe"><a href="#">LIEN 5</a></div><ul>

<li><div class="d20vefixe"><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="d20vefixe"><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" style="border-right:1px solid rgb(78,95,71);">CONTACT</a></li>

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

</div>

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

.d20ve li ul {margin-left:-28px;border-top: 1px solid rgb(78,95,71);border-right: 1px solid rgb(78,95,71);width:144px;margin-top:-1px;}

.d20ve li ul li a {width:125px;}
.d20ve li ul ul{margin: -34px 0 0 144px;min-height: 0;}

.d20ve a {color:white;
background:rgb(78,95,71) url('http://4.bp.blogspot.com/-fc95Tll9pnI/TqVNzqTuHtI/AAAAAAAAA3k/G_tKQjUdlS8/s400/onglet%2Bfond%2Bvert%2B3.PNG') no-repeat;border-bottom: 1px solid rgb(78,95,71);border-left: 1px solid rgb(78,95,71);padding:7px 9px; display:block;text-decoration: none; font-weight:bold;font-family: arial;font-size: 18px;line-height: 18px;}

.d20ve a:hover{color:white;background:orange;}

.d20vefixe a:hover {color:white;
background:rgb(78,95,71) url('http://4.bp.blogspot.com/-fc95Tll9pnI/TqVNzqTuHtI/AAAAAAAAA3k/G_tKQjUdlS8/s400/onglet%2Bfond%2Bvert%2B3.PNG') no-repeat;}
</style>

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

* * * * *
Pour obtenir le code permettant de réaliser la 4° barre de liens (beige), le code nécessaire est le suivant :

<div class="d20be">

<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="d20befixe"><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 test test</a></li></ul></li>

<li><div class="d20befixe"><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="d20befixe"><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="d20befixe"><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="d20befixe"><a href="#">LIEN 5</a></div><ul>

<li><div class="d20befixe"><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="d20befixe"><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" style="border-right:1px solid rgb(135,94,74);">CONTACT</a></li>

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

</div>

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

.d20be li ul {margin-left:-28px;border-top: 1px solid rgb(135,94,74);border-right: 1px solid rgb(135,94,74);width:144px;margin-top:-1px;}

.d20be li ul li a {width:125px;}
.d20be li ul ul{margin: -34px 0 0 144px;min-height: 0;}

.d20be a {color:brown;
background:rgb(135,94,74) url('http://3.bp.blogspot.com/-rCJEBEaB0yI/TqVN_oRZ7GI/AAAAAAAAA3w/7SsUbTbyLBM/s400/onglet%2Bfond%2Bbeige%2B3.PNG') no-repeat;border-bottom: 1px solid rgb(135,94,74);border-left: 1px solid rgb(135,94,74);padding:7px 9px; display:block;text-decoration: none; font-weight:bold;font-family: arial;font-size: 18px;line-height: 18px;}

.d20be a:hover{color:white;background:orange;}

.d20befixe a:hover {color:brown;
background:rgb(135,94,74) url('http://3.bp.blogspot.com/-rCJEBEaB0yI/TqVN_oRZ7GI/AAAAAAAAA3w/7SsUbTbyLBM/s400/onglet%2Bfond%2Bbeige%2B3.PNG') no-repeat;}
</style>

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

32 commentaires:

Thierry et Anaïs a dit…

Bonjour,

Tout d'abord bravo pour votre travail très utile !
Je viens de rentrer ce code sur mon blog et cela fonctionne bien. Il y a juste un petit problème, lorsque l'on clique sur une photo elle s'affiche en grand mais la barre de menu la chevauche sur toute la largeur.
Voir ici : http://deux-par-le-monde.blogspot.fr/

Auriez-vous une solution ?
Un grand merci !

Meiser a dit…

Bonjour.

Supprimer deux fois :
z-index:999;


Anonyme a dit…

Bonjour peut-on avoir la meme chose avec les libellés ?

Merci

Meiser a dit…

Bonjour.

3 solutions :
1) Afficher un libellé et copier l'adresse en haut de l'écran. L'ajouter dans la barre de liens.
2) L'ajouter dans le gadget "pages" (voir "pages statiques").
3) Créer un gadget "libellés" et le déplacer en-dessous du titre du blog.


Thierry et Anaïs a dit…

Merci Meiser, ça marche super de mon côté!
A+

Cath a dit…

Bonjour, je cafouille. Une fois que j'ai fait un copié du code voulu, qu'est-ce que j'en fais et où faut-il le coller pour retrouver la barre de menu sur mon blog ?

Meiser a dit…

Bonjour.

C'est expliqué dans l'écran précédent.

Choisir :
"Ajouter un gadget"
"Gadget HTML/JavaScript"

Coller le code et enregistrer.

Déplacer le nouveau gadget avec la souris si nécessaire.


Cath a dit…

Merci à vous mais malheureusement l'interface que j'avais il y a un an ou deux ne se présente plus de la même façon, plus de "tableau de bord" ni de "présentation", de plus pas moyen de trouver l'HTML javascript,en question, je ne peux coller le code nulle part.
J'ai bien l'impression que je ne pourrai pas installer de barre de menus. à moins que...
Si vous avez une solution merci à vous.

Meiser a dit…

Bonjour.

Ceci peut vous aider :

http://modifier-les-modeles-de-blogger.blogspot.be/2012/09/nouvelle-interface-de-blogger-mode.html


Cath a dit…

Bonsoir.
Bien j'ai ajouté le gadget HTML/Javascript. J'ai copié et collé les codes des liens 4 et dérivés, enregistré, ils apparaissent tous sur le blog(à la verticale et non à l'horizontale) je n'ai pas de barre comme prévu? Maintenant comment mettre les informations dans les liens ? excusez moi mais je ne suis pas une pro.
Merci pour votre patience

Meiser a dit…

Bonjour.

Il faut sauvegarder ce que vous avez fait dans un fichier avec le bloc-notes (notepad). Il faut ensuite essayer d'insérer le code fourni sans aucune correction et voir si cela fonctionne avec votre template.


Natou a dit…

Bonjour comment modifier la couleur du fond et de l'ecriture?

Meiser a dit…


Bonjour.

color:white;
background:rgb(38,66,80) url('http://1.bp.blogspot.com/-yaeJ3oXQ2pc/TqVNe1XGfpI/AAAAAAAAA3M/-XMh8wD3WvM/s400/onglet%2Bfond%2Bbleu%2B3.PNG') no-repeat;

caractères : color
fond : background

Plus d'explications sont disponibles sur cette page :

http://modifier-les-modeles-de-blogger.blogspot.be/2012/10/barre-de-liens-deroulante-en-deux-lignes.html


Noushka a dit…

Formidable, un grand merci pour cette facilité des codes; ailleurs, impossible de savoir comment placer le CSS!
J'ai donc bien installé ce menu, mais il n'a apparemment pas la place de se dérouler: seul un sous-menu apparait sous chaque menu princial.
Comment pourrais-je m'y prendre?

Un grand merci d'avance,

Voici le lien vers mon blog test:
http://austral-eyes.blogspot.fr/

Cdt,

Meiser a dit…

Bonjour.

Dans le mode d'emploi figure ceci :

AVERTISSEMENT : ces barres de liens déroulantes ne sont pas utilisables, sous Internet explorer, avec les template de Blogger de 2010 ou un template créé avec l'outil de création de modèles de Blogger : les liens des sous-menus passent derrière les messages ou ne fonctionnent pas.

On peut par contre utiliser les deux barres horizontales de liens déroulantes qui sont disponibles ici :

http://modifier-les-modeles-de-blogger.blogspot.be/2012/10/barre-de-liens-deroulante-en-deux-lignes.html


Noushka a dit…

Un grand merci Meiser, autant pour moi!
Par contre je n'arrive pas à lui imposer une plus grande largeur (1270 px).
J'ai tenté de changer ici:
.d20bl li ul{display:none;position:absolute;left:50px; top:35px !important;width:1270px;}
Mais ça ne marche pas...
Y a-t-il une solution?
Cdt,

Meiser a dit…

Bonjour.

1) Je vous propose d'abord, pour les autres lecteurs, de poser la question sur la page concernée.

2) Quelle est la largeur du blog ?


Driguez a dit…

Bonjour, y a t'il un moyen de garder actif l'onglet de la page sur laquelle on se trouve? merci!

Meiser a dit…

Bonjour.

Avec de la programmation on le pourrait.

Mais cela n'aurait pas de sens avec une barre déroulante : on ne pourrait pas laisser le sous-menu déployé au-dessus du message, pour laisser apparent le lien utilisé.


Enzo Youx a dit…

Bonjour !
J'aimerais mettre une barre mais avec que 4 liens sans listes déroulents, est-ce possible ?
Meric d'avance

Blog2stocks a dit…

Bonjour
Merci pour toutes ces astuces!!!
Par contre, j'ai passer mon nom de blog en .com avec achat de nom de domaine sur google, mais depuis, mes sous-menus n'apparaissent pas dans mon site/blog.
J'ai pourtant modifié mon adresse .blogspot.fr en .com dans le code du widget du gadget.
une petite soluce ou une explication peut-être???
Merci bien.

Meiser a dit…

Bonjour.

Comme je n'utilise pas de nom de domaine, je ne peux malheureusement pas vous renseigner.


honore bonnet a dit…

Bonjour
Magnifique exemple 1 tout fonctionne
Mais comment ou pas pour avoir une redirection sur une page de mon blog au lieu d'un lien
MERCI

Meiser a dit…

Bonjour.
Ces pages ont une adresse qui s'affiche en haut de l'écran quand on on les ouvre. Il suffit de copier et d'utiliser cette adresse.


Cyril, Ben, Alex a dit…

Bonjours a vous, votre menu est terrible, un grand merci. J'ai déjà bien modifier celui ci pour le personnaliser mais je n'arrive pas a rester sur le même onglet du navigateur a chaque clik.
Savez vous comment peut on rester sur un seul onglet quant on choisi une sélection sur le menu?

Cyril, Ben, Alex a dit…

Ok j'ai trouver donc je laisse ici le truc.
Il faut virer : target="_blank" et up le tour est jouer.. ;)

Goudard Manon a dit…

Bonjour,

Tout d'abord merci pour toutes vos indications et votre travail.
Voilà, j'ai un petit problème, en rentrant ce le code, en inscrivant les noms des onglets et sous onglets que ej veux, lorsque je passe ma souris dessus, la liste des sous onglets est caché par les messages du blog.
voir ici: http://festivaldemusique.blogspot.com

Meiser a dit…

Bonjour.

Dans le mode d'emploi figure ceci :

AVERTISSEMENT : ces barres de liens déroulantes ne sont pas utilisables, sous Internet explorer, avec les template de Blogger de 2010 ou un template créé avec l'outil de création de modèles de Blogger : les liens des sous-menus passent derrière les messages ou ne fonctionnent pas.

On peut par contre utiliser les deux barres horizontales de liens déroulantes qui sont disponibles ici :

http://modifier-les-modeles-de-blogger.blogspot.be/2012/10/barre-de-liens-deroulante-en-deux-lignes.html


QE Coaching a dit…

Bonjour et merci pour ces différents cours.

ce que je voudrais savoir est que tous mes posts (articles publiés se retrouvent dans le menu ARTICLES. Comment insérer chaque post dans son menu correspondant par exemple : ACCUEIL, FORMATIONS,VIDEOS, PHOTOS...

Merci de votre soutien

Meiser a dit…

Bonjour.

Consultez cette page :
http://modifier-les-modeles-de-blogger.blogspot.com/2010/04/ajouter-des-libelles-creer-un-index.html


achraf halim a dit…

MERCI BIEN

Jeremy a dit…

Bonjour,

Merci pour ces exemples que tu partages avec nous.

J'ai essayé de copier / coller ton code de menu déroulant sur mon blog que je suis en train de rédiger :

https://baroudeur974.blogspot.fr/2017/02/accueil.html

Le menu s'affiche ... il y a une sorte de petite bar bleu en dessous des écritures bizarre mais ce n'est pas le plus grave.

Le plus gênant c'est que j'ai une seule ligne possible en sous menu de niveau 1. Les sous menu de niveau 2 ne s'affichent pas.

Dans un fichier html, mon navigateur interprète bien le code. Par contre dès que c'est publié sur Blogger, ça ne fonctionne plus.

Aurais-tu une interprétation ou une correction à ce comportement stp ?

Merci.

Jeremy