Att skapa en kreativ annorlunda meny ibland är ganska svårt när du inte har någon bra idé eller inspiration. Men den här typen av problem kan fixas genom att söka efter annan inspirerande menydesign eller med hjälp av verktyg. I den här frågan, jQuery.Mmenu kommer in som ett ganska praktiskt verktyg.

jQuery.Mmenu är ett lättanvänt jQuery-plugin för att skapa en glidande navigeringsmeny för mobilappar på din webbplats. Denna snygga kreativa meny kommer att ge en trevligare och snyggare användarupplevelse.

Komma igång

Att komma igång med jQuery.Mmenu, gå över till nedladdningssidan och plugin kommer att laddas ner automatiskt. I det här inlägget ska vi försöka bygga en grundläggande meny.

Precis som andra jQuery-plugins, för att använda detta måste du inkludera de nödvändiga beroenden till din webbplats. De är jQuery, jquery.mmenu.js och jquery.mmenu.css. Utdraget är som följer:

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

Och det borde räcka för att skapa en grundläggande meny med alla funktioner och styling. På mer avancerade och extra funktioner måste du inkludera ytterligare JS- och CSS-filer.

Skapar A Menu

Låt oss skapa den grundläggande menyn som du vanligtvis skapar den med nav, ul, li och a element. I den här demon kommer vi att skapa en horisontell meny som har tre undermenyer och även tre undermenyer, som så.

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

I menyn ovan har vi inkluderat nav med ett meny-id som kommer att användas som jQuery.mmenu funktionsreferens. Ring sedan till plugin med javascript funktion och inkludera id som så.

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

I LI-taggen kan du se en klass som heter Selected, den här klassen är användbar för att göra den standardvalda menyn vid initiering. Du kan också lägga till din egen klass (till exempel active), men se till att inkludera det i konfigurationssektionen, som så.

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

Denna plugin har automatiskt lagt till undermenyns stängnings- och öppningslänkar, så vi behöver inte skapa dem. Vår meny ska se ut så här.

Slutsats

jQuery.mmenu erbjuder dig en bra lösning för att skapa olika menyer så enkelt som möjligt. Du kan till och med skapa andra interaktiva element detta plugin, till exempel kan du skapa ett glidande verktygstips och meddelandefält för mobilwebbplatsen.

jQuery.Mmenu kan också anpassas för förhandsanvändning. Till exempel kan du skapa en mobilliknande kontaktlista på din webbplats genom att kombinera dess temantillägg, tillägg (etiketter, räknare, rubrik, dragOpen och sökfält) och positionering.

Om du hittade artikeln Skapa en glidmeny med enkelhet med hjälp av jQuery.mmenu användbar, vänligen dela den med dina vänner. Vi ses i nästa inlägg. Följ driveria.net för att få de senaste uppdateringarna!