Creatief verschillende menu’s maken is soms best moeilijk als je geen goed idee of inspiratie hebt. Maar dit soort zaken kunnen worden opgelost door te zoeken naar andere inspirerende menu-ontwerpen of met behulp van tools. In dit geval, jQuery.Mmenu komt binnen als een behoorlijk handig hulpmiddel.

jQuery.Mmenu is een gebruiksvriendelijke jQuery-plug-in voor het maken van een schuifmenu voor mobiele apps op uw website. Dit gelikte creatieve menu zorgt voor een mooiere en nettere gebruikerservaring.

Aan de slag

Om te beginnen met jQuery.Mmenu, ga dan naar de downloadpagina en de plug-in wordt automatisch gedownload. In dit bericht zullen we proberen een basismenu te bouwen.

Net als andere jQuery-plug-ins, moet u om deze te gebruiken de vereiste afhankelijkheden aan uw site toevoegen. Die zijn jQuery, jquery.mmenu.js en jquery.mmenu.css. Het fragment is als volgt:

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

En dat zou genoeg moeten zijn voor het maken van een basismenu met alle functionaliteiten en styling. Voor meer geavanceerde en extra functies moet u een extra JS- en CSS-bestand opnemen.

A . maken Menu

Laten we het basismenu maken zoals u het gewoonlijk maakt met de nav, ul, li en a elementen. In deze demo maken we een horizontaal menu met drie submenu’s en ook drie subsubmenu’s, zoals zo.

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

In het bovenstaande menu hebben we de nav opgenomen met een menu-id die zal worden gebruikt als de jQuery.mmenu-functiereferentie. Bel dan de plugin met de javascript functie en neem de id zo op.

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

In de LI-tag zie je een klasse met de naam Selected, deze klasse is handig om het standaard geselecteerde menu te maken bij initialisatie. Je kunt ook je eigen klas toevoegen (bijvoorbeeld active), maar zorg ervoor dat u het opneemt in de configuratiesectie, zoals zo.

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

Deze plug-in heeft automatisch de submenu’s voor het sluiten en openen van links toegevoegd, dus we hoeven ze niet te maken. Ons menu zou er zo uit moeten zien.

Conclusie

jQuery.mmenu biedt u een geweldige oplossing om verschillende menu’s zo eenvoudig mogelijk te maken. U kunt zelfs andere interactieve elementen maken met deze plug-in, u kunt bijvoorbeeld een schuifbare tooltip en een meldingsbalk maken voor een mobiele site.

jQuery.Mmenu kan ook worden aangepast voor gebruik vooraf. U kunt bijvoorbeeld een mobiel-achtige contactenlijst op uw site maken door de thema-extensie, add-on (labels, tellers, koptekst, dragOpen en zoekveld) en positionering te combineren.

Als je het artikel hebt gevonden Met gemak een schuifmenu maken met jQuery.mmenu nuttig, deel het met je vrienden. Tot ziens in de volgende berichten. Volgen driveria.net om de laatste updates te krijgen!