Menú animado con jQuery

Por Blackned el Mar.09, 2010, en jQuery

Otro menú con animación de jQuery bastante simple pero elegante.

A continuación mostrare los pasos a seguir para construir este llamativo menú

Paso 1. Incluir las librerías necesarias para el funcionamiento del menú.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Smooth Animated jQuery Menu</title>

<link rel="stylesheet" href="animated-menu.css"/>

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="animated-menu.js" type="text/javascript"></script>
</head>

Paso 2. Crear la estructura del menú.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<body>
<p>Rollover a menu item to expand it.</p>
<ul>
<li class="green">
<p><a href="#">Home</a></p>
<p class="subtext">The front page</p>
</li>
<li class="yellow">
<p><a href="#">About</a></p>
<p class="subtext">More info</p>
</li>
<li class="red">
<p><a href="#">Contact</a></p>
<p class="subtext">Get in touch</p>
</li>
<li class="blue">
<p><a href="#">Submit</a></p>
<p class="subtext">Send us your stuff!</p>
</li>
<li class="purple">
<p><a href="#">Terms</a></p>
<p class="subtext">Legal things</p>
</li>
</ul>
</body>
</html>

Paso 3. Creación del CSS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

body{
font-family:"Lucida Grande", arial, sans-serif;
background:#F3F3F3;
}

ul{
margin:0;
padding:0;
}

li{
width:100px;
height:50px;
float:left;
color:#191919;
text-align:center;
overflow:hidden;
}

a{
color:#FFF;
text-decoration:none;
}

p{
padding:0px 5px;
}

.subtext{
padding-top:15px;
}

/*Menu Color Classes*/
.green{background:#6AA63B;}
.yellow{background:#FBC700;}
.red{background:#D52100;}
.purple{background:#5122B4;}
.blue{background:#0292C0;}

Paso 4. Crear la animación con jQuery.

1
2
3
4
5
6
7
8
9
10
11
12
13

$(document).ready(function(){

//When mouse rolls over
$("li").mouseover(function(){
$(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});

//When mouse is removed
$("li").mouseout(function(){
$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});

});

Aquí les dejo la demo de la animación.

Acá esta la descarga de los archivos con el menú listo.