Menú con animación desplegable en jquery
En el siguiente ejemplo podemos ver un menú con animación desplegable usando jquery, las funciones utilizadas son slideDown y slideUp. Este tipo de menú también es conocido como menú con efecto persiana de jquery:
Captura:
Código de ejemplo, solo copia y pega:
Vía
Captura:
Código de ejemplo, solo copia y pega:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('ul li:has(ul)').hover(function(e) { $(this).find('ul').slideDown(); }, function(e) { $(this).find('ul').slideUp(); }); }); </script> <ul class="menu"> <li><a href="#">Inicio</a></li> <li><a href="#">Categorias</a> <ul> <li><a href="#">Categoria 1</a></li> <li><a href="#">Categoria 2</a></li> <li><a href="#">Categoria 3</a></li> </ul> </li> </ul> <style> ul.menu { float:left; display:block; margin-top: 18px; list-style-type:none; } .menu li { font-size:13px; position:relative; float:left; padding:10px; background:#09F; width: 100px; } .menu li a { color: #fff; text-decoration:none; } .menu li ul { display:none; position:absolute; top:36px; background-color: #f4f4f4; padding:0; list-style-type:none; } .menu li ul li { width: 200px; padding: 10px 20px; } .menu li ul li a { width: 240px; margin: 0; padding:0; } .menu li ul li a:hover { width: 240px; margin: 0; background:none; } </style>Demo
Vía
5
Puntos
Puntos
2119
Visitas
Visitas
0
Resp
Resp
Por alber hace 109 meses
Administrador