WebCssDesign

Menu background animé jQuery

• Accueil
• Ajax
• Menu background animé jQuery

• Tweet

• Tweet

Voici un petit tuto pour créer un menu avec un background animé effet style flash sur le principe des CSS Sprites mais avec un peu de javascript jQuery

La navigation est une des parties primordiales sur un site web autant q’un point esthétique qu’ergonomique.

Voici un tuto facile pour créer un menu style flash (sans ses inconvénients) avec animation du background sur le mouseover

Différents effets de transition sont disponibles dans les exemples ci-dessous.

HTML:
Une simple liste non-ordonnée de lien suffit

<ul id="a">
<li><a href="#">Accueil</a></li>
<li><a href="#">A propos</a></li>
<li><a href="#">Contact</a></li>
</ul>

Le CSS

ul {
	list-style:none;
	margin:0;
	padding:0;
}
li {
	float:left;
	width:100px;
	margin:0;
	padding:0;
	text-align:center;
}
li a {
	display:block;
	padding:5px 10px;
	height:100%;
	color:#FFF;
	text-decoration:none;
	border-right:1px solid #FFF;
}
li a {
	background:url(bg.jpg) repeat 0 0;
}
li a:hover {
	background-position:50px 0;
}

Les images nécessaires à l’exemple:

Le javascript:

on utilise jQuery ainsi que le plugin Background-Position.

<script type= »text/javascript » src= »jquery-1.2.6.min.js »></script>
<script type= »text/javascript » src= »jquery.bgpos.js »></script>

<script type= »text/javascript »>

$(function(){
$(‘#a a’)
.css( {backgroundPosition: « -20px 35px »} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition: »(-20px 94px) »}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition: »(40px 35px) »}, {duration:200, complete:function(){
$(this).css({backgroundPosition: « -20px 35px »})
}})
})
$(‘#b a’)
.css( {backgroundPosition: « 0 0″} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition: »(-150px 0) »}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition: »(-300px 0) »}, {duration:200, complete:function(){
$(this).css({backgroundPosition: « 0 0″})
}})
})
$(‘#c a’)
.css( {backgroundPosition: « 0 0″} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition: »(0 -250px) »}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition: »(0 0) »}, {duration:500})
})
$(‘#d a’)
.css( {backgroundPosition: « 0 0″} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition: »(0 -250px) »}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition: »(0 0) »}, {duration:500})
})
});
</script>

Un exemple sur cette page jQuery background menu animé
Démo à télécharger sur cette page (24 Ko .rar) jQuery-background.rar

D’autres exemples intéressants:

• Create a Cool Animated Navigation with CSS and jQuery [nettuts.com]
• CSS Sprites2 – It’s JavaScript Time [alistapart.com]
• Animated navigation items using jQuery [tyssendesign.com.au]
• Garage Door Style Menu [css-tricks.com]