當您沒有任何好主意或靈感時,有時很難創建有創意的不同菜單。 但是這種事情可以通過搜索其他靈感菜單設計或借助工具來解決。 在這件事上, jQuery.Mmenu 作為一個非常方便的工具進來。

jQuery.Mmenu 是一個易於使用的 jQuery 插件,用於在您的網站中創建移動應用滑動導航菜單。 這個巧妙的創意菜單將帶來更好、更簡潔的用戶體驗。

入門

開始使用 jQuery.Mmenu,轉到下載頁面,插件將自動下載。 在這篇文章中,我們將嘗試構建一個基本菜單。

就像其他 jQuery 插件一樣,要使用它,您必須將所需的依賴項包含到您的站點中。 那些是 jQuery, jquery.mmenu.jsjquery.mmenu.css. 片段如下:

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

這應該足以創建具有所有功能和样式的基本菜單。 在更高級和額外的功能上,您需要包含額外的 JS 和 CSS 文件。

創建一個 Menu

讓我們創建基本菜單,就像您通常使用 nav, ul, lia 元素。 在這個演示中,我們將創建一個包含三個子菜單和三個子子菜單的水平菜單,就像這樣。

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

在上面的菜單中,我們包含了帶有菜單 id 的導航,它將用作 jQuery.mmenu 函數引用。 然後調用 pluginjavascript 函數並像這樣包含id。

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

在 LI 標籤中,您可以看到一個名為 Selected, 這個類對於在初始化時製作默認選擇的菜單很有用。 您也可以添加自己的課程(例如 active),但請確保將其包含在配置部分中,就像這樣。

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

這個插件已經自動添加了子菜單關閉和打開鏈接,所以我們不需要創建它們。 我們的菜單應該是這樣的。

結論

jQuery.mmenu 為您提供了一個很好的解決方案,可以盡可能輕鬆地創建不同的菜單。 您甚至可以在此插件中創建其他交互元素,例如,您可以為移動站點創建滑動工具提示和通知欄。

jQuery.Mmenu 也可以針對提前使用進行定制。 例如,您可以通過組合主題擴展、插件(標籤、計數器、標題、dragOpen 和搜索字段)和定位在您的站點中創建類似移動設備的聯繫人列表。

如果你找到了這篇文章 使用 jQuery.mmenu 輕鬆創建滑動菜單 有用,請分享給你的朋友。 下一篇文章見。 跟隨 driveria.net 獲取最新更新!