Menú desplegable con HTML

Curso de HTML

6.  
16.  
17.  
23.  
32.  
34.  
36.  
37.  
38.  
40.  
45.  
46.  
47.  
52.  
54.  
56.  
59.  

Contactar con el profesor

Cómo hacer la botonera 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.

Navigation Bar 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{
	...

Navigation Bar II – content

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

Navigation Bar 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);
}

Navigation Bar IV – botonera 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.

Navigation Bar 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

Navigation Bar VI – aparecen submenús

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

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

Navigation Bar VII – añadiendo animación

transition: 1s

Navigation Bar 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 →

Aviso Legal | Política de privacidad