On peut placer dans une colonne latérale un simple bouton ou plusieurs
boutons superposés qui donnent accès à des colonnes de liens
supplémentaires. Cliquer ici pour tester EN BAS DE PAGE cette barre de liens déroulante verticale.
TOUTES LES COULEURS SONT POSSIBLES.
* * * * *
Le code nécessaire est le suivant :
<div class="v20bl">
<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="v20blfixe"><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="v20blfixe"><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="v20blfixe"><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="v20blfixe"><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="v20blfixe"><a href="#">LIEN 5</a></div><ul>
<li><div class="v20blfixe"><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="v20blfixe"><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">
.v20bl, .v20bl ul{list-style: none;text-align: center;z-index:999;padding: 0;margin: 0;vertical-align:baseline;}
.v20bl{margin-left:0px;margin-top:0px;width:125px;}
.v20bl li{float: left;}
.v20bl li ul{position: absolute;width: 125px;left: -999em;z-index:999;}
.v20bl li:hover ul ul {left: -999em;}
.v20bl li:hover ul ul ul{left: -999em;}
.v20bl li:hover ul, .v20bl li li:hover ul,.v20bl li li li:hover ul{left: auto;min-height:1%;}
.v20bl ul li {list-style: none;vertical-align:baseline;}
.v20bl li ul {border-top: 1px solid rgb(38,66,80);border-right: 1px solid rgb(38,66,80);width:144px;}
.v20bl li ul {margin: -34px 0 0 144px;min-height: 0;}
.v20bl a {color:white;
background:rgb(38,66,80)
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKNaRrfES3GkYR1W0TQlIJ4tCNMeMtW_FjXJ243uEEHszzDS8UlZNoJAcrWktEXyCfSyNHdfGI3B328b6iv7Kgfy4NOlyMreu1bU-nJ2qOmK3nkAppKn5JloRiZkH896GKOvxiXj6vHyY/s400/onglet+fond+bleu+3.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;width:125px;}
.v20bl a:hover{color:#191970;background:white;}
.v20blfixe a:hover {color:white;
background:rgb(38,66,80)
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKNaRrfES3GkYR1W0TQlIJ4tCNMeMtW_FjXJ243uEEHszzDS8UlZNoJAcrWktEXyCfSyNHdfGI3B328b6iv7Kgfy4NOlyMreu1bU-nJ2qOmK3nkAppKn5JloRiZkH896GKOvxiXj6vHyY/s400/onglet+fond+bleu+3.PNG')
no-repeat;}
</style>
Il suffit d'insérer ce code dans
un gadget HTML/JavaScript : ON ÉVITE AINSI DE TOUCHER AU MODÈLE -
TEMPLATE. Le code a été testé avec Firefox et Internet explorer 7.
Le gadget peut être installé en quelques secondes et testé par chacun.
Comment ajouter un gadget HTML/JavaScript sur un blog.
On ajoute un espace à gauche en corrigeant : .v20bl{margin-left:0px;
Chacun
remplacera les liens par les adresses (http://...) qui lui conviennent :
vers l'intérieur (page, libellé, ...) ou l'extérieur du blog. Le code
target="_blank" ouvre le lien dans une nouvelle fenêtre. Cela concerne
les liens extérieurs au blog, afin que les lecteurs reviennent
automatiquement au blog de départ après lecture.
Il faudra aussi modifier les significations de ces liens (LIEN 1.1, ...) qui apparaissent à l'écran.
* * * * *
POUR
UTILISER CETTE BARRE DE LIENS DÉROULANTE DANS UNE COLONNE LATÉRALE
DROITE, les sous-menus doivent s'afficher A GAUCHE de la barre de liens
verticale.
Il faut donc corriger l'instruction
.v20bl li ul {margin: -34px 0 0 144px;min-height: 0;}
en remplaçant 144px par -146px.
* * * * *
Cette barre de liens NE FONCTIONNE PAS AVEC LES TEMPLATE (MODÈLES) DE 2010 DE BLOGGER.
* * * * *
On peut installer plusieurs barres de liens déroulantes verticales sur un blog.
Dans
ce cas, il ne faut publier qu'une seule fois la dernière partie du code
située entre <style type="text/css"> et </style> : la
"feuille de style" concernée s'appliquera à toutes les barres
verticales.
