Cómo crear un menú desplegable con CSS3
Cómo crear un menú desplegable con CSS3

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

Este post viene producido una vez más por el compi Dany. El hombre, que se está convirtiendo en todo un artista de CSS y sus cosas, nos proporciona esta vez un ejercicio muy chulo sobre cómo crear un menú desplegable utilizando CSS3 (y un par de funciones JavaScript para cambiar el estado de visualización de la explicaciones que acompañan al ejercicio). El código que nos proporciona el colega es sencillo de entender y utiliza HTML5 para montar los CSS que nos mostará el menú.

Cuando se despliega el menú, que en este caso tiene tres niveles, si haces click en alguno de ellos, se mostrará en la parte de abajo una breve explicación de como se hizo cada uno de los niveles del menú. Por sacarle un pero al ejercicio, diré que lo único que le falla es que si pinchas primero en el apartado 3 del menú, se van a mostrar las explicaciones de los apartados anteriores junto con la explicación referente al apartado tres. Pero esto será fácilmente subsanable añadiendo un poco de código en las funciones Javascript que controlan la visibilidad de los campos de explicación. Se puede ver un ejemplo práctico del menú desplegable en este link.

Esperando una nueva colaboración de Dany, aquí dejo el código fuente de los dos archivos que utiliza (un index.html y un estilos.css) y que ha generado el. Dentro del código se puede leer alguna explicación que nos ha ido dejando mientras picaba el código.

Código del menú desplegable realizado con CSS3

 index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Menú Desplegable</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" type="text/css" href="estilos.css" >
        
        <script type="text/javascript">
            
            function mostrar1()
            {
                document.getElementById('info1').style.visibility = 'visible';
            }
            
            function mostrar2()
            {
                document.getElementById('info2').style.visibility = 'visible';
            }
            
            function mostrar3()
            {
                document.getElementById('info3').style.visibility = 'visible';
            }
            
        </script>
        
    </head>
    <body>
        <header>
            <div id="subheader">
                <h1>Menú deplegable</h1>
                <p><i>Para tener información de cada parte del menú, haz "clic" en el</i></p>
            </div>
            <nav>
                <ul class="nav">
                    <li onclick="mostrar1();"><a href="index.html#info1" >Parte 1</a>
                        <ul>
                            <li onclick="mostrar2();"><a href="index.html#info2" >Parte 2</a></li>
                            <li onclick="mostrar2();"><a href="index.html#info2" >Parte 2</a></li>
                            <li onclick="mostrar2();"><a href="index.html#info2" >Parte 2</a>
                                <ul>
                                    <li onclick="mostrar3();"><a href="index.html#info3" >Parte 3</a></li>
                                    <li onclick="mostrar3();"><a href="index.html#info3" >Parte 3</a></li>
                                    <li onclick="mostrar3();"><a href="index.html#info3" >Parte 3</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li onclick="mostrar1();"><a href="index.html#info1"  >Parte 1</a>
                        <ul>
                            <li onclick="mostrar2();"><a href="index.html#info2" >Parte 2</a></li>
                            <li onclick="mostrar2();"><a href="index.html#info2" >Parte 2</a></li>
                            <li onclick="mostrar2();"><a href="index.html#info2" >Parte 2</a>
                                <ul>
                                    <li onclick="mostrar3();"><a href="index.html#info3" >Parte 3</a></li>
                                    <li onclick="mostrar3();"><a href="index.html#info3" >Parte 3</a></li>
                                    <li onclick="mostrar3();"><a href="index.html#info3" >Parte 3</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li onclick="mostrar1();"><a href="index.html#info1" >Parte 1</a>
                        <ul>
                            <li onclick="mostrar2();"><a href="index.html#info2" >Parte 2</a></li>
                            <li onclick="mostrar2();"><a href="index.html#info2" >Parte 2</a></li>
                            <li onclick="mostrar2();"><a href="index.html#info2" >Parte 2</a>
                                <ul>
                                    <li onclick="mostrar3();"><a href="index.html#info3">Parte 3</a></li>
                                    <li onclick="mostrar3();"><a href="index.html#info3" >Parte 3</a></li>
                                    <li onclick="mostrar3();"><a href="index.html#info3" >Parte 3</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li onclick="mostrar1();"><a href="index.html#info1">Parte 1</a>
                        <ul>
                            <li onclick="mostrar2();"><a href="index.html#info2">Parte 2</a></li>
                            <li onclick="mostrar2();"><a href="index.html#info2" >Parte 2</a></li>
                            <li onclick="mostrar2();"><a href="index.html#info2" >Parte 2</a>
                                <ul>
                                    <li onclick="mostrar3();"><a href="index.html#info3" >Parte 3</a></li>
                                    <li onclick="mostrar3();"><a href="index.html#info3" >Parte 3</a></li>
                                    <li onclick="mostrar3();"><a href="index.html#info3" >Parte 3</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li onclick="mostrar1();"><a href="index.html#info1" >Parte 1</a>
                        <ul>
                            <li onclick="mostrar2();"><a href="index.html#info2" >Parte 2</a></li>
                            <li onclick="mostrar2();"><a href="index.html#info2" >Parte 2</a></li>
                            <li onclick="mostrar2();"><a href="index.html#info2" >Parte 2</a>
                                <ul>
                                    <li onclick="mostrar3();"><a href="index.html#info3" >Parte 3</a></li>
                                    <li onclick="mostrar3();"><a href="index.html#info3" >Parte 3</a></li>
                                    <li onclick="mostrar3();"><a href="index.html#info3" >Parte 3</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li onclick="mostrar1();"><a href="index.html#info1" >Parte 1</a>
                        <ul>
                            <li onclick="mostrar2();"><a href="index.html#info2" >Parte 2</a></li>
                            <li onclick="mostrar2();"><a href="index.html#info2">Parte 2</a></li>
                            <li onclick="mostrar2();"><a href="index.html#info2" >Parte 2</a>
                                <ul>
                                    <li onclick="mostrar3();"><a href="index.html#info3" >Parte 3</a></li>
                                    <li onclick="mostrar3();"><a href="index.html#info3" >Parte 3</a></li>
                                    <li onclick="mostrar3();"><a href="index.html#info3" >Parte 3</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>                    
                </ul>
            </nav>
        </header>

        <article>
            <section class="articulo" id="info1">
                <hgroup><h2 class="titulo">Parte 1:</h2></hgroup>
                <p>
                     Este paso corresponde al listado que aparecerá siempre visible.
                     En primer lugar damos un ancho a la caja que contiene las listas.
                     A continuación, a todos los "li" del primer listado,
                     les proporcionamos una posición relativa para posteriormente posicionar los
                     segundos listados. Dispondremos el listado en bloque y finalmente,
                     solo a estos "li", los flotamos a la izquierda. De este modo nuestro primer listado
                     aparecerá en bloque de forma horizontal.
                </p>
            </section>
            <section class="articulo" id="info2">
                <hgroup><h2 class="titulo">Parte 2:</h2></hgroup>
                <p>
                     En este segundo paso posicionaremos el segundo listado.
                     Primeramente les damos un posicionamiento absoluto. De este modo, como los
                     elementos "li" del listado anterior están en posicionamiento relativo, nos permite
                     posicionarlos a partir de ellos, asi este listado queda situado justo debajo del primero
                     y de forma vertical.
                     Pero este listado solo debe ser visible al pasar el ratón por encima del primer listado.
                     Para ello, en un estado normal hacemos el segundo listado invisible al usuario (display: none;)
                     y cuando pase el ratón por encima del primer listado, lo dispondremos en bloque (display: block).
                </p>
            </section>
            <section class="articulo" id="info3">
                <hgroup><h2 class="titulo">Parte 3:</h2></hgroup>
                <p>
                    Finalmente en este tercer paso posicionaremos el resto de listados.
                    Pondremos al tercer listado un posicionamiento relativo y lo moveremos a la derecha
                    los píxeles necesarios para que, en el momento en el que el usuario pase el ratón
                    por encima del segundo listado, aparezca por el lado derecho este tercer listado.
                </p>
            </section>
        </article>

    </body>
</html>

estilos.css

/* Estilos generales */

*
{
    margin: 0;
    padding: 0;
}

body
{
    background-color: rgba(0,30,96,1);
}

header
{
    width: 100%;
}

#subheader
{
    width: 100%;
    height: 100px;
    background-color: #fff;
    padding-top: 20px;
}

#subheader h1
{
    text-align: center;
    font-size: 40px;
    font-family: sans-serif;
}

#subheader p
{
    text-align: center;
    font-family: sans-serif;
    font-size:  15px;
    margin-top: 30px;
}

/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/
/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/
/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/
/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/
/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/


/* Estilos para el menú desplegable */


/* Primera parte */
nav
{
    margin: auto;
    width: 960px;
    text-align: center;
}

.nav li
{
    position: relative;
    text-decoration: none;
    border-radius: 2px;
    padding: 10px 15px;
    cursor: pointer;
    display: block;
    width: 130px;
}

.nav > li
{
    float: left;
}

/* Segunda parte */
.nav li ul
{
    display: none;
    position: absolute;
    min-width: 130px;
    top: 40px;
    left: 0;
}

.nav li:hover > ul
{
    display: block;
}


/* Tercera parte */
nav li ul li
{
    position: relative;
}

.nav li ul li ul
{
    left: 160px;
    top: 0;
}


/* COLORES Y EFECTOS */

.nav li
{
   background-color: rgba(0,30,96,1);
   box-shadow: 0px 0px 1px #fff inset; /* Con esta sombra creamos un pequeño borde para diferenciar los "ul" y "li" del menú */
   transition: 0.5s;
}

.nav li a
{
    text-decoration: none;
    color: #fff;
}

.nav li:hover
{
    box-shadow: 0px 0px 15px #fff inset;
}


/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/
/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/
/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/
/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/
/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/


/* Estilos de los artículos */

article
{
    width: 960px;
    margin: 150px auto;
}

article .articulo
{
    visibility : hidden;
    padding: 10px 15px;
    margin-bottom: 20px;
    background-color: rgba(49,100,188,1);
    border-radius: 10px;
    box-shadow: 0 0 2px #fff inset , 3px 3px 5px #000;
}

article .articulo .titulo
{
    font-family: sans-serif;
    margin-bottom: 10px;
    text-shadow: 1px 1px 2px #fff;
}

article .articulo p
{
    text-align: justify;
    font-family: sans-serif;
    margin-bottom: 5px;
}


 







¿Qué te ha parecido este post?

¡Haz clic en una estrella para calificarla!

Puntuación media 0 / 5. Recuento de votos: 0

¡No hay votos hasta ahora! Sé el primero en calificar esta publicación.

No te pierdas otros artículos ...

¡Síguenos en las redes sociales!

¡Lamentamos que esta publicación no te haya sido útil!

¡Permítanos mejorar esta publicación!

¿Cuéntanos cómo podemos mejorar esta publicación?

Deja una respuesta

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.