Luovasti erilaisen ruokalistan luominen on joskus melko vaikeaa, kun sinulla ei ole mitään hyvää ideaa tai inspiraatiota. Mutta tällainen asia voidaan korjata etsimällä muuta inspiroivaa menusuunnittelua tai työkalujen avulla. Tässä asiassa, jQuery.Mmenu tulee varsin kätevänä työkaluna.

jQuery.Mmenu on helppokäyttöinen jQuery-laajennus mobiilisovelluksen liukuvan navigointivalikon luomiseen verkkosivustollesi. Tämä sulava luova valikko tuo mukavamman ja siistimmän käyttökokemuksen.

Päästä alkuun

Aloitaksesi jQuery.Mmenu, siirry lataussivulle ja laajennus latautuu automaattisesti. Tässä viestissä yritämme rakentaa perusmenun.

Kuten muutkin jQuery-laajennukset, sinun on sisällytettävä sivustoosi tarvittavat riippuvuudet, jotta voit käyttää tätä. Nuo ovat jQuery, jquery.mmenu.js ja jquery.mmenu.css. Katkelma on seuraava:

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

Ja sen pitäisi riittää perusvalikon luomiseen kaikilla toiminnoilla ja tyylillä. Edistyneemmille ja lisäominaisuuksille sinun on sisällytettävä ylimääräinen JS- ja CSS-tiedosto.

Luodaan A Menu

Luodaan perusvalikko, kuten yleensä luot sen kanssa nav, ul, li ja a elementtejä. Tässä esittelyssä luomme vaakasuuntaisen valikon, jossa on kolme alivalikkoa ja myös kolme alivalikkoa.

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

Yllä olevaan valikkoon olemme lisänneet navin ja valikkotunnuksen, jota käytetään jQuery.mmenu-funktion viitteenä. Soita sitten plugin kanssa javascript funktio ja sisällytä tunnus niin.

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

LI-tunnisteessa näet luokan nimeltä Selected, tämä luokka on hyödyllinen, kun haluat tehdä oletusvalikon alustuksen yhteydessä. Voit myös lisätä oman luokan (esim active), mutta muista sisällyttää se määritysosioon.

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

Tämä laajennus on lisännyt automaattisesti alivalikon sulkemis- ja avauslinkit, joten meidän ei tarvitse luoda niitä. Ruokalistamme pitäisi näyttää tältä.

Johtopäätös

jQuery.mmenu tarjoaa sinulle loistavan ratkaisun erilaisten valikkojen luomiseen mahdollisimman helposti. Voit jopa luoda muita interaktiivisia elementtejä tällä laajennuksella, esimerkiksi voit luoda liukuvan työkaluvihjeen ja ilmoituspalkin mobiilisivustolle.

jQuery.Mmenu voidaan mukauttaa myös ennakkokäyttöön. Voit esimerkiksi luoda sivustollesi mobiilimaisen yhteystietoluettelon yhdistämällä sen teemalaajennuksen, lisäyksen (tunnisteet, laskurit, otsikko, dragOpen ja hakukenttä) ja sijoittelun.

Jos löysit artikkelin Liukuvan valikon luominen helposti käyttämällä jQuery.mmenua hyödyllistä, jaa se ystäviesi kanssa. Nähdään seuraavissa postauksissa. Seuraa driveria.net saadaksesi viimeisimmät päivitykset!