1
Tabla de contenido
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;
}