Team-Masters.com
Que du Gratuit pour Webmasters
Un menu de navigation par onglets en CSS
Voici menu bien sympathique qui donnera du style et permettra de naviguer sur votre site à l’aide d’onglets. Le tout entièrement en CSS. Pas d’images donc d’une simplicité et d’une légèreté en terme de chargement. Chaque onglet n’est qu’en fait qu’une liste d’éléments dont l’affichage utilise la propriété "display" avec pour valeur "inline", ce qui permet un alignement côte à côte au lieu d’être vertical.
Cliquez ici pour voir le menu en onglets.
Voici le code HTML à insérer dans votre page pour votre menu. Il s’agit ni plus ni moins de l’utilisation des balises <ul> et <li>. Bien sûr, il vous suffit de renseigner les balises de liens. L’affichage des onglets s’obtient par du code CSS à insérer soit dans l’en-tête de la page à l’aide des balises <style>, soit dans une feuille de style externe rattachée à votre page.
Code HTML à mettre dans votre page à l’endroit voulu :
<ul id="onglet">
<li><a class="courant" href="http://www.team-masters.com">Team-Masters</a></li>
<li><a href="http://www.allhtml.com">AllHTML</a></li>
<li><a href="http://www.voila.fr">Voila</a></li>
<li><a href="http://www.news.com">NewNews.com</a></li>
</ul>Le code CSS du menu par onglets :
#onglet {
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
}
#onglet li{
list-style: none;
display: inline;
margin: 0;
}
#onglet li a{
text-decoration: none;
padding: 3px 0.5em;
margin-right: 3px;
border: 1px solid #778;
border-bottom: none;
background: white;
}
#onglet li a:link, # onglet li a:visited{
color: navy;
}
#onglet li a:hover{
color: black;
background: lightyellow;
border-color: navy;
}
#onglet li a.courant{
background: lightyellow;
}Vous pouvez jouer sur les propriétés color, background, border, text-decoration ou font afin de donner le style que vous souhaitez à vos onglets. Ici, ce qui est important ce sont #onglet et #onglet li qui fixent en fait les règles de "construction" du menu par onglets, notamment en utilisant deux propriétés importantes de mise en page que sont "list-type" et "display". L’onglet de la page courante est distingué en lui appliquant la classe "courant".
C’est cool non ? Et le tout sans images compliquées. Vous attendez quoi pour vous servir ? Vous dormez ou quoi ?
14 janvier 2005
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
