Créer un menu différent de manière créative est parfois assez difficile lorsque vous n’avez aucune bonne idée ou inspiration. Mais ce genre de problème peut être résolu en recherchant une autre conception de menu inspirante ou à l’aide d’outils. Dans cette affaire, jQuery.Mmenu se présente comme un outil assez pratique.

jQuery.Mmenu est un plugin jQuery facile à utiliser pour créer un menu de navigation coulissant d’application mobile sur votre site Web. Ce menu créatif élégant apportera une expérience utilisateur plus agréable et plus soignée.

Commencer

Pour commencer avec jQuery.Mmenu, rendez-vous sur la page de téléchargement et le plugin sera téléchargé automatiquement. Dans cet article, nous allons essayer de construire un menu de base.

Tout comme les autres plugins jQuery, pour l’utiliser, vous devez inclure les dépendances requises sur votre site. Ce sont jQuery, jquery.mmenu.js et jquery.mmenu.css. L’extrait est le suivant :

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

Et cela devrait suffire pour créer un menu de base avec toutes les fonctionnalités et le style. Pour les fonctionnalités plus avancées et supplémentaires, vous devez inclure un fichier JS et CSS supplémentaire.

Créer un Menu

Créons le menu de base comme vous le créez habituellement avec le nav, ul, li et a éléments. Dans cette démo, nous allons créer un menu horizontal qui a trois sous-menus et aussi trois sous-sous-menus, comme ça.

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

Dans le menu ci-dessus, nous avons inclus la navigation avec un identifiant de menu qui sera utilisé comme référence de fonction jQuery.mmenu. Appelez ensuite le plugin avec le javascript fonction et inclure l’id comme ça.

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

Dans la balise LI, vous pouvez voir une classe nommée Selected, cette classe est utile pour faire le menu sélectionné par défaut lors de l’initialisation. Vous pouvez également ajouter votre propre classe (par exemple active), mais assurez-vous de l’inclure dans la section de configuration, comme ceci.

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

Ce plugin a automatiquement ajouté les liens de fermeture et d’ouverture du sous-menu, nous n’avons donc pas besoin de les créer. Notre menu devrait ressembler à ceci.

Conclusion

jQuery.mmenu vous offre une excellente solution pour créer différents menus aussi facilement que possible. Vous pouvez même créer d’autres éléments interactifs avec ce plugin, par exemple, vous pouvez créer une info-bulle coulissante et une barre de notification pour le site mobile.

jQuery.Mmenu peut également être personnalisé pour une utilisation anticipée. Par exemple, vous pouvez créer une liste de contacts de type mobile dans votre site en combinant son extension de thèmes, son module complémentaire (étiquettes, compteurs, en-tête, glisserOuvrir et champ de recherche) et son positionnement.

Si vous avez trouvé l’article Créer facilement un menu coulissant à l’aide de jQuery.mmenu utile, partagez-le avec vos amis. Rendez-vous dans les prochains articles. Suivre driveria.net pour obtenir les dernières mises à jour !