Création d'une barre horizontale déroulante




Permet d'afficher un maximum de liens en un minimum de place!
Vous pouvez y ajouter des liens vers votre site, vers d'autres et tout ce que vous voulez (à propos...).


_ Pour ouvrir dans la même fenêtre: Supprimer target="_blank"
(dans cet exemple acceuil s'ouvre dans cette même fenêtre alors que ceux ps3 dans une autre).
_ Pour obliger le texte à se décaler vers le bas: supprimer "position abolute;"
_ Taille des caractères: font-size: large
_ Couleur des boutons: #blhd1 a {...background:#ddd;color: #000;
_ Couleurs des liens survolés par le curseur : #blhd1 a:hover{color: #fff;background: #3366FF;
_ L'espace à gauche de la barre : au début du code : margin-left:20px;
_ La largeur des boutons (2x): width: 100px;
_ L'espace autour des caractères : padding: 5px;
_ On peut mettre autant de liens que l'on désire.
Exemple avec un seul bouton:






Code:

<! "http://optimisation-blogger.blogspot.com/">
<div class="blhd1" style="margin-left:20px;"><ul><ul><li><a href="http://optimisation-blogger.blogspot.com/">Acceuil</a></li></ul></ul></div>
<div class="blhd1"><ul><li><a style="color: #000;background:#ddd;" href="#">Ps3</a><ul>
<li><a href="http://les-10-meilleurs.blogspot.com/2011/03/jeux-playstation-3.html
" target="_blank">Top 10</a></li>
<li><a href="http://les-10-meilleurs.blogspot.com/2011/03/ps3course.html
" target="_blank">Course</a></li>
<li><a href="http://les-10-meilleurs.blogspot.com/2011/03/ps3jeux-de-role.html
" target="_blank">Jeux de rôle</a></li>
<li><a href="http://les-10-meilleurs.blogspot.com/2011/03/ps3fps.html
" target="_blank">FPS</a></li>
<li><a href="http://les-10-meilleurs.blogspot.com/2011/03/ps3aventure.html
" target="_blank">Aventure</a></li>
<li><a href="http://les-10-meilleurs.blogspot.com/2011/03/ps3beatem-all.html
" target="_blank"> Beat’em up</a></li>
<li><a href="http://les-10-meilleurs.blogspot.com/2011/03/ps3horreur.html
" target="_blank">Horreur</a></li>
<li><a href="http://les-10-meilleurs.blogspot.com/2011/03/ps3plateforme.html
" target="_blank">Plateforme</a></li>
<li><a href="http://les-10-meilleurs.blogspot.com/2011/03/ps3sport.html
" target="_blank">Sport</a></li></ul></li></ul></div>
<div class="blhd1"><ul><li><a style="color: #000;background:#ddd;" href="#">LIEN 2</a><ul>
<li><a href="---" target="_blank">LIEN 2.1</a></li>
<li><a href="---" target="_blank">LIEN 2.2</a></li>
<li><a href="---" target="_blank">LIEN 2.3</a></li>
<li><a href="---" target="_blank">LIEN 2.4</a></li>
<li><a href="---" target="_blank">LIEN 2.5</a></li>
<li><a href="---" target="_blank">LIEN 2.6</a></li>
<li><a href="---" target="_blank">LIEN 2.7</a></li></ul></li></ul></div>
<div class="blhd1"><ul><li><a style="color: #000;background:#ddd;" href="#">LIEN 3</a><ul>
<li><a href="---" target="_blank">LIEN 3.1</a></li>
<li><a href="---" target="_blank">LIEN 3.2</a></li>
<li><a href="---" target="_blank">LIEN 3.3</a></li>
<li><a href="---" target="_blank">LIEN 3.4</a></li>
<li><a href="---" target="_blank">LIEN 3.5</a></li>
<li><a href="---" target="_blank">LIEN 3.6</a></li>
<li><a href="---" target="_blank">LIEN 3.7</a></li></ul></li></ul></div>
<style type="text/css">
.blhd1 {z-index:1000;position:relative;margin:0px;padding: 0px;text-align:center;}
.blhd1 ul {display:inline;margin:0px;padding: 0px;color:transparent;}
.blhd1 li {border-right:solid transparent 1px;border-bottom:solid transparent 1px;float:left;}
.blhd1 li ul{display:none;}
.blhd1 li:hover ul{position:absolute;margin-left:0px;display:block;min-height: 1%;width: 90px;}
.blhd1 li ul li a {width:90px;text-align:left;padding-left:10px;}
.blhd1 a {width: 100px;border-right: 1px solid #000;border-bottom: 1px solid #000;padding:5px; display:block;background:#ddd; color: #000;text-decoration: none; font-weight: bold;font-family: arial;font-size: large;}
.blhd1 a:hover {color: #fff;background: #3366FF;}
</style></!>
Et vous pouvez en rajouter autant que vous le voulez:
<div class="blhd1"><ul><li><a style="color: #000;background:#ddd;" href="#">LIEN 5</a><ul>
<li><a href="---" target="_blank">LIEN 5.1</a></li>
<li><a href="---" target="_blank">LIEN 5.2</a></li>
<li><a href="---" target="_blank">LIEN 5.3</a></li>
<li><a href="http---" target="_blank">LIEN 5.4</a></li>
<li><a href="---" target="_blank">LIEN 5.5</a></li>
<li><a href="---" target="_blank">LIEN 5.6</a></li>
<li><a href="---" target="_blank">LIEN 5.7</a></li></ul></li></ul></div>
<div class="blhd1"><ul><li><a style="color: #000;background:#ddd;" href="#">LIEN 6</a><ul>
<li><a href="---" target="_blank">LIEN 6.1</a></li>
<li><a href="---" target="_blank">LIEN 6.2</a></li>
<li><a href="---" target="_blank">LIEN 6.3</a></li>
<li><a href="---" target="_blank">LIEN 6.4</a></li>
<li><a href="---" target="_blank">LIEN 6.5</a></li>
<li><a href="---" target="_blank">LIEN 6.6</a></li>
<li><a href="---" target="_blank">LIEN 6.7</a></li></ul></li></ul></div>
Remarque:
Cette barre fonctionne parfaitement avec les anciennes versions de blogger.
Cependant sous les nouvelles versions il semblerait que la barre ai quelques difficultés à fonctionner avec le browser firefox... 
1. Elle apparaît en escalier et il les boutons sont difficilement accessibles (viser comme si la barre était droite au lieu de viser le bouton). 
2. Les boutons disparaissent trop rapidement, pour résoudre cela descendre avec la molette de la sourie ou de façon rapide.

Aucun commentaire:

Enregistrer un commentaire

Inscription à : Publier les commentaires (Atom)