[HTML/CSS] Vers le webdesign : Le menu horizontal

  • Comme vous le savez le discord n'est malheureusement plus disponible, voici donc le nouveau moyen de communication à travers CG3 : Matrix Pour plus d'informations sur la fermeture du discord : Fermeture du discord.

Evaelis

La Voix de la Sagesse
Administrateur
Marchand
28 Avr. 2010
23,014
463
1,699
Valhalla
Salut à toi visiteur :hap:
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 base
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 donc une base de menu avec le tag ul et le style #evaelis_menu.
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
La base est très similaire à celle d'avant, on ajoute juste des liens.
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>
Les <!-- --> sont OBLIGATOIRES à moins que vous ne mettiez tout les éléments à la suite :
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).
 
Dernière édition:

Synioa

Membre reconnu
3 Déc. 2012
1,201
1
243
Dans la première partit
PHP:
<ul id="evaelis_menu">
<li>Accueil</li>
<li>Tutoriels</li>
<li>Astuces</li>
<li>Mon Compte</li>
</ul>
Il manque <a href="#"> </a> sinon le menu ne sert a pas grand choses.