Créer un menu Horizontal en Css
Date de publication : 28 février 2008Par : noc
Salut les hus, me revoila dans ce nouveau tuto consacré au développement web.
Nous allons réaliser dans ce qui va suivre un menu horizontal en CSS,pour cela, et avant d’attaquer la partie CSS, nous allons créer notre fichier HTML.
PARTIE HTML :
On appellera ce fichier menu.html :
<html>
<head>
<title>Mon menu horizontal avec hustoo</title>
</head>
<body>
<ul>
<li><a href=”#”>Element 1</a></li>
<li><a href=”#”>Element 2</a></li>
<li><a href=”#”>Element 3</a></li>
<li><a href=”#”>Element 4</a></li></ul>
</body>
</html>
voir résultat.
Ce qu’on viens de faire là est très simple, on a crée une liste d’élément de notre menu avec <ul> et <li> et le lien <a> c’est pour rendre les éléments du menu cliquables .
PARTIE CSS :
Entre <head> et </head> vous allez mettre votre code Css:
<style type=”text/css“>
ul{ list-style-type:none; margin:0; padding:0;}
/* on enlève les puce de la liste , et on définie les marges externes et internes à 0*/
li{ margin:0;padding:0; display:inline;}
/* marges externes et internes à 0 et on affiche en une seule ligne les éléments de la liste avec “display inline“*/
a{ background-color:green; text-decoration:none; color:#FFFFFF; padding:5px}
/*arrière plan des lien à l’état normal en vert, on enlève le soulignement avec text-decoroation:none; la couleur du lien en blanc; et les marges internes a 5px pour avoir un peut d’espacement(pour que le texte ne soit pas collé aux bords)*/
a:hover{background:black;}
/* le lien à l’état survolé; on change la couleur de l’arrière plan en noir*/
</style>
et voici un petit exemple de ce qu’on peut faire comme menu ,que j’ai fait spécialement pour vous 
Enjoy.
www.hustoo.net
3 mars 2008 à 20:43
thx noc for this amazing tuto !!
5 mars 2008 à 9:38
bonjour j’aimerais faire un menu DHTML , vous pouvez m’aider en me donnant les étapes sachant que j’ai aucune connaissance en javascript, merci
5 mars 2008 à 17:20
@ lamia,
salut, oui j’essayerai de faire un tuto sur ça!et je donnerai les différentes étapes , toute fois il est préférable d’utiliser les css pour ce genre de menu, sauf si on t’as demandé de le faire de cette façon.
9 avril 2008 à 20:50
oui oui noc tu sais tout
10 avril 2008 à 20:23
qui est-ce qui a dit ça?
15 juin 2008 à 3:32
[...] nous l’avons déjà vu avec le menu horizontal , un menu est constitué de deux parties , une partie html et une autre [...]