Un símbolo universal para “menú” ha estado en la mente de muchas personas últimamente. (“Navicon”, ¡¿entiendes ?!). Jordan Moore escribió un gran artículo al respecto para Smashing Magazine. Jeremy Keith escribió sobre eso. Stuart Robson escribió sobre eso. Tim Kadlec escribió sobre eso. Si quieres leer más sobre el pensamiento detrás de estas cosas y ver ejemplos, léelos.
En este artículo, me centraré en el símbolo de “tres líneas” (a diferencia de las flechas hacia abajo u otros posibles navicons). Me gusta bastante el símbolo de tres líneas como símbolo para representar menús. Si tenemos que elegir uno, estoy a favor de este.
Vamos a ver el “cómo” para crear este símbolo de muchas formas diferentes.
Usar una imagen
¿Cómo hemos puesto símbolos en los sitios web desde… para siempre? Imagenes No hay nada malo en esto. Esta imagen es tan simple que pide SVG. SVG significa que es 1) tamaño de archivo súper pequeño y 2) puede escalar a cualquier tamaño de manera nítida. El HTML probablemente sería:
<a href="https://css-tricks.com/three-line-menu-navicon/#menu">
<img src="menu.svg" alt="">
Menu
</a>Si va a utilizar el símbolo sin texto, asegúrese de incluir el alt texto. También puede usar un PNG o lo que sea, pero SVG es perfecto para este tipo de dibujo simple.
Usar un pseudoelemento
No hay nada de malo en usar un elemento, pero si usamos un pseudoelemento y algún truco, podríamos hacer este símbolo sin la solicitud HTTP adicional que requiere una imagen. (Sí, podría estar en tu sprite, pero sabes a qué me refiero).
Pseudo caja de sombra
Nada más que marcado semántico:
<a href="https://css-tricks.com/three-line-menu-navicon/#menu" class="box-shadow-menu">
Menu
</a>En CSS, haga un espacio a la izquierda del enlace con algunos padding-left. Establecer el contexto de posicionamiento con posicionamiento relativo. Luego, haga una sola línea negra absolutamente posicionada en ese espacio en la parte superior izquierda. Luego usando box-shadow, haz dos líneas más debajo.
.box-shadow-menu {
position: relative;
padding-left: 1.25em;
}
.box-shadow-menu:before {
content: "";
position: absolute;
left: 0;
top: 0.25em;
width: 1em;
height: 0.15em;
background: black;
box-shadow:
0 0.25em 0 0 black,
0 0.5em 0 0 black;
}Pseudo gradiente
El mismo marcado que el anterior. La misma idea de crear un espacio para que el pseudo-elemento vaya. Solo que esta vez, use degradados para crear las tres líneas. Recuerde que los degradados en realidad no necesitan desvanecer el color de uno a otro si usa “paradas duras” donde el color cambia a otro instantáneamente en la misma parada de color.
.gradient-menu {
padding-left: 1.25em;
position: relative;
}
.gradient-menu:before {
content: "";
position: absolute;
left: 0;
top: 0.21em;
bottom: 0.21em;
width: 1em;
background: linear-gradient(
to bottom,
black, black 20%,
white 20%, white 40%,
black 40%, black 60%,
white 60%, white 80%,
black 80%, black 100%
);
}Pseudo borde
Crédito al Sr. Robson por este. Lo creó aplicando un borde sólido doble y uno simple al pseudoelemento. También usó valores de píxeles en su demostración. Tim Kadlec los convirtió a ems para que escalen con texto, lo cual es bueno.
.border-menu {
position: relative;
padding-left: 1.25em;
}
.border-menu:before {
content: "";
position: absolute;
top: 0.25em;
left: 0;
width: 1em;
height: 0.125em;
border-top: 0.375em double #000;
border-bottom: 0.125em solid #000;
}Usar fuentes
Hay un símbolo Unicode con tres líneas.
<a href="https://css-tricks.com/three-line-menu-navicon/#menu">
☰ Menu
</a>Pensarías que sería perfecto, pero en realidad, termina bastante borroso. Se ve bien en mi pantalla de retina pero bastante mal en no retina. Este tipo de cosas debe ser lo más nítido posible en cualquier lugar.
Siempre puedes usar una fuente de iconos también. Entypo tiene este símbolo en su juego libre. Las líneas son redondeadas, lo que me parece bien. Pictos tiene uno con línea de puntos, línea de puntos, línea de puntos, que también es bueno.
No he tenido muchos problemas con las fuentes de los íconos borrosos como el ícono Unicode. No tengo ni idea de por qué, pero c’est la vie.
Actualizar: El lector GS escribe en:
Con respecto al artículo https://css-tricks.com/three-line-menu-navicon/, un teléfono Nokia antiguo con Opera 12 puede mostrar el carácter Unicode para ‘IDENTICAL TO’ (U + 2261), pero no el TRIGRAMA PARA EL CIELO ‘(U + 2630).
Parecería que es más probable que se implemente un operador matemático en fuentes que un símbolo iChing.
¿Cuál es el mejor?
Probablemente evitaría el símbolo Unicode ya que no tiene el significado semántico correcto. Probablemente evitaría hacer una solicitud HTTP para una imagen solo por esto. Lo del gradiente es bueno, pero es un fragmento de código de buen tamaño para mantener.
Probablemente optaría por SVG en línea.