Salut à toi visiteur
Ce tutoriel est dédié à la création d'un menu horizontal pas à pas
Il seras séparé en plusieurs partie
I - Création de la baseCe tutoriel est dédié à la création d'un menu horizontal pas à pas
Il seras séparé en plusieurs partie
II - Donnez un style à votre menu
III - Un menu déroulant ?
IV - Un peu plus d'animation
Rappel : Ce tutoriel est en cours de création
I - Création de la base
La base ne seras que peu expliquer car elle est simple.
Du coté du html nommé index.html nous aurons :
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Un menu !</title>
</head>
<body>
<ul id="evaelis_menu">
<li>Accueil</li>
<li>Tutoriels</li>
<li>Astuces</li>
<li>Mon Compte</li>
</ul>
</body>
</html>
Nous aurons ensuite les éléments de ce menu : les "li".
Pour donner de la forme à tous ça, nous aurons ensuite le css nommé style.css :
Code:
#evaelis_menu {
padding: 0; margin: 0;
text-align: center;
}
ul#evaelis_menu li {
display : inline;
padding : 0 0.5em;
border: #000 solid thin;
list-style:none;
}
Cette feuille de style est elle aussi très simple : Un style pour donner une forme horizontale élément du menu : #evaelis_menu li
On lui ajoute ensuite des bordures avec la propriété border et un peu d'espace avec le padding.
#evaelis_menu sert quand à lui à centrer le tout.
Nous avons donc un menu qui ressemble à ça
II - Donnez un style à votre menu
HTML:
<ul id="evaelis_menu"><!--
--><li><a href="#">Accueil</a></li><!--
--><li><a href="#">Services</a></li><!--
--><li><a href="#">À propos</a></li><!--
--><li><a href="#">Contact</a></li>
</ul>
HTML:
<ul id="evaelis_menu"><li><a href="#">Accueil</a></li><li><a href="#">Services</a></li><li><a href="#">À propos</a></li><li><a href="#">Contact</a></li>
</ul>
Passons à la partie CSS :
Le code étant très long :
Code:
#evaelis_menu {
padding: 0;
margin: 2.5em 0;
text-align:center;
border: 1px solid #333;
border-top-color: #707070;
background-color: #5E5E5E;
background: -moz-linear-gradient(bottom , #666666 0pt, #5E5E5E 50%, #707070 51%, #808080 100%) repeat scroll 0 0 transparent;
background: -webkit-linear-gradient(bottom , #666666 0pt, #5E5E5E 50%, #707070 51%, #808080 100%) repeat scroll 0 0 transparent;
background: -ms-linear-gradient(bottom , #666666 0pt, #5E5E5E 50%, #707070 51%, #808080 100%) repeat scroll 0 0 transparent;
background: -o-linear-gradient(bottom , #666666 0pt, #5E5E5E 50%, #707070 51%, #808080 100%) repeat scroll 0 0 transparent;
background: linear-gradient(bottom , #666666 0pt, #5E5E5E 50%, #707070 51%, #808080 100%) repeat scroll 0 0 transparent;
text-align: center;
height: 36px;
-webkit-box-shadow: 0 1px 3px #999;
-moz-box-shadow: 0 1px 3px #999;
box-shadow: 0 1px 3px #999;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
#evaelis_menu a {
height: 36px;
padding: 0 35px;
line-height: 36px;
border-left: 1px solid #555;
border-right: 1px solid #888;
text-decoration: none;
color: white;
text-shadow: -1px -1px 0 #444;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 1em;
display:inline-block;
margin: 0;
}
#evaelis_menu li {
display: inline;
list-style: none;
}
#evaelis_menu :first-child a {
border-left: 0;
}
#evaelis_menu :last-child a {
border-right: 0;
}
#evaelis_menu a:hover,
#evaelis_menu a:focus {
background-color: #3E3E3E;
background: -moz-linear-gradient(bottom , #444444 0pt, #3E3E3E 50%, #505050 51%, #606060 100%) repeat scroll 0 0 transparent;
background: -webkit-linear-gradient(bottom , #444444 0pt, #3E3E3E 50%, #505050 51%, #606060 100%) repeat scroll 0 0 transparent;
background: -ms-linear-gradient(bottom , #444444 0pt, #3E3E3E 50%, #505050 51%, #606060 100%) repeat scroll 0 0 transparent;
background: -o-linear-gradient(bottom , #444444 0pt, #3E3E3E 50%, #505050 51%, #606060 100%) repeat scroll 0 0 transparent;
background: linear-gradient(bottom , #444444 0pt, #3E3E3E 50%, #505050 51%, #606060 100%) repeat scroll 0 0 transparent;
text-shadow: -1px -1px 0 #000;
}
On peux voir quelques parties de la base précédentes.
Quelques explications :
Les préfixes (ex : -moz-, -webkit-) servent à préciser sur quels navigateurs sont appliqués ces thèmes.
A savoir que certains préfixes englobe plusieurs navigateurs.
Screen avec le thème :
La suite des explications à venir
III - Un menu déroulant ?
Vous pouvez suivre le tutoriel posté par l'utilisateur [P]ingouin à l'adresse suivante : Cliquez ici !IV - Un peu plus d'animation
Ici on utiliseras les transitions (CSS3).
Last edited: