Como construir un menu sensible

En esta ocasión en tutoriales en linea mostraremos como construir un menú sensible con HTML5, con CSS3 y jаvascript. Los menús de navegación responsive, adaptativo, receptivos o sensible vienen en diferentes formas y tamaños, en este caso sera la navegación 'in-page'.

¿Qué es la navegación 'in-page'?

Dependiendo de su proyecto, un menú dinámico <select> puede no ser del todo apropiado, hay un debate masivo sobre cómo dirigir sus proyectos, así que abra la puerta a otra opción. La navegación en la página consiste básicamente en renovar el menú de manera tal que sea receptivo, pero también parece ser parte del diseño al tiempo que ofrece una increíble experiencia móvil y táctil. Digo que toca porque algunos menús ofrecen una buena experiencia móvil, pero la representación hace resaltar y, en cierto modo, frustra la experiencia. La experiencia móvil pretende ser rápida y eficiente, por lo que vamos a cortar la basura y construir algo que realmente ofrezca una solución.

La simplicidad es clave

No tiene sentido que sirva toneladas de jаvascript para ofrecer una solución de menú receptiva, especialmente con jQuery, ya que esto nos da algunas cosas de las que preocuparnos. El retraso de como el menú se expande y se colapsa y el rendimiento cuando se carga la página entre otras cosas...

Creando nuestro menú de escritorio en HTML

Vamos a desglosar los elementos HTML5 y creamos un menú limpio y básico:

<nav class="nav">
  <ul class="nav-list">
    <li class="nav-item"><a href="#">Inicio</a></li>
    <li class="nav-item"><a href="#">Acerca</a></li>
    <li class="nav-item"><a href="#">Servicios</a></li>
    <li class="nav-item"><a href="#">Portafolio</a></li>
    <li class="nav-item"><a href="#">Testimonios</a></li>
    <li class="nav-item"><a href="#">ar</a></li>
  </ul>
</nav>

Aquí hemos usado una buena convención de nomenclatura en nuestra navegación, lista desordenada y elementos dentro. Esto nos da una orientación CSS fácil y agradable.

Creando nuestro menú de escritorio en CSS

Lo guiaremos un poco en nuestro flujo de trabajo de respuesta, y dependiendo de su proyecto y de cómo esté configurando sus consultas de medios, esto puede ser ligeramente diferente.

Primero vamos a agregar algunos estilos básicos a la navegación:

.nav {
  position:relative;
  display:inline-block;
  font-size:14px;
  font-weight:900;
}
.nav-list {

}
.nav-item {
  float:left;
  *display:inline;
  zoom:1;
}
.nav-item a {
  display:block;
  padding:15px 20px;
  color:#FFF;
  background:#34495E;
}
.nav-item:first-child a {
  border-radius:5px 0 0 5px;
}
.nav-item:last-child a {
  border-radius:0 5px 5px 0;
}
.nav-item a:hover {
  background:#2C3E50;
}

Notarás que .nav tiene la propiedad 'display: inline-block', esto es así que se centraliza en la página para la demostración, y no es completamente necesario para la producción.


Esto establece una agradable navegación en color gris/azul profundo para que podamos trabajar en el escritorio. Hecho. Pero ahora necesitamos una navegación móvil.

Creando nuestro menú de escritorio en CSS3

Ahora que hemos establecido un punto básico para nuestra navegación, debemos pensar en dispositivos móviles y tablet. Nuestros elementos de navegación en el minuto están alineados entre sí, pero esto debe cambiar para dispositivos móviles.

Para lograr que la navegación se sitúe una encima de otra, debemos crear una nueva regla CSS utilizando consultas de medios, para indicar al navegador/dispositivo que cualquier iPad y bajo debe mostrar los elementos de navegación en la parte superior de cada uno: ¡apilados!

Esto no requiere mucha manipulación, pero hemos introducido una consulta de medios:

@media only screen and (min-width: 320px) and (max-width: 768px) {
  .nav {
    width:100%;
  }
  .nav-item {
    width:100%;
    float:none;
  }
}

Dependiendo del diseño de su proyecto, es posible que necesite usar diferentes consultas de medios, pero básicamente, esta consulta de medios nos evita deshacer/rehacer los estilos posteriores que necesitamos volver a aplicar. Le dice al navegador dos cosas; 1) cualquier estilo por encima de 320px, use estos estilos, y 2) no muestre estos estilos a nada por encima de 768px, que es algo más grande que el iPad. Este es un buen uso de las consultas de medios de CSS3 de ancho mínimo y ancho máximo, ya que puede lograr mucho con muy poco.

Lo que hace el CSS anterior es cambiar nuestros elementos de navegación en línea en elementos de ancho completo y apilados, justo lo que necesitamos.

Expandiendo y colapsando

Las navegaciones móviles están ahí para ahorrar espacio, así que no creo en mostrar la navegación completa (a menos que realmente tengas la habitación), prefiero mostrar el diseño y la funcionalidad del increíble menú, aunque con un jаvascript inteligente.

Primero debemos crear un elemento para hacer clic, que actuará como el popular enfoque de menú de "tres líneas" que es bastante icónico cuando se trata de s móviles, por lo que es una apuesta segura:

var mobile = document.createElement('div');
mobile.className = 'nav-mobile';
document.querySelector('.nav').appendChild(mobile);

Agradable y fácil, creamos un nuevo <div>, le damos 'nav-mobile' como el nombre de la clase (manteniendo nuestras convenciones de nomenclatura bajo control) y usando el querySelector para agregarlo. Es bastante seguro usar querySelector aquí como cualquier navegador que ita consultas de medios CSS3. Estoy bastante seguro de que itirá querySelector (incluso IE8).

Ahora necesitamos el estilo del icono pulsable:

.nav-mobile {
  display:none; /* Ocultar de los navegadores que no iten consultas de medios */
  cursor:pointer;
  position:absolute;
  top:0;
  right:0;
  background:#34495E url(../img/nav.svg) no-repeat center center;
  height:40px;
  width:40px;
  border-radius:5px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
}

Hemos agregado estos estilos en el área principal del CSS, no dentro de ninguna consulta de medios. Esto es para que el menú se pueda diseñar en el área principal de CSS y, literalmente, modificar dentro de nuestras consultas de medios para una fácil gestión. También nos beneficia de nuevo porque si tuviera que personalizarlo dentro de una consulta de medios, los navegadores más antiguos lo ignorarían, dejando el elemento sin estilo y colocado aleatoriamente, por lo que incluye 'display: none'; por defecto. Este método me ha parecido el mejor.

Usando un SVG nuevamente (la mayoría de los navegadores son bastante seguros de que itirán SVG y consultas de medios, así que vamos a usarlo) creamos un icono escalable de "tres líneas" Esto significa que no tenemos que hacer ninguna optimización adicional para las pantallas de retina.

Volviendo a nuestra consulta de medios, debemos indicarle que muestre nuestro icono móvil para nuestros anchos de ventana gráfica decididos:

@media only screen and (min-width: 320px) and (max-width: 768px) {
  .nav-mobile {
    display:block;
  }
}

Esto simplemente se lo muestra al . Pero ahora debemos ocultar nuestra lista desplegable que aún está a la vista, nuestra clase 'nav-list':

@media only screen and (min-width: 320px) and (max-width: 768px) {
  .nav-list {
    display:none;
  }
}

Obviamente, no usaría una consulta de medios por separado para cada uno aquí, pero puedes ver cómo funciona y dónde incluimos las declaraciones.

Ahora nuestro botón está visible, y nuestra lista de navegación está oculta, sigamos ...

Creando nuestro menú de escritorio con jаvascript

Aquí es donde nos ponemos más Heavy y hacemos que algunas cosas funcionen. Como mencioné anteriormente, jаvascript (sobrecargar dispositivos móviles/tablet) puede causar malos resultados al animar (¿94kb de jQuery alguien?), Así que mantengámoslo muy simple para obtener los mejores resultados.

Básicamente, quiero configurar un simple controlador de clics en el botón recién agregado y con estilo para que abra y cierre nuestra navegación cuando se haga clic. Para hacer esto, no voy a usar jQuery o técnicas de animación, para una experiencia realmente agradable (e instantánea), literalmente voy a cambiar los estilos de 'display: none;' para 'mostrar: bloque;', y luego volver a activarlo cuando se haga clic nuevamente.

Vomos a configurar un manejador de clics muy simple para alternar una nueva clase 'nav-active', pero primero necesito obtener algunas funciones de estilo jQuery 'toggleClass' y 'hasClass' de una publicación anterior:

// hasClass
function hasClass(elem, className) {
  return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
}

// toggleClass
function toggleClass(elem, className) {
  var newClass = ' ' + elem.className.replace(/[trn]/g, ' ') + ' ';
    if (hasClass(elem, className)) {
        while (newClass.indexOf(' ' + className + ' ') >= 0 ) {
            newClass = newClass.replace(' ' + className + ' ', ' ');
        }
        elem.className = newClass.replace(/^s+|s+$/g, '');
    } else {
        elem.className += ' ' + className;
    }
}

Luego usaré el método toggleClass en mi controlador onclick (usando nuevamente el querySelector para capturar los elementos):

var mobileNav = document.querySelector('.nav-mobile');
var toggle = document.querySelector('.nav-list');
mobileNav.onclick = function() {
  toggleClass(this, 'nav-mobile-open');
  toggleClass(toggle, 'nav-active');
}

Y eso es. El rendimiento de jаvascript y de dispositivos móviles es asombroso, sin retrasos ni interrupciones al abrir o cerrar el menú de navegación, y hemos creado con éxito una excelente base para extender un menú de navegación sensible para cualquier proyecto.

Lo mejor de los dispositivos móviles es que también interpretan el hover como un método táctil, lo que significa que si desea agregar capacidades de hover a otro menú anidado (al igual que un menú desplegable anidado secundario, puede utilizar los hover para mostrar el contenido anidado).

Aquí está el script completo para el tutoriales en linea:

(function () {

    // Create mobile element
    var mobile = document.createElement('div');
    mobile.className = 'nav-mobile';
    document.querySelector('.nav').appendChild(mobile);

    // hasClass
    function hasClass(elem, className) {
        return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
    }

    // toggleClass
    function toggleClass(elem, className) {
        var newClass = ' ' + elem.className.replace(/[trn]/g, ' ') + ' ';
        if (hasClass(elem, className)) {
            while (newClass.indexOf(' ' + className + ' ') >= 0) {
                newClass = newClass.replace(' ' + className + ' ', ' ');
            }
            elem.className = newClass.replace(/^s+|s+$/g, '');
        } else {
            elem.className += ' ' + className;
        }
    }

    // Mobile nav function
    var mobileNav = document.querySelector('.nav-mobile');
    var toggle = document.querySelector('.nav-list');
    mobileNav.onclick = function () {
        toggleClass(this, 'nav-mobile-open');
        toggleClass(toggle, 'nav-active');
    };
})();

Ver resultado de este Tutoriales En Linea.