Menú desplegable con jquery
Hola chicos, chicas.
Les traigo un script de un menú desplegable al estilo de bootstrap, que funciona al darle click al botón se despliega un sub-menú. En éste caso, es un menú en el tope de la página, si lo mueven me parece que tendrán que hacer modificaciones al CSS :3
Hoja de estilo: dropdown.css
jQuery: dropdown.js
HTML: index.html
Bueno, pruébenlo y edítenlo a su gusto :D
Les traigo un script de un menú desplegable al estilo de bootstrap, que funciona al darle click al botón se despliega un sub-menú. En éste caso, es un menú en el tope de la página, si lo mueven me parece que tendrán que hacer modificaciones al CSS :3
Hoja de estilo: dropdown.css
/* GENERAL */ * { margin:0; padding:0; list-style: none; } /* NAV-BAR */ .navbar { height:40px; background: #f6f6f6; color: #6b6b6b; border-bottom:1px solid #ebebeb; } .navbar a { color:#6b6b6b; text-decoration: none; } .navbar li { float: left; padding: 6px 10px; cursor:pointer; transition-duration: .5s; font-weight: 300; } .navbar > ul li:hover { color:black; } .navbar .dropdown-menu { width: auto; background: white; border:1px solid #ececec; color:#444; overflow: hidden; font-size: 0.8em; position: absolute; top:40px; display: none; } .navbar .dropdown-menu a { color:#666; } .navbar .dropdown-menu li { float: none; padding: 12px 18px; margin:0; min-width: 120px; } .navbar .dropdown-menu li:hover { background: #f7f7f7; } .navbar .dropdown-menu .divider { border-bottom: 1px solid #ececec; height: 0px; padding: 0; } .arrow { width:0px; height:0px; border-top: 5px solid #6b6b6b; border-right: 5px solid transparent; border-left: 5px solid transparent; position: relative; line-height: 1; display: inline-block; }
jQuery: dropdown.js
$(document).on("ready", function() { $('ul li:has(ul)').click(function(e) { $(".dropdown-menu").not($("ul", this)).slideUp("fast") .next() $(this).find('ul').slideToggle("fast") .end(); }); });
HTML: index.html
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Menú desplegable</title> <link rel="stylesheet" href="dropdown.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <nav class="navbar"> <ul> <a href="#"><li>Inicio</li></a> <a href="#"><li>Nosotros</li></a> <!-- MENU DESPLEGABLE 1 --> <a href="#" class="dropdown-toggle"> <li> Articulos <span class="arrow"></span> <ul class="dropdown-menu" role="menu"> <a href="<?php echo $urlWeb ?>/editor"><li>Crear</li></a> <a href="#"><li>Editar</li></a> <li class="divider"></li> <a href="#"><li>Gestionar</li></a> </ul> </li> </a> <!-- /// --> <!-- MENU DESPLEGABLE 2 --> <a href="#" class="dropdown-toggle"> <li> Portafolio <span class="arrow"></span> <ul class="dropdown-menu" role="menu"> <a href="#"><li>Portafolio 1</li></a> <li class="divider"></li> <a href="#"><li>Portafolio 2</li></a> </ul> </li> </a> <!-- /// --> </ul> </nav> <script src="dropdown.js"></script> </body> </html>
Bueno, pruébenlo y edítenlo a su gusto :D
Respuesta #1
esta bueno si señor vamos a dejar una demo: http://jsfiddle.net/datoweb/98ardecL/
0
Puntos
Puntos
Por alber hace 113 meses
Administrador
Respuesta #2
alber dijo:Gracias por el aporte de la demo. No había pensado en eso, jaja. :P
esta bueno si señor vamos a dejar una demo: http://jsfiddle.net/datoweb/98ardecL/