Menú superior desplegable con jQuery

Las ventajas de un menú superior desplegable es que nos permite ofrecerle al usuario una serie de accesos directos a los enlaces más importante de nuestra web de forma que no estén continuamente en pantalla si no que solo se desplieguen cuando el usuario desee.

Para hacer este menú hemos utilizado la librería jQuery, para conseguir ese efecto. Para aplicarlo en nuestra web tenemos que incluir el código Javascript y la llamada a la librería entre las etiquetas <head></head> de la siguiente forma:

[COPIAR]

Código PHP (Copiar):

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>

El código html quedaría de la siguiente forma:

[COPIAR]

Código HTML (Copiar):

<div id="panel">
<ul class="list">
<li><a href="#">Inicio</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Portafolio</a></li>
<li><a href="#">Sobre...</a></li>
<li><a href="#">Ayuda</a></li>
<li class="buscar"><input value="Buscar" /></li>
</ul>
<div class="clear"></div>
</div>
<p class="slide"><a href="#" class="btn-slide">Menú</a></p>

Y por último necesitamos darle estilo mediante CSS quedando de la siguiente forma:

[COPIAR]

Código CSS (Copiar):

#panel {
background: #CCC093;
height: 50px;
display: none;
}
.slide {
margin: 0;
padding: 0 0 0 5px;
border-top: solid 4px #825948;
height: 40px;
}
.btn-slide {
float: left;
background: #825948 url(white-arrow.gif) no-repeat right -50px;
text-align: center;
width: 144px;
height: 31px;
padding: 10px 10px 0 0;
margin: 0 auto;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
.active {
background-position: right 12px;
}
ul.list {margin: 0px; padding: 16px 0px 0px 10px; list-style: none;}
ul.list li {float: left; width: auto;}
ul.list a {text-decoration: none; background: #453027; margin: 5px; padding: 4px;}
ul.list a:hover {text-decoration: none; background: #825948;}
ul.list li.buscar {float: right; margin-right: 5px;}
ul.list li.buscar input {background-color: #453027; border: 0px; color: #CCC093; font-size: 18px; margin: 0px; width: 300px;}

Si queréis ver un ejemplo de como queda, tenéis esta página disponible. La librería jQuery la tenéis aquí.

Entradas relacionadas

Hola. Me gusta este menú desplegable. Una pregunta, ¿Cómo se haría para que el menú se despliegue al pasar el ratón por encima del boton? me gustaría aprender a hacerlo pero no al hacer click sobre el botón.

AlbertoFebruary 26th, 2009 at 1:58 am