Cursos de páginas web

Menú desplegable con HTML

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Curso de HTML

1.  
2.  
3.  
4.  
5.  
6.  
7.  
8.  
9.  
10.  
11.  
12.  
13.  
14.  
15.  
16.  
17.  
18.  
19.  
20.  
21.  
22.  
23.  
24.  
25.  
26.  
27.  
28.  
29.  
30.  
31.  
32.  
33.  
34.  
35.  
36.  
37.  
38.  
39.  
40.  
41.  
42.  
43.  
44.  
45.  
46.  
47.  
48.  
49.  
50.  
51.  
52.  
53.  
54.  
55.  
56.  
57.  
58.  
59.  
60.  
61.  
62.  
63.  

Cómo hacer un menú deplegable con submenús

Esta botonera está resuelta de forma similar a como funcionan las botoneras en wordpress. Una botonera (o navbar) es una lista de enlaces.

Para que los ‘li’ de la botonera se coloquen horizontalmente (queremos una botonera horizontal), indicaremos que los li dentro del menú tengan el estilo display:inline-block.

Nosotros identificaremos al li que tiene submenús asignándole un class. Dentro de ese li, además de haber un enlace, debería haber otro ul o submenú.

Para que ese submenú no desplace al resto de los elementos de la botonera, le pondremos position:absolute. Además, como el submenú debe mostrarse en vertical, le asignaremos a los li que tiene dentro el estilo display:block

Otra complicación a la hora de hacer la botonera es la animación que hace que los submenús se desplieguen. Esto se puede hacer ocultando los submenús con display:none inicialmente, y luego, cuando pase el cursor por encima de los li, asignarles el estilo display:block. Sin embargo, haciendolo de esta forma, nuestros submenús no tendrán animación. Para que si la tengan, les asigno una max-height de 0, y luego cuando pase el curso por encima lo aumento.

Sin embargo, cuando una capa tiene un contenido que excede sus dimensiones, el contenido se ve. En este caso el contenido, aunque sobrepasa la altura de 0, se ve igualmente. Para que no se vea el contenido de una capa que excede sus dimensiones, puedo utilizar el estilo overflow:hidden.

Paso I – lista de enlaces

Hacemos una lista de enlaces y los maquetamos ligeramente.

.menu{
	width: 300px;
	padding-left: 0;
	list-style:none;
}
	
.menu li a{
	color:black;
	background:pink;
	border:solid black 6px;
	border-radius: 10px;
	padding:15px;
	display:block
	...

.menu li a:hover{
	...

Paso II – content

li.hasChildren a:after{
	color:purple;
	content:" o";
}

Paso III – iconos

Uso de iconos. Si cargo una fuente en la que todo son iconos, y pongo la letra correspondiente al icono que me interesa, mostraré el icono.

@font-face{
	font-family: flechita;
	src:url(Arrows_tfb.ttf);
}
Descargar Recurso

Paso IV – menu horizontal

Volver la botonera horizontal:

.menu li{
	display: inline-block;
...

También lo podíamos haber hecho utilizando:

.menu li{
	float:left; /*Necesario para mostrar los botones en horizontal*/
…

Pero recomiendo la primera forma que nos facilitará la tarea cuando queramos hacer una botonera cuyos enlaces emerjan del centro.

Paso V – submenús

<li class="hasChildren"><a href="#" title="las fotos de mis viajes">fotos</a>
	<ul>
		<li><a href="#">submenu 1</a></li>
		<li><a href="#">submenu 2</a></li>
		<li><a href="#">submenu 3</a></li>
	</ul>
</li>
.hasChildren ul{
	position:absolute;
}
.hasChildren li{
	display:block;
}
Notas:

Para que los submenus no tengan el icono, habrá que modificar es estilo de este enlace:

li.hasChildren > a:after

Paso VI – aparecen submenús

li.hasChildren ul{
	...
	opacity: 0;
	overflow: hidden;
	max-height: 0
}

li.hasChildren:hover ul{
	opacity: 1;
	max-height: 800px
}

Paso VII – añadiendo animación

transition: 1s

Paso XIV – logrando el estado persistente del botón que encabeza el submenú

li:hover > a{

Ejercicio

Hacer que en lugar de ser una botonera horizontal, sea una botonera vertical.

Ejercicio – lista con subíndices 

ol.indice, ol.indice ol{
	counter-reset: item;
}

.indice li::before {
	content: counters(item, ".") " ";
	counter-increment: item;
}
.indice li{
	list-style: none
}
← Ejercicio - Galería de fotos
Animaciones con keyframes →