Team-Masters.com
Que du Gratuit pour Webmasters
Feuilles de style : Affichez une description de vos menus au passage de la souris
Vous avez besoin d’un menu "dynamique" pour donner de l’effet à votre site ? Pas de problèmes ! Voici un menu horizontal a priori des plus classiques. Le truc, c’est que lorsque la souris le survole, on va afficher en dessous une description du menu qui permettra au visiteur d’avoir une idée de ce qu’il va trouver s’il clique. Cela permet de donner de l’effet à votre site, mais en plus d’améliorer la navigation sur celui-ci.
Ce menu est en plus réalisable sans recourir à Javascript, donc pour l’indexation dans les moteurs de recherche, c’est tout bénef ! Que du code HTML et CSS.
Si vous avez aimé, il suffit de copier-coller les codes ci-dessous. Vous pouvez en plus paramétrer le menu à votre goût selon le design de votre site. Le code se compose en deux parties : le code CSS et le code HTML.
Code CSS à intégrer dans le HEAD de votre page entre les balises <style type="text/css"> et </style> ou encore mieux à mettre dans une feuille de style externe liée à votre page :
ul {
list-style-type: none; /*on supprime les puces inutiles de la liste */
margin:0;
padding:0;
position: absolute;
top: 2em; /* positionnement du menu, que vous pouvez modifier */
left: 2em;
}
li {
float: left;
}
.menu a { /* définition de chaque bouton du menu */
width: 100px; /* largeur du bouton, que vous pouvez changer */
height: 20px;
float: left;
display: block;
text-align: center;
border: 1px solid #ffffff;
text-decoration: none;
color: #000000;
background: #ffffff;
}
.menu a:hover {
color: #411;
background: #AAAAAA;
border: 1px solid gray;
border-bottom: 0px;
color: #ffffff;
}
.menu a span { /* définition de la balise <span> inclue dans <a> */
display: none; /* on cache le span quand le menu n'est pas survolé */
}
.menu a:hover span { /* définition de la balise <span> au survol */
display: block; /* on affiche le span au survol qui va contenir la description */
position: absolute;
top: 20px;
left: 0;
width: 600px; /* largeur de la zone de commentaires, selon la taille du menu */
text-align: left;
border-top: 1px solid gray;
color: #000000;
} Voici le code HTML à intégrer dans le BODY de votre page :
<ul class="menu">
<li><a href="URL à atteindre">Super<span>Dans ce menu vous trouverez de quoi vous lécher les babines.</span></a></li>
<li><a href="URL à atteindre">Ordinaire<span>Dans celui-ci, quopi de plus logique que de décrire votre rubrique.</span></a></li>
<li><a href="URL à atteindre">Gratuit<span>Bah bah bah! Que du gratuit sur Team-masters.com!</span></a></li>
<li><a href="URL à atteindre">Impressions<span>Donnez vos impressions dans ce menu là</span></a></li>
<li><a href="URL à atteindre">Click click<span> >> Uniquement en feuilles de style. <b>Toute la puissance des CSS.</b></span></a></li>
<li><a href="URL à atteindre">En somme<span><em>C'est tout con et cool non?</em></span></a></li>
</ul>Alors, si ça vous va, il suffit de se servir. Team-Masters.com c’est fait pour ça !
5 juillet 2005
Très Bon Plan A NE PAS MANQUER ! Cliquez!!
Des Secrets pour 7€: Un rapport, un script pour réussir à vendre sur Internet. Cliquez!
22 menus verticaux en CSS prêts à l’emploi
Un menu horizontal bien souligné
Un menu vertical avec un effet bouton en CSS
Un menu horizontal souligné au passage de la souris en CSS
Une barre de pagination tout en CSS
Un menu horizontal en CSS avec une barre de séparation
Un menu vertical hiérarchisé en CSS
Un menu vertical aux effets agréables en CSS
CSS : Un menu vertical en 3D
Créez un menu vertical avec effet de rollover en CSS
