soy Kseso y esto EsCSS

☰ Navicon 3 líneas semántico y RWD para el menú de navegación

Uso del navicon de 3 líneas como icono de navegación. Varias formas semánticas y RWD de lograrlo: imag, html entity (trigram chino), puro css.

☰ Navicon 3 líneas semántico y RWD para el menú de navegación

·Por Kseso ✎ 2

navicon 3 líneas en chrome y facebookPosíblemente te hayas encontrado este símbolo o icono ☰ (3 líneas horizontales) para representar un menú de opciones ocultas (desplegables) en multitud de páginas, tanto en versión "móvil" como de escritorio. Entre otros Chrome, que cambió su "tuerca" por éste, y facebook.
Es un símbolo que poco a poco se está extendiendo. Y tiene visos de terminar por imponerse a la variedad de iconos que conviven hoy día para cumplir este papel.
Tanto es así que últimamente son muchos los artículos sobre el particular:

  1. Jordan Moore en Smashingmagazine
  2. Jeremy Keith en Adaptio
  3. Chris Coyier en Css-tricks
  4. Tim Kadlec en Timkadlec
  5. Y muchos, muchos más.

Hay quien lo llama "navicon". Así que... posíblemente esté bien bautizado. Pero el nombre es lo de menos, por lo que vamos a centrarnos en las diversas técnicas o métodos para implementarlo. Sin valoraciones o preferencias a priori. Debes ser tú quien se decida por uno u otro camino en función de tus particularidades. Y si necesitas opiniones complementarias al respecto, en los enlaces anteriores a los artículos (y en los comentarios en ellos) encontrarás más de una y de dos opiniones. Para todos los gustos.

☰ Navicon con imagen

navicon 3 líneas en chromeLa opción de toda la vida. Una imagen. Apoyada con un texto oculto, ya sea en span con display: none, el clásico text-indent o algo más nuevo y moderno.

Eso sí, si te decides por el uso de navicon ☰ en imagen, son obligatorios los atributos alt y title. Y quizás sea buena idea sopesar el uso de imágenes SVG.

☰ Navicon con entidades html

Sí, existe un carácter unicode para representar el símbolo de las tres líneas horizontales. El chino "TRIGRAM para el cielo" (☰ U+2630) se representa con la entidad html: ☰

<a href="#menu"> &#9776; </a>

Toda la información sobre la entity del trigram en fileformat.info o en codepoints.net

☰ Navicon con tipografías

navicon 3 líneas en entypoApoyados en la regla @font-face se puede recurrir a uno de los muchos archivos tipográficos de iconos que incluyen las tres líneas en ellos. Entre otros: Entypo

☰ Navicon en puro Css

Varias son las formas de lograr el trigram con puro Css. Alguna de ellas:

Sombras en pseudoelementos para el navicon ☰

Muy semántico, sólo se requiere del simple etiquetado html

<a href="#menu" class="box-shadow-menu"> Menu </a>

Un poquito de aire a la izquierda con su padding, el trigram posicionado de forma absoluta y las tres líneas salen una del fondo y las dos restantes de su sombra:

.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; }

☰ Navicon con gradiente Css

Este y el anterior son obra de Css-Tricks (¿viste el enlace del inicio?).
Con el mismo etiquetado html anterior, el navicon sale con un gradiente css como fondo del pseudoelemento. No hay transición (degradado) de un color a otro, el cambio es instantáneo por usar puntos de transición "duros".

.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( top, black, black 20%, white 20%, white 40%, black 40%, black 60%, white 60%, white 80%, black 80%, black 100% ); }

☰ Navicon con border en pseudoelemento

Esta forma es originaria de Stuart Robson.

<div id="lines" class="btn"></div>

Tiene el inconveniente de estar dimensionado con medidas absolutas (px)

.btn { position: relative; margin-top:2%; border: 2px solid black; border-radius: 2px; height: 36px; width:36px; } #lines:before { border-bottom: 17px double black; border-top: 6px solid black; content:""; height: 5px; position: absolute; right:3px; top: 4px; width:30px; }

El resultado es el de abajo, primero por la izquierda. El resto son distintos iconos para lo mismo: indicar que ahí hay una serie de opciones. Nota para quien no esté familiarizado con los iframes de jsfiddle, pulsa el + para ir a la página del ejemplo y jugar con los códigos.

Variación del ☰ Navicon con border

Para facilitar la variación del tamaño del trigram con border, Tim Kadlec sustituyó los píxeles por valores en em. Así se consigue que el icono escale con el tamaño del texto (font-size).

.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; }

Demos del trigram ☰ Navicon en Css

Abajo tienes algunas representaciones de las tres líneas del icono de navegación obtenidas con las distintas técnicas mencionadas. Es una demo en codepen.io

Créditos y autorías

En este artículo tienes los créditos y autorías de los ejemplos al lado de los mismos. Y los artículos en los que me he ayudado al inicio

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso