Labs - Barre avec menu déroulant

 

Dernières News !!!


La barre des publicités google, affichée dans les blogs en version gratuite ayant "myDesign" ou version Lite, cette barre peut cacher les menus déroulants, des modifications simples sont à faire dans le css :

il faut mettre les blocs de liste dans un flux supérieur, en ajoutant la ligne suivante.

z-index: 10;

 

aux règles suivantes:

#barre ul li:hover ul

#barre ul li li:hover ul

 
voir les codes rectifiés dans l'article

Le système "myDesign" permet d'insérer du code HTML dans la structure des blogs, nous pouvons donc rajouter une liste de liens pour créer un menu déroulant  et  placer cette liste dans un élément(surligné en vert) du bloc "Barre" comme ci-dessous surligné en jaune.
C'est le principe et vous pouvez après rajouter d'autres éléments au menu "Barre" soit avec un lien direct ou insérer une autre liste pour faire un autre menu déroulant.
Mais si nous en restions là, l'effet menu déroulant n'existerait pas, c'est en CSS qu'il faut régler cette animation, voir plus bas.

 

<div id="barre">
<ul>
{menu_haut_li}

<li><a href="#">Blog4ever</a>
<ul>
<li><a href="https://www.blog4ever.com/aide" target="_blank">Rubriques Aide</a></li>
<li><a href="https://www.blog4ever.com/idees" target="_blank">Boîte à idées</a></li>
<li><a href="https://www.blog4ever.com/contact" target="_blank">Contactez-nous</a></li>
</ul>
</li>

</ul>
</div>

 

Vous pouvez créer plusieurs menus déroulants sur la barre, de la même façon.
Les 2 captures suivantes sont , un exemple de 2 menus déroulants à 1 niveau en survolant avec la souris le nom du menu la liste s'affiche en-dessous

 

 

 

Pour ces menus déroulants à un niveau, le CSS basique est le suivant. Il est possible de personnaliser à votre convenance, font, couleur, taille, etc... L'essentiel est l'attribut "display" qui doit être "none" pour que,dans un premier temps, les éléments de la liste ne s'affichent pas et qu'ils s'affichent au survol du nom de la liste avec display:block.

/* déroulant 1 niveau */
#barre ul li ul {
position: absolute;
width: 100px;
display: none;
}
#barre ul li:hover ul {
display: block;
z-index: 10;
}
#barre ul li ul li a {
margin-top:2px;
}

 

Le code HTML à insérer dans le bloc "Barre" est le suivant, ce qui rajoutera 2 boutons de plus à la barre. Rien à changer en CSS ce sont des menus déroulants à 1 niveau, le code indiqué plus haut animera tous les menus à 1 niveau sur la "Barre".

 

<div id="barre">
<ul>
{menu_haut_li}

<li><a href="#">Blog4ever</a>
   <ul>
     <li><a href="https://www.blog4ever.com/aide" target="_blank">Rubriques Aide</a></li>
     <li><a href="https://www.blog4ever.com/idees" target="_blank">Boîte à idées</a></li>
     <li><a href="https://www.blog4ever.com/contact" target="_blank">Contactez-nous</a></li>
     </ul>
</li>
<li><a href="#">Mes blogs</a>
   <ul>
     <li><a href="http://diztest.blog4ever.com" target="_blank">DizTest</a></li>
     <li><a href="http://modeles-graphiques.blog4ever.com" target="_blank">Modèles graph.</a></li>
   </ul>
</li>
</ul>
</div>

 

 

Ces menus sont bien mais parfois on manque de place et un menu déroulant à 2 niveaux serait plus pratique. Pour cette raison j'ai inséré les 2 menus déroulants précédents dans un éléments de la liste du menu 'Barre", ainsi grâce à un petit plus de CSS pour gérer le deuxième niveau, dans un premier temps le premier niveau s'affiche et en survolant les options le deuxième niveau s'affiche.

 

 

 

 

<div id="barre">
<ul>
{menu_haut_li}

<li><a href="#">Autres blogs</a>
   <ul>
     <li><a href="#">Blog4ever</a>
       <ul>
          <li><a href="https://www.blog4ever.com/aide" target="_blank">Rubriques Aide</a></li>
          <li><a href="https://www.blog4ever.com/idees" target="_blank">Boîte à idées</a></li>
          <li><a href="https://www.blog4ever.com/contact" target="_blank">Contactez-nous</a></li>
       </ul>
     </li>
     <li><a href="#">Mes blogs</a>
       <ul>
         <li><a href="http://diztest.blog4ever.com" target="_blank">DizTest</a></li>
         <li><a href="http://modeles-graphiques.blog4ever.com" target="_blank">Modèles graph.</a></li>
       </ul>
     </li>
   </ul>
</li>
</ul>
</div>

 

Ce menu déroulant à 2 niveaux sera animé avec le rajout de CSS suivant.

/* déroulant 2 niveaux */
#barre ul li ul li {
list-style: none;
}
#barre ul li:hover ul ul {
display: none;
}
#barre ul li li:hover ul {
margin-left: 113px;
margin-top: -25px;
display: block;
z-index: 10;
}
#barre ul li li:hover ul li a {
width : 120px;
}

 

 

 

...



12/03/2012
8 Poster un commentaire

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 42 autres membres


Rechercher sur Diztest ? :

Recommander ce blog | Contact | Signaler un contenu | RSS | Espace de gestion

retour Accueil Page precedente Bas de page Plein ecran - Retour alt+F4 Haut de page Page suivante Envoyer un mail a PapyClic le webmaster de Test-DizPerso