Menutron – Responsive menu con jQuery

Menutron es un plugin jQuery que a partir de un ancho máximo te convierte una lista desordenada de elementos (menú) por un selector de elementos (dropdown).

En el ejemplo que vamos a ilustrar hemos programado un menú sencillo con listas desordenadas:

<nav id="menu">
  <ul>
    <li><a href="https://www.jose-aguilar.com/scripts/jquery/menutron/">Inicio</a></li>
    <li><a href="https://www.jose-aguilar.com/scripts/jquery/menutron/">Servicios</a></li>
    <li><a href="https://www.jose-aguilar.com/scripts/jquery/menutron/">Productos</a></li>
    <li><a href="https://www.jose-aguilar.com/scripts/jquery/menutron/">Blog</a></li>
    <li><a href="https://www.jose-aguilar.com/scripts/jquery/menutron/">Contacto</a></li>
  </ul>
</nav>

Y después en la cabecera de la página hemos añadido la librería jQuery, el plugin menutron y su llamada.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jQuery.menutron.js"></script>
<script type="text/javascript">
$(function(){
    $("nav#menu").menutron({
        maxScreenWidth: 480,
          menuTitle: 'Menú Principal'
    });
});
</script>

En la llamada le estamos indicando mediante parámetros el ancho a partir del cual se mostrará un select o dropdown en vez de una lista desordenada y el título que aparecerá:

Ver ejemplo en funcionamiento