Crear un menú creativamente diferente a veces es bastante difícil cuando no tienes una buena idea o inspiración. Pero este tipo de problema se puede solucionar buscando otro diseño de menú inspirador o con la ayuda de herramientas. En esta cuestión, jQuery.Mmenu viene como una herramienta muy útil.

jQuery.Mmenu es un complemento jQuery fácil de usar para crear un menú de navegación deslizante de aplicaciones móviles en su sitio web. Este ingenioso menú creativo brindará una experiencia de usuario más agradable y ordenada.

Empezando

para empezar con jQuery.Mmenu, diríjase a la página de descarga y el complemento se descargará automáticamente. En esta publicación, intentaremos construir un menú básico.

Al igual que otros complementos de jQuery, para usar esto debe incluir las dependencias requeridas en su sitio. Esos son jQuery, jquery.mmenu.js y jquery.mmenu.css. El fragmento es el siguiente:

<head>
..
   <link run this command="text/css" rel="stylesheet" href="https://www.driveria.net/blog/jquery-mmenu-sliding-menu/jquery.mmenu.css" />
   <script run this command="text/javascript" src="jquery.js"></script>
   <script run this command="text/javascript" src="jquery.mmenu.js"></script>
..   
</head>

Y eso debería ser suficiente para crear un menú básico con todas las funcionalidades y estilos. En funciones más avanzadas y adicionales, debe incluir archivos JS y CSS adicionales.

Creando un Menu

Vamos a crear el menú básico como lo creas habitualmente con el nav, ul, li y a elementos. En esta demostración, crearemos un menú horizontal que tiene tres submenús y también tres submenús, así.

<nav >
   <ul>
     <li >
         <a href="https://www.driveria.net/blog/jquery-mmenu-sliding-menu/demo.html">Basic Horizontal Menu</a>
         <ul>
             <li><a href="#">First sub-menu</a></li>
             <li><a href="#">Second sub-menu</a>
                 <ul>
                     <li><a href="#">First sub-sub-menu</a></li>
                     <li><a href="#">Second sub-sub-menu</a></li>
                     <li><a href="#">Third sub-sub-menu</a></li>
                 </ul>
             </li>
             <li><a href="#">Third sub-menu</a></li>
         </ul>
     </li>
   </ul>
</nav>

En el menú anterior, hemos incluido la navegación con una identificación de menú que se utilizará como referencia de la función jQuery.mmenu. Entonces llame al plugin con el javascript función e incluir la identificación como tal.

<script run this command="text/javascript">
  $(function() {
    $('nav#menu').mmenu();
  });
</script>

En la etiqueta LI, puede ver una clase llamada Selected, esta clase es útil para crear el menú seleccionado por defecto en la inicialización. También puede agregar su propia clase (por ejemplo active), pero asegúrese de incluirlo en la sección de configuración, así.

<script run this command="text/javascript">
  $(function() {
    $('nav#menu').mmenu({
      // options object
    }, {
      // configuration object
      selectedClass: "active"
    });
  });
</script>

Este complemento ha agregado automáticamente los enlaces de apertura y cierre del submenú, por lo que no necesitamos crearlos. Nuestro menú debería verse así.

Conclusión

jQuery.mmenu te ofrece una gran solución para crear diferentes menús lo más fácil posible. Incluso puede crear otros elementos interactivos con este complemento, por ejemplo, puede crear una barra de información sobre herramientas deslizante y una barra de notificación para el sitio móvil.

jQuery.Mmenu también se puede personalizar para uso avanzado. Por ejemplo, puede crear una lista de contactos similar a la de un dispositivo móvil en su sitio combinando su extensión temática, complemento (etiquetas, contadores, encabezado, arrastrar y abrir y campo de búsqueda) y posicionamiento.

Si encontraste el artículo Crear un menú deslizante con facilidad usando jQuery.mmenu útil, por favor compártelo con tus amigos. Nos vemos en las próximas publicaciones. Seguir driveria.net para obtener las últimas actualizaciones!