Acabo de publicar Regala Google Chrome por navidad |

Menu animado jQuery

By Miguel Ángel Jiménez Achinte On 18:01

DemoEste es un menu hecho con listas y con un efecto hover muy atractivo y singular. Para hacer uno como este necesitamos adjunatr a nuestra plantilla o pagina web la libreria jQuery y el segmento de javascript que nos genere el efecto animado. Ademas de esto son necesarias las imagenes que nos servirán de fondo en cada enlace. Dado que serian muchas, puesto que hay que tener en cuenta dos imagenes por enlace(una cuando el puntero del mouse no esté sobre el enlace y otra cuando si lo esté), vamos a usar un sprite y un fondo para el menu.




Descarga el archivo javascript jQuery desde aqui

Codigo css


/* Menu Body */
ul#menu {
width:100%;
height:122px;
background:url(http://img10.imageshack.us/img10/3126/68018218.png) repeat-x; /* url del bg */
list-style:none;
margin:0;
padding:0;
padding-top:20px;
}
/* Menu Body */
/* Float LI Elements - horizontal display */
ul#menu li {
float:left;
}

/* Link - common attributes */
ul#menu li a {
background:url(http://img14.imageshack.us/img14/808/spritepmu.png) no-repeat scroll top left; /* url del sprite */
display:block;
height:81px;
position:relative;
}

/* Specify width and background position attributes specifically for the class: "inicio" */
ul#menu li a.inicio {
width:159px;
}

/* Specify width and background position attributes specifically for the class: "mantenimiento" */
ul#menu li a.mantenimiento {
width:157px;
background-position:-159px 0px;
}
/* Specify width and background position attributes specifically for the class: "redes" */
ul#menu li a.redes {
width:157px;
background-position:-316px 0px;
}

/* Specify width and background position attributes specifically for the class: "portfolio" */
ul#menu li a.portafolio {
width:157px;
background-position:-477px 0px;
}
/* Span (on hover) - common attributes */
ul#menu li a span {
background:url(http://img14.imageshack.us/img14/808/spritepmu.png) no-repeat scroll bottom left;/* url del sprite */
display:block;
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:100;
}

/* Span (on hover) - display pointer */
ul#menu li a span:hover {
cursor:pointer;
}

/* Shift background position on hover for the class: "inicio" */
ul#menu li a.inicio span {
background-position:0px -81px;
}

/* Shift background position on hover for the class: "mantenimiento" */
ul#menu li a.mantenimiento span {
background-position:-159px -81px;
}
/* Shift background position on hover for the class: "redes" */
ul#menu li a.redes span {
background-position:-316px -81px;
}

/* Shift background position on hover for the class: "portfolio" */
ul#menu li a.portafolio span {
background-position:-477px -81px;
}


codigo javascript


<!-- Include jQuery Library -->
<script src="jquery.js" type="text/javascript"></script>

<!-- Let's do the animation -->
<script type="text/javascript">
$(function() {
// set opacity to nill on page load
$("ul#menu span").css("opacity","0");
// on mouse over
$("ul#menu span").hover(function () {
// animate opacity to full
$(this).stop().animate({
opacity: 1
}, 'slow');
},
// on mouse out
function () {
// animate opacity to nill
$(this).stop().animate({
opacity: 0
}, 'slow');
});
});
</script>


Codigo HTML


<ul id="menu">
<li><a href="#" class="inicio"><span></span></a></li>
<li><a href="#" class="mantenimiento"><span></span></a></li>
<li><a href="#" class="redes"><span></span></a></li>
<li><a href="#" class="portafolio"><span></span></a></li>
</ul>


Enlaces a modificar

http://img10.imageshack.us/img10/3126/68018218.png aloja la imagen bg.png en un servidor y cambia la url

http://img14.imageshack.us/img14/808/spritepmu.png has tu propio sprite, alojalo y cambia la url

Para hacer tu propio sprite sin complicaciones te recomiendo visitar la pagina css sprite generator.

jquery.js- descarga el archivo javascript, alojalo en un servidor y cambia la url


Demo Download Source Download Psd





8 comentarios

  1. No lo puedo creer, es un error...
    lo arreglaré cuando llegue a casa, si no me avisas no me doy cuenta ;(

    Gracias :)

    Posted on 8/22/2009 2:05 p. m.

     
  2. Felicidad, }EXCELNTE DISEÑO e interactividad mas de lo que uno espera de nuevo FELICIDADES y gracias por no escatimar

    Posted on 12/06/2009 10:44 p. m.

     
  3. Muchas gracias Jonathan, me alegra que te guste el contenido del blog :)

    Posted on 12/07/2009 4:47 p. m.

     

Publicar un comentario en la entrada al viejo estilo