En este tutorial práctico desarrollaremos un menú desplegable haciendo uso de HTML y CSS. Es importante mencionar, sin un menú desplegable el sitio web no presentaría un orden o agrupación de la información que se pretende publicar en el sitio web.
Requisitos:
- Visual Studio Code
- HTML y CSS
Lo que veremos en este tutorial:
- ¿Que es un menú desplegable?
- Estructura base de un menú desplegable.
- Construyendo el menú desplegable base con HTML.
- Agregar estilos CSS al menú principal.
- Agregar estilos CSS al sub menú (desplegable).
- Agregar estilos CSS complementario.
1. ¿Que es un menú desplegable?
Un menú desplegable en un sitio web es una lista de opciones que ofrece al usuario para direccionar a una determinada sección o página del sitio web, es decir, el menú desplegable nos permite añadir varios enlaces dentro de un enlace.
2. Estructura base de un menú desplegable.
La estructura base de un menú desplegable siempre estará sujeto al diseño del menú principal, es decir, el menú principal siempre está formado por una lista inicial que define la estuctura de partida para definir los sub menú que se desplegará según la lista inicial seleccionada.
3. Construyendo el menú desplegable base con HTML.
Desde Visual Studio Code, iniciamos la construcción del menú desplegable base que está conformado por el menú principal o enlaces (ítems) como Home, About, Services, Projects y Contact; de las cuales, los enlaces (ítems) Services y Projects se despliega 3 ítems por cada uno de ellos, es decir, el menú Services despliega los sub menús Services 1, Services 2 y Services 3, finalmente el menú Projects despliega los sub menú Project 1, Project 2 y Project 3:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menú desplegabe - HTML & CSS</title>
</head>
<body>
<nav class="menu">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Services</a>
<ul>
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 2</a></li>
<li><a href="#">Service 3</a></li>
</ul>
</li>
<li>
<a href="#">Projects</a>
<ul>
<li><a href="#">Project 1</a></li>
<li><a href="#">Project 2</a></li>
<li><a href="#">Project 3</a></li>
</ul>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</nav>
</body>
</html>
4. Agrerar estilos CSS al menú principal.
Ahora definimos los principales estilos CSS para nuestro menú principal o enlaces (ítems) como Home, About, Services, Projects y Contact:
<style>
/* 1. Definiendo los estilos CSS para el menú principal */
/* 1.1. Definiendo los espacios al rededor del menú principal */
.menu{
padding: 0;
}
/* 1.2. Ocultando las viñetas de la lista y definiendo los
margenes y espacios del menú principal */
.menu ul{
list-style: none;
margin: 0;
padding: 0;
}
/* 1.3. Definiendo el color de fondo de lista */
.menu ul li{
background-color:blueviolet;
}
/* 1.4. Definiendo el estilo de los enlaces */
.menu ul a {
display: block;
color:#fff;
text-decoration: none;
font-weight: 700;
font-size: 16px;
padding: 10px;
font-family: "Nunito", sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
}
/* 1.5. Definiendo la posición, margenes y espacios de las listas
de nuestro menú principal */
.menu ul li {
position:relative;
float:left;
margin:0;
padding:0;
}
</style>
5. Agrerar estilos CSS al sub menú (desplegable).
Seguidamente, agregamos los estilos CSS para los ítems desplegables o sub menú de Services y Projects:
/****************************************************************/
/* 2. Definiendo los estilos CSS para el menú desplegable (sub menú)*/
/* 2.1. Estilos CSS para el menú desplegable*/
.menu ul ul {
display: none;
position:absolute;
top: 100%;
left: 0;
background:#eee;
padding:0;
}
/* 2.2. Definiendo la ubicación y el ancho de la listas (ítems)
del menú desplegable */
.menu ul ul li {
float:none;
width:150px
}
/* 2.3. Definiendo el estilo de los enlaces del menu desplegable */
.menu ul ul a {
line-height:120%;
padding:10px 15px;
}
/* 2.4. Desplegar (mostrar) el sub menu al pasar el puntero del mouse */
.menu ul li:hover > ul {
display:block;
}
6. Agregar estilos CSS complementario.
Para finalizar el tutorial prácico agregaremos un estilo complementario a nuestro menú desplegable, en este casos consiste en generar un efecto o cambiar el fondo de color (background-color) al pasar el cursor:
/* 3. Definiendo estilos CSS para complementar el diseño del menú */
/* 3.1. Definiendo efecto al pasar el puntuero del mouse */
.menu ul li:hover {
background-color:darkmagenta;
}
¡Construya nuevas experiencias y emociones!
0 Comentarios