Vytvořit kreativně odlišné menu je někdy docela těžké, když nemáte žádný dobrý nápad nebo inspiraci. Ale tento druh záležitosti lze napravit hledáním jiného inspirativního designu menu nebo pomocí nástrojů. V této záležitosti, jQuery.Mmenu přijde jako docela šikovný nástroj.

jQuery.Mmenu je snadno použitelný plugin jQuery pro vytváření posuvné navigační nabídky mobilní aplikace na vašem webu. Toto úhledné kreativní menu přinese hezčí a přehlednější uživatelský zážitek.

Začínáme

Pro začátek jQuery.Mmenu, přejděte na stránku stahování a plugin se stáhne automaticky. V tomto příspěvku se pokusíme sestavit základní menu.

Stejně jako ostatní pluginy jQuery, abyste je mohli použít, musíte na svůj web zahrnout požadované závislosti. Ty jsou jQuery, jquery.mmenu.js a jquery.mmenu.css. Úryvek je následující:

<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 mělo stačit na vytvoření základního menu se všemi funkcionalitami a stylizací. U pokročilejších a extra funkcí musíte zahrnout další soubor JS a CSS.

Vytvoření A Menu

Pojďme vytvořit základní nabídku, jak ji obvykle vytváříte pomocí nav, ul, li a a Prvky. V této ukázce vytvoříme horizontální nabídku, která má tři podnabídky a také tři podnabídky, podobně.

<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 výše uvedené nabídky jsme zahrnuli navigaci s ID nabídky, která bude použita jako odkaz na funkci jQuery.mmenu. Pak zavolejte na plugin s javascript funkce a zahrnout id takto.

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

V tagu LI můžete vidět třídu s názvem SelectedTato třída je užitečná pro vytvoření výchozí vybrané nabídky po inicializaci. Můžete také přidat vlastní třídu (např active), ale nezapomeňte jej zahrnout do sekce konfigurace, jako je to například.

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

Tento plugin automaticky přidal zavírací a otevírací odkazy podnabídky, takže je nemusíme vytvářet. Naše menu by mělo vypadat takto.

Závěr

jQuery.mmenu vám nabízí skvělé řešení pro co nejjednodušší vytváření různých nabídek. Můžete dokonce vytvořit další interaktivní prvky tohoto pluginu, například můžete vytvořit posuvnou nápovědu a oznamovací lištu pro mobilní web.

jQuery.Mmenu lze také přizpůsobit pro pokročilé použití. Můžete například na svém webu vytvořit seznam kontaktů podobný mobilnímu telefonu zkombinováním jeho rozšíření o téma, doplňku (štítky, čítače, záhlaví, dragOpen a vyhledávací pole) a umístění.

Pokud jste našli článek Snadné vytváření posuvného menu pomocí jQuery.mmenu užitečné, sdílejte je se svými přáteli. Uvidíme se v dalších příspěvcích. Následovat driveria.net získat nejnovější aktualizace!