PHPascal.com

PHPAscal rouge2 (Version bleu)


Fonctionnement du site Structures des fichiers Base de données Utilisation de gabarit et CSS
  PHPascal a 144 articles


Recherche


cheap nike nfl jerseysWholesale cheap nfl jerseyscheap jerseys online from chinacheap nfl jerseys free shippingwholesale nba jerseysWholesale cheap nhl jerseyscheap nhl jerseys onlinecheap nba basketball jerseys

Valid HTML 5

Fonctionnement du site / Utilisation de gabarit et CSS / CSS des menu

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.
Pour ce site j'ai utiliser des lien ordinaire avec une classe CSS (<a href=(...) class='menu'>Lien</a>)

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 :


#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; }



Par la suite j'ai différents CSS spécifique pour chaque couleur possible du site pour utiliser des images de background.

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; }
Article écrit le 4 octobre 2009
Article modifié le 4 octobre 2009

Autres articles sous la même catégorie


Pascal Dubreuil | © PHPascal.com 2017
Temps d'exécution : 0.0131 sec
Imprimer le 22 October 2017 - 09:28:06
par Pascal Dubreuil organisateur du Marathon de Laval