Creación de menús en CSS
En esta lección practicaremos la creación de menús de sitios web. Como ejemplo, hagamos el siguiente menú:
Primero necesitamos hacer la parte HTML. Hagamos un div, colocando en él los enlaces de nuestro menú:
<div id="menu">
<a href="#">link text 1</a>
<a href="#">link text 2</a>
<a href="#">link text 3</a>
<a href="#">link text 4</a>
<a href="#">link text 5</a>
</div>
Como puede ver en el ejemplo, uno de los enlaces
del menú está resaltado. Simboliza que
nos encontramos en la página del sitio correspondiente
a ese elemento del menú. Es común
resaltar tales páginas usando la clase active:
<div id="menu">
<a href="#">link text 1</a>
<a href="#" class="active">link text 2</a>
<a href="#">link text 3</a>
<a href="#">link text 4</a>
<a href="#">link text 5</a>
</div>
Ahora coloquemos nuestros enlaces en una fila:
#menu {
display: flex;
}
Escribamos los estilos para nuestros enlaces:
#menu a {
margin-right: 5px;
padding: 10px;
font: 15px Arial;
text-decoration: none;
color: #1437AD;
border: 1px solid #1437AD;
background-color: white;
}
Hagamos que los enlaces reaccionen al hover:
#menu a:hover {
color: blue;
border: 1px solid blue;
background-color: #F5F6FA;
}
El aspecto del enlace activo coincide con el del enlace al pasar el cursor. Unamos estos estilos:
#menu a:hover, #menu a.active {
color: blue;
border: 1px solid blue;
background-color: #F5F6FA;
}
Juntemos el código y obtendremos el código para nuestro menú:
<div id="menu">
<a href="#">link text 1</a>
<a href="#" class="active">link text 2</a>
<a href="#">link text 3</a>
<a href="#">link text 4</a>
<a href="#">link text 5</a>
</div>
#menu {
display: flex;
}
#menu a {
margin-right: 5px;
padding: 10px;
font: 15px Arial;
text-decoration: none;
color: #1437AD;
border: 1px solid #1437AD;
background-color: white;
}
#menu a:hover, #menu a.active {
color: blue;
border: 1px solid blue;
background-color: #F5F6FA;
}