Este es uno de los mejores ejemplos de que con solo unas pocas líneas de código se pueden crear interfaces bastante complejas con el framework JQuery. Mi propósito hoy es mostraros como hacer un menú deslizante básico para vuestros desarrollos web. No usaré demasiado CSS para la intefaz. Ya es cuenta de que cada uno trabaje el diseño a su gusto o necesidad.

Partimos de una estructura HTML5 típica a la que ya le hemos añadido las librerias javascript y css que utilizaremos en éste ejemplo. Obvio, también incluye a JQuery la cuál la podemos descargar gratuitamente desde su página web oficial.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu deslizante</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>
    
    <script src="js/jquery.min.js"></script>
    <script src="js/script.js"></script>

</body>
</html>

Para no hacer demasiado largo este artículo voy a resumir lo que voy a hacer. Crearé la estructura de un menu deslizante con listas. Cada nivel llevará asociado una clase. A continuación comenzaré a codificar con jquery: ocultaré las sublistas y estas se abrirán respondiendo a un evento click del ratón. Al abrir una de ellas, el resto automáticamente se cerrarán. Comenzamos por el aspecto que tendrá nuestro menú.

<div class="menu">
        
        <p class="opcion_primaria">Opción Primera</p>
        <div class="opcion_secundaria">
            <a href="#">Submenu 1</a>
            <a href="#">Submenu 2</a>
            <a href="#">Submenu 3</a>
        </div>

        <p class="opcion_primaria">Opción Segunda</p>
        <div class="opcion_secundaria">
            <a href="#">Submenu 4</a>
            <a href="#">Submenu 5</a>
            <a href="#">Submenu 6</a>
        </div>

        <p class="opcion_primaria">Opción Tercera</p>
        <div class="opcion_secundaria">
            <a href="#">Submenu 7</a>
            <a href="#">Submenu 8</a>
            <a href="#">Submenu 9</a>
        </div>
        
</div>

Lo siguiente que vamos a ver es el aspecto que tendrá la interfaz en pantalla. Ni que decir tiene que me he complicado mucho para hacerlo. Sobre todo por que no es éste el objetivo de esta publicación. Vamos con el código:

*{
    margin: 0;
    padding: 0;
}

body {
    background: white;
}

.menu {
    width: 30rem;
    margin: 10rem auto;
}

.opcion_primaria {

    padding: 1.1rem;
    cursor: pointer;
    position: relative;
    background: gray;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 700;
    color: black;
    border: 1px solid black;
    border-radius: 6px;

}

.opcion_secundaria a {

    display: block;
    padding-left: 0.9rem;
    text-decoration: none;
    background: blanchedalmond;

}

.opcion_secundaria a:hover {

    background: burlywood;
    color:chocolate;

}

Pasamos ahora a jquery. Este codigo se divide en dos partes. En la primera oculta los menus secundarios con la función hide(). A continuación lanzaremos un evento click. Cuando el usuaruo pulse sobre una de las opciones principales, this, llamamos a la función slideDown para abrir el submenu deslizandolo hacia abajo. Puede darse el caso de que otro submenu esté abierto. Es necesario cerrarlos, para ello, haremos uso de dos funciones siblings selecciona a los hermanos inmediatos y tras ello se llama a la función slideUp que lo cierra lentamente. Veamos el código.

$(document).ready ( function ( ) {

    $("div.opcion_secundaria").hide();

    $("p.opcion_primaria").click( function() {
        $(this).next("div.opcion_secundaria").slideDown(300)
        .siblings("div.opcion_secundaria").slideUp("slow");
    });

});

Para los que quieran descargarse el código y probarlo, podéis conseguirlo en mi cuenta personal de github en el siguiente enlace.

Dejar respuesta

Please enter your comment!
Please enter your name here