Nous allons voir aujourd’hui comment créer un menu en CSS3 avec une petite animation.
Bien évidemment vous devrez avoir un navigateur qui prend en compte les attributs du CSS3 sinon vous ne verrez pas les animations. Je vous laisse voir le rendu sur la démo ou bien télécharger les fichiers sources :

DémoFichiers sources

Le principe de ce menu animé entièrement en CSS3 est très simple. On ne se sert que de l’attribut transition du CSS3. On donne certaines valeurs aux balises a qui sont dans les li du menu. On donne ensuite d’autres valeurs au survol. Ainsi c’est l’attribut CSS3 transition qui se charge du reste.
On a un background en fondu qui part du transparent vers le #54B6A8.
On a un padding-left qui part de 4px vers 20px (ce qui crée ce décalage du mot au survol).
On a aussi une width qui passe de 230px à 130px.

Bien évidemment on précise les attributs transitions pour chaque navigateur le temps que le CSS3 soit validé pour tous les navigateurs avec seulement l’attribut “transition”. Le fait de mettre all .5s signifie que le background, la width et le padding-left vont passer d’un état à l’autre en une demi seconde.

    -moz-transition: all .5s; 
    -webkit-transition: all .5s; 
    -o-transition: all .5s; 
    transition: all .5s;

Voici le code HTML pour ceux qui ne veulent pas télécharger les fichiers sources :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Menu CSS3 - webdesignweb.fr</title>

<link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
</head>

<body>

	<div id="conteneur-menu2">
		<ul>
			<li><a href="#">Accueil</a></li>
			<li><a href="#">A propos</a></li>
			<li><a href="#">Projets</a></li>
			<li><a href="#">Parcours</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
		
	</div>
	
</body>
</html>

Le code css : 

@charset "UTF-8";
/* CSS Document */

body {
	margin: 0;
	padding: 0;
	font-family:'Abel', arial, serif; 
	text-transform: uppercase;
    background:#313131 url(../img/fond-menu.png) no-repeat top center;
}

#conteneur-menu2 {
	height: 150px;
	width: 220px;
	padding-top: 50px;
	margin: 290px auto 0px auto;
}

#conteneur-menu2 ul {
	padding: 0;
	margin: 0;
	margin-left: 50px;
	float: left;
}

#conteneur-menu2 ul li {
	list-style: none;
	padding: 0px;
}

#conteneur-menu2 ul li a {
	text-decoration: none;
	font-size: 25px;
	padding: 4px;
	display: block;
	color: white;
	background: transparent;
	width: 230px;
	-moz-transition: all .5s; 
    -webkit-transition: all .5s; 
    -o-transition: all .5s; 
    transition: all .5s;
    line-height: 20px;
}


#conteneur-menu2 ul li a:hover {
	background: #54B6A8;
	padding-left: 20px;
	width: 130px;
	-moz-transition: all .5s; 
    -webkit-transition: all .5s; 
    -o-transition: all .5s; 
    transition: all .5s;
}

Comme d’habitude, n’hésitez pas à me donner des retours ou à poser vos questions. J’espère que le menu vous plaira.