Posteamelo

Introducción: ¿Qué vamos a hacer?

Retomamos los tutoriales relacionados con javascript y jQuery de la mano de este control en forma de menú desplegable.

Al contrario que otros controles de este tipo, para desplegar este control, el usuario sólo tendrá que pasar el ratón por encima, en lugar de hacer click. Este será el aspecto final del control a crear:

La idea es que las distintas opciones sean mostradas en formato lista (<ul>, de forma que cada elemento de la lista sea un enlace que te traslade a una nueva sección en la que aparezca marcada la nueva opción seleccionada.

El control no necesitará hacer el cambio entre sección actualmente activa y la seleccionada, ya que eso se controlaría a la hora de generar la salida html en la lógica de programación (PHP, Java, Python… o lo que quiera que uséis).

Actualización: Por cierto… veo que algunas personas no lo han entendido bien: estamos imprimiendo una salida HTML limpia, por tanto los robots y rastreadores de Google y derivados, podrán indexar y seguir perfectamente todas esas opciones de nuestro menú.

¡Vamos a por el primer paso del tutorial!

Paso 1: La estructura HTML

Como acostumbramos a realizar en nuestros tutoriales, mantendremos una estructura sencilla, intentando que sea vistosa pero sobretodo clara a la hora de comprender qué estamos haciendo:


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es-ES">  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
        <title>Cómo crear un menú de pestañas elegante en jQuery</title>  
        <link rel="stylesheet" href="css/main.css" type="text/css" media="screen" />  
    </head>  
    <body>  
        <div class="wrapper">  
            <h1>Creando un menú desplegable en jQuery</h1>  
            <ul class="dropdown">  
                <li class="active">Visualizando: <span>Tutoriales</span></li>  
                <li class="first"><a href="#">Recursos</a></li>  
                <li><a href="#">Inspiración</a></li>  
                <li><a href="#">Contacto</a></li>  
                <li class="last"><a href="#">Ver más...</a></li>  
            </ul>  
        </div>  
        <script type="text/javascript" src="jquery.js"></script>  
        <script type="text/javascript" src="main.js"></script>  
    </body>  
    </html>

Esto es lo que deberíamos tener actualmente:

Básicamente lo único relevante de este paso es comprender que estamos aplicando la clase de CSS “dropdown” a nuestra lista, con la que estaremos advirtiendo a nuestro futuro código javascript que será un control del tipo desplegable.

Vamos pues a darle un poco de estilo al ejemplo antes de ponernos con la lógica en javascript…

Paso 2: Aplicando estilo con CSS a nuestro menú desplegable

En este caso, el código CSS es muy básico y se centra principalmente en el aspecto visual del control de menú desplegable que estamos creando:


    @CHARSET "UTF-8";  
    /* 
    Author: Adrian Mato 
    Author URI: http://web.ontuts.com 
    */  
      
    /******* GENERAL RESET *******/  
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,  
    font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,  
    tfoot, thead, tr, th, td {  
        border:0pt none;  
        font-family:inherit;  
        font-size:100%;  
        font-style:inherit;  
        font-weight:inherit;  
        margin:0pt;  
        padding:0pt;  
        vertical-align:baselinebaseline;  
    }  
    body{  
        line-height: 1em;  
        font-size: 14px;  
        font-family: Arial, Helvetica, sans-serif;  
        margin: 0pt;  
        cursor: default;  
        color: #fff;  
        background: #262626 url("bg.png") repeat scroll 0 0;  
    }  
    table{  
        border-collapse: separate;  
        border-spacing: 0pt;  
    }  
    strong{  
        font-weight: 700;  
    }  
    caption, th, td{  
        font-weight:normal;  
        text-align:left;  
    }  
    blockquote:before, blockquote:after, q:before, q:after{  
        content:"";  
    }  
    blockquote, q{  
        quotes:"" "";  
    }  
    pre{  
        font-family: Arial, Helvetica, sans-serif;  
    }  
    input{  
        border: 0;  
        margin: 0;  
        font-family: Arial, Helvetica, sans-serif;  
    }  
    textarea{  
        font-family: Arial, Helvetica, sans-serif;  
        color: #888888;  
        padding: 7px 3px 0 4px;  
        font-size: 11px;  
    }  
    select{  
        font-size: 11px;  
        color: #888888;  
        background: #fff;  
        font-family: Arial, Helvetica, sans-serif;  
        border: 1px solid #CAD2CE;  
    }  
    ul{  
        list-style: none;  
        list-style-type: none;  
        list-style-position: outside;  
    }  
    a{  
        cursor: pointer;  
        color: #ece6bd;  
        text-decoration: underline;  
        outline: none !Important;  
    }  
    html,body{  
        height:100%;  
    }  
    .clear{  
        clear: both;  
        height: 0;  
        visibility: hidden;  
        display: block;  
        line-height: 0;  
    }  
    .clearfix{  
        overflow: hidden;  
    }  
    .italic{  
        font-style: italic;  
    }  
    /******* /GENERAL RESET *******/  
      
    /******* GENERAL *******/  
    h1{  
        color: #fff;  
        font-size: 26px;  
        line-height: 3em;  
    }  
    h2{  
        line-height: 2em;  
        margin-top: 30px;  
        margin-bottom: 20px;  
        color: #e4e1cd;  
    }  
    .wrapper{  
        width: 982px;  
        margin: 0pt auto;  
        padding-top: 10px;  
    }  
    /******* /GENERAL *******/  
      
    /******* CONTENT *******/  
    h3{  
        line-height:1em;  
        vertical-align:middle;  
        height:48px;  
        padding:10px 10px 10px 52px;  
        font-size:32px;  
        color:#E4E1CD;  
    }  
    /******* /CONTENT *******/  
      
    /******* MENU *******/  
    ul.dropdown{  
        width: 200px;  
        border: 1px solid #000;  
        border-radius: 5px;  
        -moz-border-radius: 5px;  
        -webkit-border-radius: 5px;  
        background: #1a1a1a;  
        margin-top: 2em;  
    }  
    ul.dropdown li{  
        display: none;  
        font-size: 12px;  
    }  
    ul.dropdown li.active{  
        display: block;  
        color: #8c8c8c;  
        font-size: 14px;  
        padding: 12px;  
        color: #555;  
        border-top: 1px solid #313131;  
        border-radius: 4px;  
        -moz-border-radius: 4px;  
        -webkit-border-radius: 4px;  
    }  
    ul.dropdown li.active span{  
        background: transparent url("dropdown.png") no-repeat scroll rightright center;  
        padding-right: 24px;  
        color: #8c8c8c;  
    }  
    ul.dropdown li a{  
        display: block;  
        text-decoration: none;  
        padding: 8px 8px 8px 10px;  
        background: #1e1e1e;  
        border-bottom: 1px solid #171717;  
    }  
    ul.dropdown li.last a{  
        border:0;  
    }  
    ul.dropdown li.first a{  
        border-top: 3px solid #131313;  
    }  
    ul.dropdown li a:hover{  
        background: #232323;  
        color: #fff;  
        padding-left: 11px;  
    }  
    /******* /MENU *******/

La clase dropdown será con la que identificaremos el control y sobre la cual aplicaremos el resto de propiedades a los distintos elementos.

Así pues todos los elementos de la lista compartirán estilo excepto la clase active la cual aparecerá siempre en el primer puesto de la lista, y será la que identifique el elemento actualmente seleccionado / activo.

Este es el aspecto que presentará ahora nuestro control:

Como habréis podido comprobar, ahora no se están mostrando los elementos de la lista, salvo el elemento activo. Sólo necesitamos crear la lógica para que se muestren / oculten a nuestro antojo via javascript…

¡Vamos a ello!

Paso 3: Añadiendo interacción con javascript mediante jQuery

Repasemos qué es lo que queremos de nuestro control en forma de menú despegable antes de aplicar la interacción:

Mostrar opciones al pasar el ratón por encima.
Ocultar opciones al mover el ratón de encima.
Reutilizable para tener múltiples controles en una misma página.

Con esto en mente, necesitaremos identificar (mediante selectores de jQuery) los elementos de clase “dropdown” para reconocerlos como controles de menú desplegable.

Antes de explicar la parte de los eventos, echemos un vistazo al código final:


    //variable global para controles dropdown  
    var menu = $("ul.dropdown");  
      
    //control de eventos  
    $(this.document).ready(function(){  
        menu.mouseover(function(){  
            displayOptions($(this).find("li"));  
        });  
        menu.mouseout(function(){  
            hideOptions($(this));  
        });  
    })  
      
    //funcion que MUESTRA todos los elementos del menu  
    function displayOptions(e){  
        e.show();  
    }  
    //funcion que OCULTA los elementos del menu  
    function hideOptions(e){  
        e.find("li").hide();  
        e.find("li.active").show();  
    }

El código como podéis comprobar es relativamente sencillo, y en el podemos ver la asignación de los eventos “al pasar por encima” y “al quitar el ratón de encima”, los cuales llaman a las funciones:

displayOptions(): Muestra todos los elementos de la lista inicialmente ocultos al pasar el ratón por encima.
hideOptions(): Oculta todos los elementos de la lista, y luego vuelve a mostrar el elemento activo.

La razón por la que mostramos nuevamente el elemento activo es porque el selector de jQuery que estamos empleando está ocultando todos los elementos de la lista, entre los que se incluye el activo, pero deseamos que se mantenga visible.

Antes de dar por finalizado el tutorial, me gustaría resaltar otro detalle del código anterior: la función find(), mediante la cual localizamos los elementos del control que está recibiendo los eventos.

Siempre que programes controles reutilizables, trata de trabajar con referencias al objeto activo, de esta forma podrás reutilizarlos o crear plugins de forma realmente sencilla.

Podríamos estar utilizando selectores de jQuery genéricos pero recordad: queremos que nuestro control pueda aparecer en más de una ocasión en una misma página, por tanto trabajamos con referencias al objeto activo, en lugar de a todos los objetos que contengan la clase de CSS dropdown.

Con todo ello, generar un plugin apartir de este planteamiento sería realmente trivial. Si bien no lo hemos hecho en este tutorial, sí que hemos explicado anteriormente cómo crear plugins en jQuery, echadle un vistazo que es realmente útil.

Crear menú despegable con jQuery

Dejá tu comentario

Autor del Post