Navegación desplegable adaptable con un menú de hamburguesas

Bootstrap tienen barras de navegación fantásticas que puedes usar si eliges basar tu diseño en su marco. Para mis propios proyectos, elegí hacer una barra de navegación desplegable adaptable  con un menú de hamburguesas animado. La navegación se basa en Sass, es adaptable y requiere muy poca jQuery.

Hay mucho que se necesita para construir una barra de navegación como esta, así que repasaré los detalles. Los marcos son excelentes, pero creo que es una gran idea para cada desarrollador crear su propia navegación en algún momento para comprender cómo funciona.

HTML

Empecemos por el menú en sí. Es una lista regular, envuelta en una etiqueta nav.

<nav>
  <div class="nav-mobile">
    <a id="nav-toggle" href="#!"><span></span></a>
  </div>
  <ul class="nav-list">
    <li><a href="#!">Inicio</a></li>
    <li><a href="#!">Sobre nosotros</a></li>
    <li>
      <a href="#!">Servicios</a>
      <ul class="nav-dropdown">
        <li><a href="#!">Diseño web</a></li>
        <li><a href="#!">Desarrollo web</a></li>
        <li><a href="#!">Diseño gráfico</a></li>
      </ul>
    </li>
    <li><a href="#!">Precios</a></li>
    <li><a href="#!">Contactar</a></li>
  </ul>
</nav>

Una lista sin estilo aplicado. Todo en la clase nav-mobile no aparecerá hasta que comencemos a trabajar en la vista de dispositivo pequeño. La configuración de los enlaces #! asegurará que no se realice ninguna acción al hacer clic.

SCSS

Hay muchas enlaces en estas barras de navegación, y podemos evitar la repetición en el código con Sass. Además, las variables mejorarán drásticamente la facilidad de personalización del color y el tamaño.

Primero, se establecerá algunas variables.

$content-width: 1000px;
$breakpoint: 799px;
$nav-height: 70px;
$nav-background: #262626;
$nav-font-color: #ffffff;
$link-hover-color: #2581dc;

$ content-width será el ancho máximo del contenido dentro de la barra de navegación. $ breakpoint determina a qué ancho entrará en vigencia el punto de interrupción de la consulta de medios. Obviamente las variables nombradas se crean para el tamaño y los colores.

El esqueleto de sass

nav {
  ul {
    li {
      a {
        &:hover {
        }
        &:not(:only-child):after {
        }
      } // Dropdown list
      ul li {
        a {
        }
      }
    }
  }
}

Ahora comenzamos a completarlo. Flotaremos todo el navegador hacia la derecha, eliminaremos los puntos de viñeta de la lista y cualquier relleno predeterminado del navegador.

nav {
  float: right;
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
}

Ahora flotamos los elementos de la lista a la izquierda y diseñamos la etiqueta a. El li se establecerá en positión:relative, que todavía no hace nada, pero se explicará unos pasos más abajo.

li {
  float: left;
  position: relative;
  a {
    display: block;
    padding: 0 20px;
    line-height: $nav-height;
    background: $nav-background;
    color: $nav-font-color;
    text-decoration: none;
  }
}

Establecí la etiqueta a anidada en display:blockcon un poco de relleno, y le di nuestros colores previamente determinados. Esta es una barra de navegación oscura, pero puede revertir fácilmente los colores para una barra de navegación clara.

a {
  &:hover {
    background: $link-hover-color;
    color: $nav-font-color;
  }
  &:not(:only-child):after {
  padding-left: 4px;
  content: ' ▾';
}

El desplazamiento es simple: solo estoy cambiando el color de fondo de toda una etiqueta. A continuación, tenemos algunos CSS3 bastante interesantes.

&:not(:only-child):after

La ruta completa de este código es nav ul li a:not(:only-child):after. Esto significa que el código se aplicará a cualquier etiqueta a de nuestra lista de nav que NO sea un hijo único, también conocido como cualquier menú desplegable. El medio :after significa que viene después de la salida de la etiqueta. Decidí que para especificar cualquier elemento de navegación como un menú desplegable, irá seguido de una flecha Unicode - ▾ (# 9662).

} // Dropdown list
  ul li {
    min-width: 190px;
    a {
      padding: 15px;
      line-height: 20px;
    }

Un poco de estilo se aplica a los ul. Le he dado a li un ancho mínimo para que el ancho del menú desplegable no varíe según el contenido. He cambiado el relleno y la altura de la línea del menú desplegable a, porque el estilo cae en cascada desde el padre.

Posicionamiento

El posicionamiento absoluto y relativo elimina elementos del flujo normal del documento. Learn CSS Layout tiene una explicación muy buena y sencilla de cómo funciona el posicionamiento. La parte importante que debe recordar para este menú desplegable es que un  elemento en position:absolute se colocará en relación con un elemento en position: relative. Puede pensar que el elemento absoluto está anidado dentro del elemento relativo.

Ya configuramos el li a position: relative anterior. Ahora vamos a agregar una nueva clase, absolutamente posicionada. z-index: 1garantiza que el menú desplegable se mostrará encima de cualquier contenido. Y agregué un cuadro de sombra, como es estándar para los menús desplegables.

.nav-dropdown {
  position: absolute;
  z-index: 1;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}

Añadir display: none; para que podamos cambiarlo más tarde con jаvascript.

jQuery

Comenzaremos añadiendo jQuery.

;(function($) {
  // Begin jQuery
})(jQuery)

Y dile a la función que se ejecute en el DOM.

;(function($) {
  $(function() {
    // DOM Ready
    // Insert all scripts here
  })
})(jQuery)

Activar el menú desplegable es extremadamente simple. He ideado este método específico, y no lo he visto usado en ningún otro menú desplegable, y parece funcionar bastante bien. Voy a apuntar a cualquiera a en el menú que tenga hijos, y alternar la clase .nav-dropdown.

$('nav ul li > a:not(:only-child)').click(function(e) {
  $(this)
    .siblings('.nav-dropdown')
    .toggle()
})

• Cuando nav ul li > a:not(:only-child) se hace clic en la ruta CSS...
• Alternar (cambiar la propiedad display) esa clase específica nav-dropdown.

$(this) especifica que solo se dirige a aquello en lo que se hizo clic, y no a todas las instancias de esa ruta CSS.

Pero para que es eso (e)? Si tiene dos menús desplegables en la navegación y hace clic en ambos, ambos se abren. Queremos evitar ese comportamiento y forzar que solo se abra un desplegable a la vez. Dentro de esa misma función, agregue:

$('.nav-dropdown')
  .not($(this).siblings())
  .hide()
e.stopPropagation()

Esto oculta todos los menús desplegables e stopPropagation(); impide que se lleve a cabo esa acción. Lo adjuntamos e y lo colocamos e en la función.

Hay una cosa más: quiero que el menú desplegable se oculte si hago clic fuera de él en cualquier momento. Lo ocultaremos configurando una función de clic en la etiqueta completa html.

$('html').click(function() {
  $('.nav-dropdown').hide()
})

Aquí está toda la jQuery hasta ahora.

;(function($) {
  $(function() {
    $('nav ul li > a:not(:only-child)').click(function(e) {
      $(this)
        .siblings('.nav-dropdown')
        .toggle()
      $('.nav-dropdown')
        .not($(this).siblings())
        .hide()
      e.stopPropagation()
    })
    $('html').click(function() {
      $('.nav-dropdown').hide()
    })
  })
})(jQuery)

Móvil

Ahora tenemos un menú desplegable totalmente funcional. El siguiente paso es convertirlo en un menú de "hamburguesa" en el colapso móvil. Vamos a crear un cuadrado en la parte superior derecha de la pantalla donde vivirá la hamburguesa.

.nav-mobile {
  //display: none;
  position: absolute;
  top: 0;
  right: 0;
  background: $nav-background;
  height: $nav-height;
  width: $nav-height;
}

Crear una consulta de medios basada en el punto de interrupción móvil.

@media only screen and (max-width: $breakpoint) {
  // Insert all mobile styles here
}

Por ahora, esconderemos ul y trabajaremos en la hamburguesa.

nav {
  ul {
    display: none;
  }
}

Elijah Manor creó un gran ícono de hamburguesa animado CSS, y vamos a usar ese método. Puedes leer su tutorial para aprender más sobre cómo funciona esto. Por mi parte, lo condensé para Sass.

El concepto detrás de cómo funciona es que una clase span en el id #nav-toggle tiene una :before y una :after. El intervalo se muestra como un elemento de nivel de bloque delgado y ancho que parece una línea. El antes y el después suben y bajan la línea, creando tres líneas.

Finalmente, el jQuery entra y agrega una clase .active al intervalo, que gira el :before y :after, creando una X.

#nav-toggle {
  position: absolute;
  left: 18px;
  top: 22px;
  cursor: pointer;
  padding: 10px 35px 16px 0px;
  span,
  span:before,
  span:after {
    cursor: pointer;
    border-radius: 1px;
    height: 5px;
    width: 35px;
    background: $nav-font-color;
    position: absolute;
    display: block;
    content: '';
    transition: all 300ms ease-in-out;
  }
  span:before {
    top: -10px;
  }
  span:after {
    bottom: -10px;
  }
  &.active span {
    background-color: transparent;
    &:before,
    &:after {
      top: 0;
    }
    &:before {
      transform: rotate(45deg);
    }
    &:after {
      transform: rotate(-45deg);
    }
  }
}

Alternar el lapso .active.

$('#nav-toggle').on('click', function() {
  this.classList.toggle('active')
})

La adición final a nuestro código jQuery activará el clic nav ulal hacer clic.

$('#nav-toggle').click(function() {
  $('nav ul').toggle()
})

¡Perfecto! La hamburguesa alterna el menú. Nuestra funcionalidad jQuery está completa.

La barra de navegación

Vuelva a su HTML desde el principio del tutorial. Envuelva todo nav en este código.

<section class="navigation">
  <div class="nav-container">
    <div class="brand">
      <a href="#!">Logo</a>
    </div>
    <!-- <nav></nav> -->
  </div>
</section>

Hay tres capas en este código:

.navigation- La envoltura exterior para la barra de navegación. Especifica la altura y el color, y estirará el ancho completo de la ventana gráfica.

.navigation {
  height: $nav-height;
  background: $nav-background;
}

.nav-container- La envoltura interior para la barra de navegación. Define hasta qué punto el contenido real debe extenderse.

.nav-container {
  max-width: $content-width;
  margin: 0 auto;
}

.brand - dentro .navigation y .nav-container, hay dos columnas - .brand en el lado izquierdo y  nav en el derecho. Lo primero que hice con la lista de navegación fue flotar a la derecha. La mayor parte de esto es solo estilo; La parte importante es el posicionamiento absoluto y el flotador izquierdo.

.brand {
  position: absolute;
  padding-left: 20px;
  float: left;
  line-height: $nav-height;
  text-transform: uppercase;
  font-size: 1.4em;
  a,
  a:visited {
    color: $nav-font-color;
    text-decoration: none;
  }
}

Y ese es el final de este tutorial! Si no quería leer nada de eso, aquí tiene los tres aspectos completos y completamente funcionales: HTML, SCSS y JS. Si no usa Sass y solo quiere el CSS, puede convertirlo muy fácilmente a CSS.

Aqui esta en CSS3

@charset "UTF-8";
.navigation {
  height: 70px;
  background: #262626;
}

.brand {
  position: absolute;
  padding-left: 20px;
  float: left;
  line-height: 70px;
  text-transform: uppercase;
  font-size: 1.4em;
}
.brand a,
.brand a:visited {
  color: #ffffff;
  text-decoration: none;
}

.nav-container {
  max-width: 1000px;
  margin: 0 auto;
}

nav {
  float: right;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav ul li {
  float: left;
  position: relative;
}
nav ul li a,
nav ul li a:visited {
  display: block;
  padding: 0 20px;
  line-height: 70px;
  background: #262626;
  color: #ffffff;
  text-decoration: none;
}
nav ul li a:hover,
nav ul li a:visited:hover {
  background: #2581DC;
  color: #ffffff;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
  padding-left: 4px;
  content: " ▾";
}
nav ul li ul li {
  min-width: 190px;
}
nav ul li ul li a {
  padding: 15px;
  line-height: 20px;
}

.nav-dropdown {
  position: absolute;
  display: none;
  z-index: 1;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}

/* Mobile navigation */
.nav-mobile {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  background: #262626;
  height: 70px;
  width: 70px;
}

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

  nav {
    width: 100%;
    padding: 70px 0 15px;
  }
  nav ul {
    display: none;
  }
  nav ul li {
    float: none;
  }
  nav ul li a {
    padding: 15px;
    line-height: 20px;
  }
  nav ul li ul li a {
    padding-left: 30px;
  }

  .nav-dropdown {
    position: static;
  }
}
@media screen and (min-width: 799px) {
  .nav-list {
    display: block !important;
  }
}
#nav-toggle {
  position: absolute;
  left: 18px;
  top: 22px;
  cursor: pointer;
  padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background: #ffffff;
  position: absolute;
  display: block;
  content: "";
  transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
  top: -10px;
}
#nav-toggle span:after {
  bottom: -10px;
}
#nav-toggle.active span {
  background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
  top: 0;
}
#nav-toggle.active span:before {
  transform: rotate(45deg);
}
#nav-toggle.active span:after {
  transform: rotate(-45deg);
}

article {
  max-width: 1000px;
  margin: 0 auto;
  padding: 10px;
}

Ver demostración