☰ 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 ✎ 3

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

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 Don Kseso Kseso

Comentarios: 3

  1. Hace un tiempo me entretuve haciendo algunos íconos "operativos" en CSS-Art (como el navicon de esta entrada), y buscando uno ya hecho de seticon (?) (digo, de configuración) caí por aquí de nuevo.

    No voy a objetar ni tu trabajo, ni los íconos de los demás autores citados (modestamente, yo hice el mío como Tim Kadlec); pero quisiera ajustarme un poco más al término "semántico". Porque lo más semántico sería una imagen con sus correspondientes atributos, y lo menos (o nada, según el punto de vista más estricto) un caracter sin su definición unicode.
    Lo que quiero decir es que todos los usamos por su glifo, su "dibujito", para que se interprete según el contexto. Pero los navegadores (y demás robots) no ven la forma sino el valor; la semántica se basa en eso. El U+2630 nunca será interpretado como un botón de menú desplegable, porque ya tiene su definición estándar como un signo del I-Ching.

    Quizá es distinto el caso del menú de configuración, ya que el U+2699 sí es un 'engranaje mecánico' (gear) que se puede entender perfectamente para el caso. Ahora, si usáramos un U+2638 (Rueda de Darma o Wheel of Dharma), sería la misma situación del trigrama anterior. Cuando no una falta de respeto. :D

    Me parece que el justo medio (de momento) es el CSS para formatear algún elemento HTML.
    Y ya que lo mencioné, y que tu blog lo permite, dejo la versión que hice del Seticon.

    <html>
    <style type="text/css">
    .spanSeticon1 {
    display: inline-block;
    position: relative;
    border-radius: 20%; /*para Firefox*/
    -o-border-radius: 50%;
    -webkit-border-radius: 50%;
    -ms-border-radius: 50%;
    border: .18em dotted black;
    width: .5em; height: .5em;
    }
    .spanSeticon1:before {
    content: "";
    margin: -25% -25%;
    border: .3em double black;
    border-radius: 50%;
    display: block;
    height: .15em; width: .15em;
    }
    </style>
    <p style="font-size: 40px;"><span class=spanSeticon1></span>
    (en Mozilla se ve muy extraño).</p>

    <style type="text/css">
    .spanSeticon2 {
    display: inline-block;
    position: relative;
    width: 0; height: 0;
    border: 17px double black;
    border-radius: 100%;
    }
    .spanSeticon2:before {
    content: "";
    position: absolute;
    top: -16px; left: -16px;
    height: 24px; width: 24px;
    border: 4px solid black;
    transform: rotate(22.5deg);
    -webkit-transform: rotate(22.5deg);
    -ms-transform: rotate(22.5deg);
    border-radius: 10%;
    }
    .spanSeticon2:after {
    content: "";
    position: absolute;
    top: -16px; left: -16px;
    height: 24px; width: 24px;
    border: 4px solid black;
    transform: rotate(-22.5deg);
    -webkit-transform: rotate(-22.5deg);
    -ms-transform: rotate(-22.5deg);
    border-radius: 10%;
    }
    </style>
    <p><span class=spanSeticon2></span> </p>
    </html>


    (No sé cómo se verán en IE 10.)

    ResponderEliminar
  2. Bueno, ya sé cómo se ve el primero en IE10 : ¡MAL!.
    Quise editar el código anterior, pero no adivino el método. Igual no creo que esté mal corregir en otro comentario.


    <html>
    <head>
    <meta http-equiv=Content-Type content="text/html; charset=utf-8">
    <title>ÍCONOS CSS.</title>
    <style type="text/css">
    /*para IE10 ; FF21 ; Chr27 ; Op12*/

    p {font-size: 2.5em; color: black; }

    .spanSeticon1 { display: inline-block;
    position: relative;
    margin: auto 1em;
    border-radius: 50%;
    border: .13em dotted black;
    width: .65em; height: .65em; }

    .spanSeticon1:before {content: "";
    margin: -.05em;
    border: .3em double black;
    border-radius: 50%;
    display: block;
    height: .15em; width: .15em; }

    @-moz-document url-prefix() {
    .spanSeticon1 {border-radius: 20%;
    border-width: .18em;
    width: .5em; height: .5em; }

    .spanSeticon1:before {margin: -.125em; }
    }

    </style>
    </head>
    <body>

    <p> <span class=spanSeticon1> </span> </p>

    </body>
    </html>


    Le puse otro hack para Mozilla (se sigue viendo raro), y se supone que anda en todos los que soporten el CSS.

    Por supuesto que no estoy agregando nada útil al artículo, pero no me gusta dejar cabos sueltos.

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap