Team-Masters.com
Que du Gratuit pour Webmasters
Un menu horizontal souligné au passage de la souris en CSS
Voici encore un menu horizontal simple à mettre en oeuvre et qui utilise les possiblités des CSS. La police, sa couleur, la couleur de fond et du souligné, la bordure du menu, sont autant de paramètres que vous pouvez modifier pour customiser votre menu à votre guise.
Trève de bavardages, voici un exemple.
Maintenant, le code CSS du menu à insérer dans l’en-tête de vos pages ou mieux, à mettre dans une feuille de style externe :
/*Code du menu horizontal souligné*/
#underlinemenu{
margin: 0;
padding: 0;
}
#underlinemenu ul{
margin: 0;
margin-bottom: 1em;
padding-left: 0;
float: left;
font-weight: bold;
width: 100%;
border: 1px solid #DFDFDF;
border-width: 1px 0;
}
/*règle pour IE. Supprime la marge extra basse*/
* html #underlinemenu ul{
margin-bottom: 0;
}
#underlinemenu ul li{
display: inline;
}
/*Les liens tels que vous voulez qu'ils apparaissent*/
#underlinemenu ul li a{
float: left;
color: gray;
font-weight: bold;
padding: 2px 6px 4px 6px;
text-decoration: none;
/*image de séparation des rubriques avec son adresse*/
background: white url(images/menudivide.gif) top right repeat-y;
}
/*Ici, c'est pour le configurer le survol des liens*/
#underlinemenu ul li a:hover{
color: red;
background-color: #F3F3F3;
border-bottom: 4px solid red;
padding-bottom: 0;
} Voici le code HTML du menu à mettre dans le BODY de vos pages :
<div id="underlinemenu">
<ul>
<li><a href="#" title="Accueil">Accueil</a></li>
<li><a href="#" title="Bibliothèque">Livres</a></li>
<li><a href="#" title="Nouveautés">Nouveau</a></li>
<li><a href="#" title="Actualités">Actualités</a></li>
<li><a href="#" title="Pour vous">Outils</a></li>
<li><a href="#" title="Voir les forums">Forums</a></li>
</ul>
</div>C’est simple, mais cool, non ? Pour le code HTML, il suffit de mettre les titres de vos liens, et de renseigner le href pour la page de destination.C’est sur Team-Masters.com
N’oubliez pas de télécharger l’image de séparation verticale que voici :
17 août 2006
22 menus verticaux en CSS prêts à l’emploi
Un menu horizontal bien souligné
Un menu vertical avec un effet bouton 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
Un menu vertical simple en CSS
