CSS des menu du site
Sur ce site les menu sont simple et utilise très peu d'image graphique et permet le référencement de chaque setion avec le texte des menus écrit en HTML au lieu d'être dans une image.Le type de menu en CSS à plusieurs avantages :
- pouvoir modifier les menu sans avoir à manipuler des images, et pour ce qui est de ce site c'est obligatoire puisque les menus sont géré à partir d'une base de données.
- c'est aussi important pour bien référencer chaque section du site.
- cela permet au ajustement du menu en différente taille plus facilement qu'avec des images
- c'est plus rapide de chargement; pas plusieurs images à télécharger.
J'ai utilisé 6 différentes classes pour mes différents type d'affichage de menu :
- menu : pour les menu du haut inactif
- menu_actif : pour les menu du haut actif
- s_menu : pour le menu de coté inactif (sous menu)
- s_menu_actif : pour le menu de côté actif
- s_menu_t : pour le premier menu de côté (titre du sous menu)
- fin_menu : pour le dernier menu de côté (pour y ajouter une bordure)
Le code HTML des menus de ma page d'accueil est :
<a href='/accueil/' class='menu_actif'>Accueil</a>
<a href='/programmation-web/' class='menu'>Programmation web</a>
<a href='/optimisation/' class='menu'>Optimisation</a>
<a href='/liens/' class='menu'>Liens</a>
<a href='/fonctionnement-du-site/' class='menu'>Fonctionnement du site</a>
<a href='/pascal-dubreuil/' class='menu'>À propos de l'auteur</a>
<a href='http://www.phpascal.com/plan-du-site.php' class='menu'>Plan du site</a>
<div id="s_menu">
<a href='/accueil/' class='s_menu_t'>Accueil</a>
<a href='/accueil/But-du-site/' class='s_menu'>But du site</a>
<a href='/accueil/Historique/' class='s_menu fin_menu'>Historique</a>
</div>
Le DIV avec l'ID s_menu me permet de spécifier la largeur du sous menu.
CSS pour habiller ces menus :
Par la suite j'ai différents CSS spécifique pour chaque couleur possible du site pour utiliser des images de background.
#s_menu { width:160px; padding-top:45px; float:left; }
.s_menu, .s_menu_actif , .s_menu_t
{
display:block;
width:160px;
border: 1px solid black;
border-bottom: 0px solid black;
color:#000000;
font-size: 12px;
font-weight: bold;
line-height: 20px;
min-height: 20px;
padding:2px 10px 2px 10px;
background: #626262 url(../images/header_gray.gif) top left repeat-x;
}
.s_menu_t { color:#FFFFFF; background: #626262 url(../images/header_blue.gif) top left repeat-x;}
.s_menu_actif { background: #626262 url(../images/header_light_blue.gif) top left repeat-x;}
a.s_menu:hover { background: #626262 url(../images/header_light_blue.gif) top left repeat-x;
text-decoration:none; }
.fin_menu {border: 1px solid black;}
.menu, .menu_actif {
border: 1px solid black;
color:#000000;
font-size: 15px;
font-weight: bold;
line-height: 26px;
min-height: 26px;
padding:4px 7px 4px 7px;
background: #626262 url(../images/header_gray.gif) top left repeat-x;
}
.menu_actif {color:#FFFFFF;
background: #626262 url(../images/header_blue.gif) top left repeat-x; }
a.menu:hover { text-decoration:none;
background: #626262 url(../images/header_light_blue.gif) top left repeat-x; }
a.menu_actif:hover, a.s_menu_actif:hover, a.s_menu_t:hover { text-decoration:none; }
Exemple pour la couleur bleu
.s_menu_t, .menu_actif
{ background: #626262 url(../images/header_blue.gif) top left repeat-x; }
a.s_menu:hover, .s_menu_actif, .a.menu:hover
{ background: #626262 url(../images/header_light_blue.gif) top left repeat-x; }
.menu, .menu_actif, .s_menu , .s_menu_t
{ background: #626262 url(../images/header_gray.gif) top left repeat-x; }