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

7474
Visitas

2
Resp

Por jose hace 11 años

Master

Respuesta #1

esta bueno si señor vamos a dejar una demo: http://jsfiddle.net/Phpres/98ardecL/

0
Puntos

Por alber hace 11 años

Admin

Respuesta #2

alber dijo:
esta bueno si señor vamos a dejar una demo: http://jsfiddle.net/Phpres/98ardecL/

Gracias por el aporte de la demo. No había pensado en eso, jaja. :P

0
Puntos

Por jose hace 11 años

Master