Néha nagyon nehéz kreatívan eltérő menüt létrehozni, ha nincs semmi jó ötleted vagy inspirációd. De ez a fajta probléma megoldható más inspiráló menütervek keresésével vagy eszközök segítségével. Ebben az ügyben, jQuery.Mmenu elég praktikus eszközként jön be.

A jQuery.Mmenu egy könnyen használható jQuery beépülő modul, amellyel mobilalkalmazások csúszó navigációs menüjét hozhatja létre webhelyén. Ez a sima kreatív menü szebb és tisztább felhasználói élményt nyújt.

Elkezdeni

A kezdéshez jQuery.Mmenu, lépjen a letöltési oldalra, és a beépülő modul automatikusan letöltődik. Ebben a bejegyzésben megpróbálunk egy alapmenüt felépíteni.

Csakúgy, mint a többi jQuery beépülő modul, ennek használatához tartalmaznia kell a szükséges függőségeket a webhelyhez. Ezek jQuery, jquery.mmenu.js és jquery.mmenu.css. A részlet a következő:

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

És ez elegendő egy alapmenü létrehozásához, minden funkcióval és stílussal. A fejlettebb és extra funkciókhoz további JS- és CSS-fájlt kell tartalmaznia.

Létrehozva A Menu

Hozzuk létre az alapmenüt, ahogy azt általában a nav, ul, li és a elemeket. Ebben a demóban egy vízszintes menüt hozunk létre, amelynek három almenüje és három almenüje van.

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

A fenti menübe beépítettük a navigációt egy menüazonosítóval, amely a jQuery.mmenu függvény hivatkozásaként fog szolgálni. Ezután hívja a plugin a … val javascript függvényt, és tartalmazza az azonosítót is.

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

Az LI címkében egy nevű osztályt láthat Selected, ez az osztály hasznos az alapértelmezett kiválasztott menü létrehozásához inicializáláskor. Felveheti saját osztályát is (pl active), de ügyeljen arra, hogy a konfigurációs szakaszban szerepeljen.

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

Ez a bővítmény automatikusan hozzáadta az almenüt záró és nyitó linkeket, így nem kell létrehoznunk őket. Az étlapunknak így kell kinéznie.

Következtetés

A jQuery.mmenu nagyszerű megoldást kínál a különféle menük minél egyszerűbb létrehozására. Még más interaktív elemeket is létrehozhat ezzel a beépülő modullal, például létrehozhat egy csúszó eszköztippet és értesítési sávot a mobil webhelyhez.

jQuery.Mmenu előzetes használatra is testreszabható. Létrehozhat például egy mobilhoz hasonló névjegylistát a webhelyén a témakiterjesztés, a kiegészítő (címkék, számlálók, fejléc, dragOpen és keresőmező) és a pozicionálás kombinálásával.

Ha megtaláltad a cikket Csúszó menü létrehozása egyszerűen a jQuery.mmenu használatával hasznos, kérjük, ossza meg barátaival. Találkozunk a következő bejegyzésekben. Kövesse driveria.net hogy megkapja a legújabb frissítéseket!