At skabe en kreativ anderledes menu er nogle gange ret svært, når du ikke har nogen god idé eller inspiration. Men denne form for sag kan løses ved at søge i andet inspirerende menudesign eller ved hjælp af værktøjer. I denne sag, jQuery.Mmenu kommer ind som et ret praktisk værktøj.

jQuery.Mmenu er et letanvendeligt jQuery-plugin til at skabe mobilapps glidende navigationsmenu på dit websted. Denne smarte kreative menu vil give en pænere og pænere brugeroplevelse.

Kom godt i gang

Til at komme i gang med jQuery.Mmenu, gå over til downloadsiden, og plugin’et downloades automatisk. I dette indlæg vil vi forsøge at bygge en grundlæggende menu.

Ligesom andre jQuery-plugins, for at bruge dette skal du inkludere de nødvendige afhængigheder til dit websted. De er jQuery, jquery.mmenu.js og jquery.mmenu.css. Uddraget 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 at skabe en basismenu med alle funktioner og styling. På mere avancerede og ekstra funktioner skal du inkludere yderligere JS- og CSS-fil.

Oprettelse af A Menu

Lad os oprette den grundlæggende menu, som du normalt opretter den med nav, ul, li og a elementer. I denne demo vil vi oprette en horisontal menu, der har tre undermenuer og også tre undermenuer, som sådan.

<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 ovenstående menu har vi inkluderet nav med et menu-id, som vil blive brugt som jQuery.mmenu-funktionsreference. Så ring til plugin med javascript funktion og inkludere id’et sådan.

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

I LI-tagget kan du se en klasse navngivet Selected, denne klasse er nyttig til at lave standardmenuen ved initialisering. Du kan også tilføje din egen klasse (f.eks active), men sørg for at inkludere det i konfigurationssektionen, som sådan.

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

Dette plugin har automatisk tilføjet undermenuen til at lukke og åbne links, så vi behøver ikke oprette dem. Vores menu skal se sådan ud.

Konklusion

jQuery.mmenu tilbyder dig en fantastisk løsning til at skabe forskellige menuer så nemt som muligt. Du kan endda oprette andre interaktive elementer dette plugin, for eksempel kan du oprette et glidende værktøjstip og meddelelseslinje til mobilwebstedet.

jQuery.Mmenu kan også tilpasses til forudgående brug. For eksempel kan du oprette en mobillignende kontaktliste på dit websted ved at kombinere dens temaudvidelse, tilføjelse (etiketter, tællere, overskrift, træk Åbn og søgefelt) og positionering.

Hvis du fandt artiklen Oprettelse af glidende menu med lethed ved hjælp af jQuery.mmenu nyttigt, del det gerne med dine venner. Vi ses i de næste indlæg. Følge efter driveria.net for at få de seneste opdateringer!