Ajouter une barre de liens déroulante verticale

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.