Estamos trabajando en algo propio llamado KODOTI. Click para unirte
Se viene KODOTI. Únete

Menu Responsive con jQuery

Vamos a enseñar en esta entrada como crear un menu responsivo de manera muy práctica.

Rodríguez Patiño, Eduardo
5,878 lecturas
Rodríguez Patiño, Eduardo
Hemos migrado hace poco nuestras publicaciones del blog antiguo. Si crees que esta se encuentra incompleta o sin coherencia deja un comentario para restaurarla manualmente.

Para nuestro querido menu responsivo lo que hemos hecho es maquetar el siguiente html list.

Nuestro HMTL

<ul id="menu">
   <li class="logo">
        <i id="btn-abrir-menu" class="fa fa-bars"></i>
        <a href="#">Mi Logo</a>
    </li>
    <li>
        <a href="#">Menu 1</a>
    </li>
    <li>
        <a href="#">Menu 2</a>
    </li>
    <li>
        <a href="#">Menu 3</a>
    </li>
</ul>

Nuestro CSS

Ahora necesitamos darle reglas de estilo, lo que yo hago es tratar a nuestro UL como si fuera una tabla, y sus LI como si fueran celdas de esta manera le daremos la orientación horizontal.

#menu {display:table;padding:0;margin:0;width:100%;font-size:16px;font-family:arial;}
#menu li{display:table-cell;text-align:center;background:#ddd;}
#menu li a{padding:8px;display:block;}
#menu li.logo{width:200px;background:#222;}
#menu li.logo a{color:#eee;}

Muy bien, ahora necesitamos un boton el cual estara oculto justo en nuestro LI que contiene la clase .logo, usando fontawesome se daran cuenta que en nuestro li.logo tenemos una etiqueta de hipervinculo y una que hace referencia a clase fa fa-bars. La cual lo que hace es mostrar ícono en forma de barras.

Por si no se dieron cuenta copio el código otra ves.

<li class="logo">  <i id="btn-abrir-menu" class="fa fa-bars"></i>  <a href="#">Mi Logo</a></li>

Ahora vamos a darle reglas de estilo a nuestro boton #btn-abrir-menu

#btn-abrir-menu{float:right;display:none;font-size:28px;margin-right:5px;margin-top:4px;color:#eee;}

Con estas reglas que le hemos dado le decimos que se vaya a la derecha, que aparesca oculto por defecto y otras reglas más que son bastantes entendibles si sabes CSS.

Los Queries Media

Ahora aquí entra nuestros queries media la cual nos permitira aplicar una regla de estilo en base a la resolución del navegador.

@media (max-width: 740px){
  #btn-abrir-menu{display:block;}
  #menu {display:table;}
  #menu li{display:none;border-bottom:1px solid #ccc;}
  #menu li a{padding:8px;display:block;}
  #menu li.open{display:block;}
  #menu li.logo{display:block;width:100%;text-align:left;}
}

Como veran cuando la resolución sea menor o igual a 740px estas reglas se aplicaran cambiando completamente la presentación de nuestro menu, ahora el menu se volvera vertical, y solo estara visible el boton y la etiqueta li.logo.

Viewport

Para activar el menu responsivo en nuestros dispositivos móviles tenemos que agregar el meta de viewport, con esto les definimos que la web se mantenga siempre del tamaño del dispositivo que lo contiene, ya que del caso contrario veríamos la web tal como se ve en una PC. Esta etiqueta debe estar dentro de las cabeceras header

Como notaran tenemos una clase más llamada .open, esta clase la agregare mediante jquery para abrir los menus ocultos cuando haga click en el botón.

jQuery

Finalmente, nuestro código jQuery es el siguiente:

$(document).ready(function(){
    $("#btn-abrir-menu").click(function(){
        if($(this).hasClass('open')){
            $(this).removeClass('open');
            $("#menu li:not(.logo)").removeClass('open');
        }
        else{
            $(this).addClass('open');
            $("#menu li:not(.logo)").addClass('open');
        }
    })
})

El algoritmo es sencillo, le decimos que cuando se haga click en el boton preguntara si tiene la clase OPEN, si tiene la clase open entonces removera a todos los LI excepto al que contiene la clase .logo la clase .open, en caso contrario agregará la clase .open.

Y es así como nuestro menu se abre.

¿Te gustó nuestra publicación?
Suscríbete a nuestro boletín