Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

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
/* 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
5
Puntos
5509
Visitas
2
Resp
Por Jose hace 58 meses
Experto Sitio web
Respuesta #1
esta bueno si señor vamos a dejar una demo: http://jsfiddle.net/datoweb/98ardecL/
0
Puntos
Por alber hace 58 meses
Administrador
Respuesta #2
alber dijo:
esta bueno si señor vamos a dejar una demo: http://jsfiddle.net/datoweb/98ardecL/
Gracias por el aporte de la demo. No había pensado en eso, jaja. :P
0
Puntos
Por Jose hace 58 meses
Experto Sitio web
Compartir en facebook
Compartir en twitter
Compartir
Para comentar Inicia sesión o Registrate