Inicio Apuntes FPApuntes DAW Cómo crear un menú desplegable con CSS3

Cómo crear un menú desplegable con CSS3

Publicado por entreunosyceros
Publicado el: Última actualización:

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;
}



También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

Resumen de privacidad
cookies entreunosyceros

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible.

La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudarnos a comprender qué secciones de la web encuentras más interesantes y útiles.

Nunca almacenamos información personal de ningún tipo.

Tienes toda la información sobre privacidad, derechos legales y cookies en nuestra página sobre la política de privacidad o en la página sobre nuestra política de cookies.

Cookies necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de terceros

Esta web utiliza las siguientes cookies adicionales:

- Mailchimp: Recordar si ya estás suscrito al boletín de noticias y sino ofrecértelo al salir.

- Accesibilidad: Para saber tus ajustes de accesibilidad en cada visita.

- Comentarios: Saber si has leído y aceptado nuestra política de privacidad a la hora de dejar un comentario en la web.

- Google Analytics: Localización para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

- Goggle Adsense: Anuncios personalizados según tu geolocalización y preferencias.

Dejar estas cookies activadas nos permite mejorar nuestra web.

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.