Å lage en kreativ annerledes meny er noen ganger ganske vanskelig når du ikke har noen god idé eller inspirasjon. Men denne typen saker kan løses ved å søke i annen inspirerende menydesign eller ved hjelp av verktøy. I denne saken, jQuery.Mmenu kommer inn som et ganske praktisk verktøy.

jQuery.Mmenu er en brukervennlig jQuery-plugin for å lage en glidende navigasjonsmeny for mobilapper på nettstedet ditt. Denne glatte kreative menyen vil gi en bedre og ryddig brukeropplevelse.

Starter

Til å komme i gang med jQuery.Mmenu, gå over til nedlastingssiden og plugin-en lastes ned automatisk. I dette innlegget skal vi prøve å bygge en grunnleggende meny.

Akkurat som andre jQuery-plugins, for å bruke dette må du inkludere de nødvendige avhengighetene til nettstedet ditt. Det er de jQuery, jquery.mmenu.js og jquery.mmenu.css. Utdraget er som følger:

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

Og det burde være nok til å lage en grunnleggende meny med alle funksjoner og styling. På mer avanserte og ekstra funksjoner må du inkludere ytterligere JS- og CSS-fil.

Oppretter A Menu

La oss lage den grunnleggende menyen slik du vanligvis lager den med nav, ul, li og a elementer. I denne demoen vil vi lage en horisontal meny som har tre undermenyer og også tre underundermenyer, 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 menyen ovenfor har vi inkludert nav med en meny-ID som vil bli brukt som jQuery.mmenu funksjonsreferanse. Ring deretter plugin med javascript funksjon og ta med id-en slik.

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

I LI-taggen kan du se en klasse som heter Selected, er denne klassen nyttig for å lage standard valgt meny ved initialisering. Du kan også legge til din egen klasse (for eksempel active), men sørg for å inkludere den i konfigurasjonsseksjonen, som så.

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

Denne plugin-modulen har automatisk lagt til undermenyen for lukking og åpning, så vi trenger ikke å opprette dem. Menyen vår skal se slik ut.

Konklusjon

jQuery.mmenu tilbyr deg en flott løsning for å lage forskjellige menyer så enkelt som mulig. Du kan til og med lage andre interaktive elementer denne plugin-en, for eksempel kan du lage et glidende verktøytips og varslingslinje for mobilnettstedet.

jQuery.Mmenu kan også tilpasses for forhåndsbruk. For eksempel kan du opprette en mobillignende kontaktliste på nettstedet ditt ved å kombinere temautvidelsen, tillegget (etiketter, tellere, overskrift, dragOpen og søkefelt) og plassering.

Hvis du fant artikkelen Lage en skyvemeny med enkelhet ved å bruke jQuery.mmenu nyttig, del det med vennene dine. Vi sees i de neste innleggene. Følg driveria.net for å få de siste oppdateringene!