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á:

menutron

Ver ejemplo en funcionamiento

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (6 votos, promedio: 5,00 de 5)
Cargando…
Comparte en las redes sociales

Una respuesta a “Menutron – Responsive menu con jQuery”

  1. jose dice:

    sabes como utilizar grupos con este menú, cuando anidas listas te crea grupos optgroup, necesito crear 3 grupos sabes como hacerlo.

    Gracias

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre