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.

45 comments
L0re
L0re

Bonjour ! Tout d'abord, bravo pour ton site ! De super bonnes idées, ça aide beaucoup, et très bien fait, ça donne envie ! Mais voilà j'aurais une petite question ... Je débute seulement HTLM, CSS, ... Et là je vois que pour ta balise tu utilises "#", dans ce cas où ajoute tu le liens pour aller à la page projets ou à la page contacts par exemple ?

karl
karl

bonjour, merci pour le tuto très intéressant. est il possible de changer la couleur du mot lors du passage. J'ai un fond blanc et une police en bleu et effet bleu du coup mon mot ne se voit plus lors du passage. Merci

admin
admin

Merci beaucoup :)

admin
admin

Bonjour, as tu essayer de mettre un attribut color: white sur #conteneur-menu2 ul li a:hover ?

karl
karl

bravo, et merci tu fais du super taf

Florian
Florian

Bonjour, avant tout merci pour ce super menu!! J'ai tenter de le modifier à ma convenance mais sans succès. J'ai déjà placé le menu de façon horizontal et non vertical en haut du site. Et maintenant j'aimerais que l'animation ce fasse de haut en bas et non de gauche à droite mais je n'y arrive pas. Merci de votre aide. Florian

admin
admin

Bonjour Florian, As-tu essayer de travailler sur la height, padding-top, et line-height ? Stratis

Florian
Florian

Merci, Ca fonctionne en touchant au height :) Encore merci, Florian

Florent Brandani
Florent Brandani

Hello, Tout d'abords, bravo pour ce menu, très esthétique. Et sinon, j'avais une question (je débute complètement dans l'HTML et CSS). Comment faire pour que l'animation ne vienne pas de la droite mais des deux côtés? En imaginant que le menu se situe au centre de la page, lorsque que l'on va sur le lien, l'animation part de la gauche et de la droite pour rejoindre le lien au centre. Merci d'avance Florent

admin
admin

Bonjour, Avez-vous essayé de travailler sur un text-align:right ? ou des position: absolute en fixant la droite ? Stratis

Tim
Tim

Même question que Florent, mais pour une anim allant de gauche -------> droite ! L'anim d'un width semble se faire nécessairement de droite à gauche... peut-on contourner ça? :) Thanks! Beau boulot sinon!

Valence Guillaume
Valence Guillaume

Bonjour, J'adore les designs présentés sur ce site. Etant un grand débutant, j'ai été incapable de reproduire le menu présenté sur cette page : - je ne sais pas où rentrer les codes (functions.php? style.css? directement dans le code HTML de la page concernée?) - je ne sais pas s'il y a des ajustements à faire par rapport au code présenté. - si je télécharge les fichiers sources, que dois-je en faire ensuite? Désolé de poser des questions si basiques, mais je commence tout juste à m'intéresser au webdesign et n'ai aucune formation en la matière... Bien cordialement, Guillaume

admin
admin

Bonjour, je te conseillerai de passer par une mini formation html css sur le site du zero par exemple :)

Reda
Reda

Bonne année a tout le monde, je veux juste savoir comment modifier le CSS pour avoir un menu a gauche en haut en colonne...! je vous remerci beaucoup d’avance, vous avez un très bon site et des super tuto.

Hapii
Hapii

Salut à toi et merci pour tes partages! Tes codes sont tellement propres que même en y connaissant quasiment rien, j'arrive a bidouiller sans problèmes! J'ai une question pour ce menu, je l'ai un peu modifié, mais il y à une chose que j'arrive pas a faire: J'aimerais que la taille des blocks s'adaptent à la taille du texte.. Voici un exemple qui illustre ce que j'essaye d'expliquer: http://laczadesign.com/ Merci!

admin
admin

Coucou merci pour ton commentaire Pour ce que tu veux faire il faut que tu mettes un background sur les balises a au lieu de transparent. Sinon il ne faut pas avoir de width mais plutot un padding: 5px 20px et au survol tu changes le padding-left a 50px exemple :)

Kys
Kys

Bonjour, J'aime beaucoup ce menu que tu proposes d'autant plus que je ne l'ai vu que sur ton sie. Je l'ai donc installé sur mon site (actuellement en construction) : www.redeyes.eu Cependant je voulais savoir s'il était possible d'ajouter un sub menu qui apparaîtrait soit à droite , soit à gauche du menu que tu proposes. Ceci permettrait d'avoir un menu global et un détail. Merci par avance pour ton complément d'information ;)

admin
admin

Alors je pense que tu devrais mettre une sous liste [code] <ul class="menu"> <li><a href="">item 1</a></li> <li> <a href="">item 2</a> <ul class="sub"> <li><a href="">ss item 2</a></li> </ul> </li> </ul> et dans le css ton ul.sub { position: absolute: top: la valeur souhaitée, left: la valeur souhaitée} et ton ul.menu {position relative} [/code] Voilà a peu près ce que tu dois faire ;)

Zany
Zany

Hello! Merci beaucoup pour ce blog hyper intéressant! J'ai juste une mini question: j'aimerai que la transition se fasse sur la verticale et non à l'horizontale. Quel est la solution à mon problème? Merci d'avance et bonne journée AB

admin
admin

tout d'abord merci pour ton commentaire. et sinon qu'entends tu par "sur la verticale"?

Zany
Zany

Hello, En fait j'aimerai que l'onglet sélectionné monte et le texte avec, plutôt qu'il s'allonge sur la droite, ou la gauche. J'ai essayé quelques trucs mais il y a à chaque fois un décalage en bas de l'onglet par rapport au reste de mon menu. Et ça ne fait pas très joli! Merci d'avance AB

admin
admin

Salut, le problème c'est que le décalage se fait par le bas forcément en jouant sur le padding-bottom, le point d'ancrage étant en haut. A +

Nicola's
Nicola's

Salut, super ce menu CSS3, j'ai une question serait-il possible de mettre l'animation dans l'autre sens ? en alignant le texte sur la droite le rendu n'est pas pareil. Merci

admin
admin

Bonjour, tout d'abord merci pour ton commentaire. Pour avoir le même menu aligné à droite il suffit de changer ces règles : [code] #conteneur-menu2 ul { text-align:right; /* à rajouter */ } #conteneur-menu2 ul li { float:right; /* à rajouter */ } #conteneur-menu2 ul li a:hover { padding-right: 20px; /* au lieu de padding-left */ } [/code] voilà tout :) bonne journée

medesko
medesko

very fantastic job thank u

Hans
Hans

Mon site est encore en construction. Bonjour, je me permet de faire un petit commentaire pour le menu vraiment top absolument rien a dire. Juste une question voila actuellement je conçois un blog qui recensera les moyens de faire de l'argent sur le net et je voudrais intégrer ton menu juste en dessous du logo à l'horizontale. Pourrais tu m'indiquer les fichiers du thème à modifier sur wordpress ? Merci par avance

admin
admin

Tout d'abord merci pour ton commentaire Une fois ton menu créé avec wordpress tu pourras seulement jouer avec les CSS :)

Laetitia
Laetitia

Mercii beaucoup pour ta réponse si rapide :)) Je peux me permettre de t'embêter encore un peu ? :/ En fait j'aimerais mettre le menu, non pas à gauche, mais en haut à droite comme un menu classique, mais je n'y arrive pas. J'ai beau essayé de changer le padding, les marges etc, il m'est impossible de mettre "accueil a propos projets etc" Merci beaucoup et excuse moi du dérangement !

admin
admin

Merci à toi :)

Martin
Martin

Merci beaucoup ça marche ! Bonne continuation ;)

admin
admin

Si tu veux que tout soit en ligne tu peux ajouter un display:inline comme ceci : #conteneur-menu2 ul li { list-style: none; padding: 0px; margin-bottom: 20px; disply:inline; } Ne t'inquietes pas aucun dérangement ;)

Laetitia
Laetitia

D'accord, merci beaucoup en tout cas, tous tes conseils m'ont été très précieux :) Je vais conseiller vivement ton site à mon entourage ! Bonne continuation :D

Martin
Martin

Bonjour tout d'abord super tuto ! Mais j'ai fais ( pour mettre le menu en ligne ) : #conteneur-menu2 ul li { list-style: none; padding: 0px; margin-bottom: 20px; disply:inline; } Et pourtant le menu ne s'affiche pas en ligne , il reste en colone , pourrais tu être plus précis s'il te plaît ? Ou alors m'envoyer en pièce jointe le fichier modifié ? Merci d'avance !

admin
admin

Bonjour et merci tu dois enlever le display:block de [code]#conteneur-menu2 ul li a [/code] c'est à dire [code] #conteneur-menu2 { width: 960px;/* on grandit la taille pour le rentrer en inline */ padding-top: 50px; margin: 290px auto 0px auto; } #conteneur-menu2 ul li { list-style: none; padding: 0px; margin-bottom: 20px; display:inline; } #conteneur-menu2 ul li a { text-decoration: none; font-size: 25px; padding: 4px; display: block; /* tu retires cette ligne */ color: white; background: transparent; width: 230px; -moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; line-height: 20px; } [/code]

Laetitia
Laetitia

Bonjour ! Ton site est vraiment génial! Enfin un site bien fait, avec des tutos complets et super !!!! J'aurais juste une question (ça peut paraître bête, mais je suis novice en html :$) mais comment faire pour que "accueil", "a propos" etc soient plus espacés ? j'ai essayé "word-spacing" mais ca ne change rien .. Je vais continuer de chercher quand même :) Merci beaucoup d'avance :)

admin
admin

Et bien entendu tu mets la valeur de margin-bottom qui te va le mieux ;)

admin
admin

Tout d'abord merci beaucoup pour ton commentaire ça me fait vraiment plaisir.. Si tu veux que les éléments soient plus espacés entre eux tu devras faire #conteneur-menu2 ul li { list-style: none; padding: 0px; margin-bottom: 20px; }

Mariemma
Mariemma

Waaah ! Alors déjà, félicitation pour ce site que je viens de découvrir et que je trouve top :-) et puis merci pour ce menu vraiment bien fait !

admin
admin

Merci beaucoup pour ton commentaire. Ça me fait plaisir de voir que le blog est de plus en plus visité et que ça vous plait. Bonne continuation et a bientot

Burillon sami
Burillon sami

Les transitions en CSS3 sont très récente et malheureusement ne sont pas encore supporté par trident (Moteur de rendu de IE) et à mon avis n'est pas prêt d'y être. Ceci dit Gecko et WebCore (Même KHTML) respect bien ces normes CSS3, mais étend donné que la plupart des utilisateurs Internet utilisent Internet Explorer, les animations CSS3 ne sont pas encore bon pour le développement Web. Mais c'est quand même son futur. Sinon, bravo à toi pour l'esthétique de ce menu !

admin
admin

Merci beaucoup... En plus comme je le dis souvent le fait de mettre du CSS3 dans des pages ne gêne en rien sur les navigateurs qui ne le prennent pas en compte ;) et c'est un + pour ceux qui sont au gout du jour :)

admin
admin

Thanks a lot... it's a pleasure :)