barre de liens déroulante verticale (2)

obtenir ces boutons

Ajouter une barre de liens déroulante verticale (2)

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('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;width:125px;}

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

.v20blfixe 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>

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.

* * * * *
Autres pages à consulter :

Ajouter une barre de liens horizontale (1) DÉROULANTE

Ajouter une barre de liens horizontale (2) DÉROULANTE A 4 NIVEAUX

7 commentaires:

Alexandre Martinez a dit…

Suite à message de ce matin, j'ai recopié votre code sur mon blog mais les sous-menus s'ouvrent vers le bas et non vers la droite.
Peu être celà vient'il de ma version de blogger?

Meiser a dit…

Bonjour.

Comme vous pouvez le constater dans l'exemple renseigné au début de la page, ce code fonctionne.

Cela peut ne pas être le cas avec certains templates comme les templates de Blogger de 2010.


Cécile Belluard a dit…

Bonjour,
Comment fait-on pour personnaliser les couleurs? Que doit-on changer et où? Car par exemple, j'aimerais avoir un menu avec onglets déroulants en jaune.
Merci!

Meiser a dit…

Bonjour.

Les couleurs sont déterminées par : 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;

Pour obtenir des lettres noires sur fond jaune, utiliser par exemple :
color:black;background:yellow;

On peut remplacer les noms des couleurs par des codes.

On peut remplacer le fond par une image plus détaillée comme dans l'exemple bleu ci-dessus.





Meiser a dit…

Ce commentaire a été supprimé par l'auteur.


Meiser a dit…

Bonjour.

Les couleurs sont déterminées par :
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;

Pour obtenir des lettres noires sur fond jaune, utiliser par exemple :
color:black;background:yellow;

On peut remplacer les noms des couleurs par des codes.

On peut remplacer le fond par une image plus détaillée comme dans l'exemple bleu ci-dessus.


Oudici a dit…

Bonjour

Il y a peu de temps que j'ai découvert votre blog.
Merci pour toutes les infos et la précision de celles-ci.

J'ai implémenté ce menu déroulant vertical avec quelques modifications sur les dimensions.Toutefois il me reste un problème pour les changements de couleur du texte et de l'arrière-plan de ceux-ci.En effet, il semble que les réglages du Template reste toujours prioritaires.
Pensez-vous à une solution, merci de votre réponse

Gilles