Menú superior desplegable con jQuery

18 de May de 2008
Delicious Guardar en Delicious
 

 

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:

<script type="text/javascript" src="jquery.js"></script>  <!-- Libreria jQuery -->
<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:

<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&uacute;</a></p>

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

#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

Deja un comentario