Les CSS un menu horizontal Nous créons deux dossiers un_niveau et multi_niveaux comprenant : style_div.css : contiendra toutes les informations relatives au positionnement de nos différents blocs. positionnement.php : contiendra tout notre code HTML. menu_horizontal.html: contiendra le menu. Les autres pages nous servirons à tester le fonctionnement
Les CSS un menu horizontal Commencons par le contenu du fichier un_niveau 1. Reprenons l'exemple de mise en page 2. Définissons tout d'abord les propriétés de base de nos blocs. Dans le fichier CSS style_div.css Nous allons centrer nos composants pour cela nous allons ajouter margin-right: auto; margin-left: auto; Ce qui va se transcrire dans notre fichier css par :
Les CSS un menu horizontal div#bandeau { width:600px; height:50px; margin-right: auto; /* Marge de droite du bandeau auto égale milieu de page */ margin-left: auto; /* Marge de gauche du bandeau auto égale milieu de page */ background-color:#00ccff; Nous ajoutons ce positionnement sur chaque bloc
Nous allons ajouter un bandeau menu div#menu { width:600px; height:22px; margin-right: auto;/* Marge de gauche du bandeau auto égale milieu de page */ margin-left: auto;/* Marge de gauche du bandeau auto égale milieu de page */ margin-top: -15px;/* On définit une marge en haut pour recouvrir le bandeau*/ background-color:#000000; font-family: Arial, Helvetica, sans-serif;/* On définit une police */ font-size:12px;/* On définit une taille de police */ color: #FFFFFF;/* On définit une couleur de police */ font-weight: bold;/* On définit une epaisseur de police */ text-align:center;/* On définit l'alignement du texte */ z-index: 11;/* On s'assure que le menu sera au-dessus des autres composants de la page */
Nous allons définir une couleur de fond et la taille des cases du niveau 1 #menu li { position: relative; float: left;/* positionné flottant à gauche*/ width: 85px;/* On définit une largeur pour chaque case de lien*/ height: 20px;/* On définit une hauteur pour chaque case de lien*/ background-color: #000000;/* On définit une couleur de fond pour chaque case de lien*/ list-style-type: none ;/* Suppression des puces */
Nous allons définir couleur du texte au passage de la souris #menu a:hover { color: #FFFF00;/* Couleur du texte*/ background-color: #3C3C3C;/* Couleur de fond de la fenetre */ border-bottom: none;/* epaisseur de la bordure et couleur*/
Nous allons définir les boites de chaque liens au clic de la souris #menu li a:active{ color: #000000;/* Couleur du texte*/ background-color: #FFFF00;/* Couleur de fond de la fenetre */ border: 1px solid #FF00FF;/* epaisseur de la bordure et couleur*/
Nous allons définir le texte et les caractéristiques des liens visités #menu a:hover { color: #FFFF00;/* Couleur du texte*/ background-color: #3C3C3C;/* Couleur de fond de la fenetre */ border-bottom: none;/* epaisseur de la bordure et couleur*/
Nous allons définir le texte et les caractéristiques des liens actifs #menu li a:active{ color: #000000;/* Couleur du texte*/ background-color: #FFFF00;/* Couleur de fond de la fenetre */ border: 1px solid #FF00FF;/* epaisseur de la bordure et couleur*/
Définissons le fichier positionnement.php Ce fichier n'a pas une extension en HTML mais en PHP car nous allons faire appel à une fonction PHP pour appeler le fichier commun menu_horizontal.html L'appel d'un language en PHP commence par <?php Et ce termine par?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="style_div.css"> <title>positionnement CSS</title> </head> <body> <div id="bandeau">ceci est le bandeau</div> <?php include ("menu_horizontal.html"); //Importe les menus?> <div id="contenu"> Ceci est le contenu de la page d'accueil </div> <div id="pied_page">ceci est le pied de page</div> </body> </html>
Définissons les fichier page1.php, page2.php etc. Ces fichiers seront identique à positionnement.php sauf le titre et le contenu <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html><head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="style_div.css"> <title>page1 CSS</title> </head> <body> <div id="bandeau">ceci est le bandeau</div> <?php include ("menu_horizontal.html"); //Importe les menus?> <div id="contenu"> Ceci est le contenu de la page 1 </div> <div id="pied_page">ceci est le pied de page</div> </body></html>
Définissons le fichier menu_horizontal.html L'idée ici va donc être de créer un fichier commun à toutes les page de notre site : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html><head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-15"> <div id="menu"> <ul class="niveau1"> <li><a href="positionnement.php">accueil</a></li> <li><a href="page1.php">un</a></li> <li><a href="page2.php">deux</a></li> <li><a href="page3.php">trois</a></li> <li><a href="page4.php">quatre</a></li> <li><a href="page5.php">cinq</a></li> </ul> </div></html> Ce fichier comprend tous les liens pour naviguer sur notre site
Voici le résultat :
Continuons par le contenu du fichier multi_niveau Nous allons ajouter dans le fichier CSS style_div.css On positionne les éléments du menu On cache tous les sous menu avec la propriété display none #menu ul ul { position: absolute; top: 0; width: 85px;/* On définit une largeur pour chaque case de lien*/ left: 99px; display:none
Position du niveau 2 par rapport au niveau 1 #menu ul.niveau2 { top: 21px;/* On définit un décalage pour l'affichage */ left: 0px;
Définition de la bordure du niveau 2 #menu ul ul { position: absolute; top: 0; width: 85px;/* On définit une largeur pour chaque case de lien*/ left: 99px; display:none
Définition de la position du niveau 3 par rapport au niveau 2 #menu ul.niveau3 { top: -1px;/* On définit un décalage pour l'affichage */ left:85px;
Définition du survol,avec la souris, les sous menu apparaissent grâce a display: block #menu ul.niveau1 li.sousmenu:hover ul.niveau2, #menu ul.niveau2 li.sousmenu:hover ul.niveau3 { display:block;
Continuons par le contenu du fichier menu_horizontal.html Nous utilisons la position menu3 pour illustrer l'utilisation de trois niveaux et la position menu 2 pour illustrer l'utilisation de deux niveaux <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html><head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-15"> <div id="menu"> <ul class="niveau1"> <li><a href="positionnement.php">accueil</a></li> <li class="sousmenu"><a>menu 3</a> <ul class="niveau2"> <li class="sousmenu"><a href="page1.php">page 1</a> <ul class="niveau3"> <li><a href="page2.php">page 2</a></li> <li><a href="#">3.2</a></li> <li><a href="#">3.3</a></li></ul> </ul> </li> suite page suivante
<li><a href="page2.php">deux</a></li> <li class="sousmenu"><a>menu 2</a> <ul class="niveau2"> <li><a href="page3.php">page 3</a></li> <li><a href="#">2.2</a></li> </ul></li> <li><a href="page4.php">quatre</a></li> <li><a href="page5.php">cinq</a></li> </ul> </div> </html>
Voici le résultat :