Los menús de navegación son componentes bastante simples en sí. Una barra horizontal y unas anclas de texto para redireccionar al usuario. A pesar de que su implementación no presentan una dificultad técnica muy grande, podemos encontrarnos con pequeñas dificultades.
En mi caso particular, tenía que implementar un menú de navegación horizontal con los siguientes requisitos:
En la primera implementación, el resultado fue el siguiente:
See the Pen menu navegación con problemas by ALBERTO (@albertof) on CodePen.
Si interactuáis un poco con los botones, notaréis que estos crecen al pasar el ratón sobre ellos. Esto sucede porque cuando pasamos el ratón por encima de las anclas de texto, se incrementa el font-weight incrementando la anchura de este.
Una posible solución hubiese sido fijar el ancho de las anclas de texto a un tamaño mayor del que necesitan. El principal problema es que no conocemos el texto que contienen, con lo que no tenemos valores de referencia a fijar. Tampoco queremos que las anclas de texto se sitúen en dos líneas.
En stackoverflow encontré una solución curiosa que no había visto antes usando pseudoclases.
El truco consiste en fijar el amplio de las anclas de texto a la máxima amplitud que pueda adquirir cada una usando únicamente CSS.
Disponemos de un menú de navegación.
<nav>
<a>inicio</a>
<a>artículos</a>
<a>sobre mi</a>
</nav>La barra de navegación será tan amplia como el contenido que albergue.
nav {
display: inline-block; // nos permite usar top and bottom paddings
}Los botones se sitúan uno después de otro, horizontalmente.
a {
display: inline;
}La pseudoclase ::after define las propiedades que influyen en la amplitud del botón de navegación: font-weight.
a {
display: flex;
flex-direction: column;
&::after {
font-weight: 700;
}
}La amplitud del botón de navegación depende del texto que este albergue.
Disponemos de la functión CSS attr, la cual nos permite acceder al valor de cualquier atributo Html. Definamos el atributo title del botón de navegación y usemos la función attr para acceder a este valor.
.nav-button {
display: flex;
flex-direction: column;
&::after {
font-weight: 700;
content: attr(title);
visibility: hidden;
height: 1px;
margin-bottom: -1;
}
}El resultado final lo podeis ver a continuación:
See the Pen menu navegación sin problemas by ALBERTO (@albertof) on CodePen.