32
Créer un menu full CSS horizontal.
Voici une méthode pour créer un menu full CSS horizontal. Tout tient dans le style d’une liste appliqué grâce à CSS mais le résultat est vraiment sympa. Bien dans le style web 2.0.
Pour voir le résultat final de ce menu rendez vous sur cette page : http://www.wks.fr/tutorial_help/tutorial_301/wks_tutorial_css_1.html
Allez c’est partit.
ETAPE 1
Je crée un nouveau fichier HTML avec les éléments de base html.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250" />
<title>WonkaStudio : tutorial CSS : construction d’un menu horizontal</title>
<style type="text/css">
ICI JE VAIS PLACER MON CODE CSS
</style>
</head>
<body>
ICI JE VAIS PLACER MON CODE HTML
</body>
</html>
ETAPE 2
Je vais commencer par créer ma liste en HTML, je vais pour cela utiliser les balises ul et li pour les différents boutons.
Voici le code HTML correspondant à la liste :
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Produits</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Références</a></li>
<li><a href="#">Contacter nous</a></li>
<li><a href="#">Partenaires</a></li>
</ul>
ETAPE 3
Je vais maintenant créer une classe en css qui va me permettre de styliser mon menu, cela va s’articuler en deux étapes :
- 1 Création du code CSS en haut de page
- 2 Application de cette classe dans la balise ul par un class=
1 Je vais simplement créer la structure de ma classe :
.menu { }
2 J’applique cette classe sur la balise ul qui devient
<ul class="menu">
ETAPE 4
En ajoutant list-style:none ; à ma classe menu je supprime les puces de ma liste. En spécifiant li juste après menu (dans le css) j’applique les styles aux seules balises li contenues dans la classe menu.
Ainsi dans le code css j’ajoute :
.menu li { float :left ; }
Le float left me permet d’afficher mes liens sur une seule à même ligne ! Pratique pour créer un menu horizontal !
ETAPE 5
Je vais maintenant donner une couleur de fond à mon menu, pour cela je passe par la propriété background-color.
Dans mon css je modifie la classe menu, j’ajoute également la largeur et la hauteur pour créer le fond global de mon menu.
.menu { list-style:none; background-color:#4c4c4c; width:100%; height:45px; }
ETAPE 6
Vous aurez surement remarqué sur la gauche une bordure blanche, pas de panique il suffit d’ajoute le margin égal à 0 dans la classe menu.
.menu { list-style:none; background-color:#4c4c4c; width:100%; height:45px; margin:0px; }
ETAPE 7
Je vais maintenant ajouter une nouvelle classe pour styliser les balises a (les liens).
.menu li a {
display:block;
line-height:45px;
color:#fff;
font-size:13px;
font-weight:bold;
text-decoration:none;
font-family:arial, verdana, sans-serif;
text-align:center;
padding:0 20px 0 20px;
cursor:pointer;
}
ETAPE 8
Je vais maintenant ajouter la bordure du haut. Pour cela j’ajoute simplement une bordure top dans la classe menu.
.menu {
list-style:none;
border-top:#65bb01 solid 5px;
background-color:#4c4c4c;
width:100%; height:45px;
margin:0px;
}
ETAPE 9
Je vais ajouter un etat hover à mes liens, c’est en fait le changement du lien au passage de la souris, en css il suffit d’ajouter hover à la suite de a dans la classe menu li.
Aisni il me suffit d’ajouter une nouvelle classe pour ajouter le hover aux liens.
.menu li a:hover {
background-color:#636363;
}
J’en profite pour modifier ma classe menu li a pour l’adapter à mon état hover.
.menu li a {
display:block;
color:#fff;
font-size:13px;
font-weight:bold;
text-decoration:none;
font-family:arial, verdana, sans-serif;
text-align:center;
margin-top:8px;
padding:6px 10px 6px 10px;
border-right: 10px solid # 4c4c4c;
border-left: 10px solid # 4c4c4c;
cursor:pointer;
}
ETAPE 10
Je vais ajouter maintenant un état current qui correspond à l’onglet actif de navigation.
Cette étape ce divise en deux parties :
Création d’une nouvelle classe current Ajout de cette classe dans la balise de mon choix.
.menu li.current a {
background-color:#65bb01;
}
Et dans ma liste j’ajoute une classe égal à current
<li class="current"><a href="#">Services</a></li>
ETAPE 11
Voila mon menu est terminé, cependant je remarque une chose, c’est que tout autour de mon menu une bordure blanche persiste ! Je vais la supprimer simplement en ajoutant une classe générale body.
body {
background-color:#fff;
margin:0;
padding:0;
}
ETAPE 12
Et voila mon menu full CSS est terminé, efficace car il ne surchargera pas votre serveur car il n’y a aucune image graphique et le style est au rendez vous 
Bien entendu vous pouvez ajouter des onglets et ajouter des lignes li et en modifiant le libellé et l’url ! Tout est automatique ensuite !
Bonne chance pour la création de votre menu.
Article publié par Wonka
Vous aimez cet article? Partagez le !
Je suis très humblement le webmaster et le créateur de ce site, vous êtes en ce moment sur ma fiche membre, vous avez la possibilité de m’’envoyer des messages, pour toutes questions n’hésitez pas une seule seconde !
La galerie des membres
Voici les images déjà publiées par les membres de ce site, merci à vous pour votre créativité !
Questions et commentaires, Il y a 19 messages de forum.
Vous avez besoin d’eclaircicemment sur un points évoqués dans cette leçon, dans ce cas laissez votre question en utilisant le formulaire ci dessous, notre équipe vous apportera rapidement un complètement d’information. Merci d’être le plus précis possible lors de la rédaction de votre demande.
-
11 avril 2008 18:22, par Toto
Bon tuto.
Cependant tu aurais du préciser que tu peut aussi utiliser un fichier CSS externe à la page HTML !
Répondre
-
12 avril 2008 09:18, par Toinousp
SUPER TUTO !!!!!!! vraiment bien
Répondre rien a redire a part peut-être comme le dit toto... moi je trouve que faire le code css en externe c’est plus « propre »... mais bon c’est une question de goût -
12 avril 2008 09:45
Effectivement tu peux placer le code CSS dans un fichier externe et l’appeler dans la page, mais moi au niveau de l’archivage ca ne m’arrange pas trop. Je préfére placer le tout dans un seul et même fichier
Et le but c’est de comprendre la technique, après vous faite comme vous voulez
Merci en tout cas pour vos deux messages !
Répondre
-
-
26 avril 2008 17:16, par Toinousp
Une petite bonne nouvelle
Répondre je vient d’essayer ce menu sur mon site (que je suis en train de coder) et je le trouve vraiment super 
donc il sera sur mon futur site ^^
ce menu est vraiment style et assez simple a faire donc que du bonheur
Encore un grand merci a ... WONKA ...
;)-
27 avril 2008 13:54, par Wonka
Merci pour ce message
Répondre ca me rassure quand au fait que mes tutos CSS sont compréhensibles je vais m’atteler à la tache pour en faire d’autres !
-
-
29 avril 2008 19:35, par ouf
polalala ! les tutos de ce site sont vraiment geniaux moi je les adore ! encore merci wonka
Répondre -
21 juin 2008 01:11, par notorious
Bon travaille jessais quelque truc jaimerai bien savoir si sa serai posible de faire un rollover sur les bouton question qui change de coulleur aux pasage de la souri
Répondre-
7 juillet 2008 20:20, par anonymous
Vraiment très bon tuto’
Utile, bien détaillé, rendu très beau. Bien joué !
Répondre -
3 août 2008 23:26, par giemmebé
tu peux faire ça en mettant une couleur de fond dans le style de .menu li a avec un background-color, par exemple : .menu li a background-color :red ;
Vraiment simple ce tuto !
Répondre
-
-
5 novembre 2008 03:55, par mbuglet
Très bon tuto, simple et clair !
Attention toutefois à la mise en page pour l’étape 9 :
border-right : 10px solid # 4c4c4c ; border-left : 10px solid # 4c4c4c ;
Bien faire attention et supprimer l’espace :
border-right : 10px solid #4c4c4c ; border-left : 10px solid #4c4c4c ;
Dans le cas contraire, tous vos menus restent coller sans espace.
Bravo encore !
Répondre -
26 octobre 2009 10:54, par chrysam
bonjour, je suis débutant et aurai aimé savoir si l’onglet en cours de visite pouvais avoir une autre couleur
Répondre -
26 février 2010 16:51, par SamTouch
Je suis vraiment content de ce tuto et de ce site formidable qui nous apprendre à peu prés tout sur le graphisme et le webdesign. wonka que Dieu te bénisse. Je vais parler de ce site à mes amis, ils vont adorer
Répondre -
25 mars 2011 13:22, par Chris
bonjour, j’aurai voulu savoir comment aligner les liens aux milieu de la page ? merci
Répondre -
4 avril 2011 20:08, par GabeCity
Bonjour,
Merci pour cet excellent tuto. J’ai juste une question : Y a t’il une possibilité que le « current » s’adapte à la page active ? Merci d’avance, Philippe
Répondre -
9 avril 2011 00:25, par loolli
Tuto super simple à comprendre pour un débutant
Répondre Cependant j’aimerais savoir s’il est possible que ce menu sois déroulant ? si oui quels codes dois-je utiliser ?
Merci d’avance
