Vytvoriť kreatívne odlišné menu je niekedy dosť ťažké, keď nemáte žiadny dobrý nápad alebo inšpiráciu. Ale tento druh záležitosti sa dá vyriešiť hľadaním iného inšpiratívneho dizajnu menu alebo pomocou nástrojov. Záleží na tom, jQuery.Mmenu príde ako celkom praktický nástroj.

jQuery.Mmenu je ľahko použiteľný doplnok jQuery na vytváranie posuvnej navigačnej ponuky mobilnej aplikácie na vašom webe. Toto elegantné kreatívne menu prinesie príjemnejší a prehľadnejší používateľský zážitok.

Začíname

Na začiatok jQuery.Mmenu, prejdite na stránku sťahovania a doplnok sa stiahne automaticky. V tomto príspevku sa pokúsime zostaviť základné menu.

Rovnako ako ostatné doplnky jQuery, aj tento musíte na svoju stránku zahrnúť požadované závislosti. Tie sú jQuery, jquery.mmenu.js a jquery.mmenu.css. Úryvok je nasledovný:

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

A to by malo stačiť na vytvorenie základného menu so všetkými funkciami a štýlom. Pri pokročilejších a extra funkciách musíte zahrnúť ďalší súbor JS a CSS.

Vytvorenie A Menu

Poďme vytvoriť základné menu tak, ako ho zvyčajne vytvárate pomocou nav, ul, li a a prvkov. V tejto ukážke vytvoríme horizontálne menu, ktoré má tri podponuky a tiež tri podponuky, podobne.

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

Do vyššie uvedenej ponuky sme zahrnuli navigáciu s ID ponuky, ktorá sa použije ako referencia funkcie jQuery.mmenu. Potom zavolajte na plugin s javascript funkciu a zahrňte id takto.

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

V značke LI môžete vidieť triedu s názvom Selected, táto trieda je užitočná na vytvorenie predvoleného vybratého menu pri inicializácii. Môžete tiež pridať svoju vlastnú triedu (napr active), ale nezabudnite ho zahrnúť do sekcie konfigurácie.

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

Tento doplnok automaticky pridal odkazy na zatváranie a otváranie podponuky, takže ich nemusíme vytvárať. Naše menu by malo vyzerať takto.

Záver

jQuery.mmenu vám ponúka skvelé riešenie na čo najjednoduchšie vytváranie rôznych ponúk. Môžete dokonca vytvoriť ďalšie interaktívne prvky tohto pluginu, napríklad môžete vytvoriť posuvný popis a panel upozornení pre mobilné stránky.

jQuery.Mmenu je možné prispôsobiť aj pre pokročilé použitie. Napríklad môžete na svojej lokalite vytvoriť zoznam kontaktov podobný mobilu, a to kombináciou rozšírenia témy, doplnku (štítky, počítadlá, hlavička, dragOpen a vyhľadávacie pole) a umiestnenia.

Ak ste našli článok Jednoduché vytváranie posuvného menu pomocou jQuery.mmenu užitočné, zdieľajte ho so svojimi priateľmi. Uvidíme sa v ďalších príspevkoch. Sledujte driveria.net získať najnovšie aktualizácie!