Menú accordeón con efectos de rebote
En este artículo vamos a mencionar un script jQuery, CSS y HTML que presenta un menú accordeon con efectos de rebote que se puede emplear para las columnas izquierda o derecha de tu página Web.
Para disfrutar de este menú, lo primero que deberemos hacer es incluir en el <head> los estilos y scripts necesarios.
<link rel="stylesheet" type="text/css" href="demo.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript" src="script.js"></script>
En el <body> podemos construir el menú con código HTML de la siguiente forma:
<ul>
<li>
<ul>
<li><a href="#">Kiwis <span></span></a></li>
<li>
<ul>
<li><a href="#" onclick="$('.button a').eq(2).click();return false;">Open Grapes Section</a></li>
<li><a href="#" onclick="$('.dropdown').slideUp('slow');return false;">Close This Section</a></li>
<li><a href="http://en.wikipedia.org/wiki/Kiwifruit">Read on Wikipedia</a></li>
<li><a href="http://www.flickr.com/search/?w=all&q=kiwi&m=text">Flickr Stream</a></li>
</ul>
</li>
</ul>
</li>
</ul>
Si nos fijamos en las etiquetas a href vemos que lleva el evento onclick que al pulsar se ejecuta ese código jQuery que hay dentro.
Los fondos de las cabeceras son imágenes.
Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
¿Buscas trabajo de programador?
2 respuestas a “Menú accordeón con efectos de rebote”
Deja una respuesta
38 artículos que te podrían interesar
Ver más sobre
… [Trackback]…
[…] Read More: jose-aguilar.com/blog/menu-acordeon-efecto-rebote/ […]…
Some really fantastic articles on this website , regards for contribution.