jquery mmenu_使用jQuery.mmenu轻松创建滑动菜单

最新推荐文章于 2021-06-25 19:09:59 发布

cune1359

最新推荐文章于 2021-06-25 19:09:59 发布

阅读量1.1k

点赞数

文章标签： javascript python java js html ViewUI

如果您没有任何好主意或灵感，有时创建具有创意的其他菜单会非常困难。但是，可以通过搜索其他鼓舞人心的菜单设计或借助工具来解决此问题。在这件事上， jQuery.Mmenu是一个非常方便的工具。

jQuery.Mmenu是一个易于使用的jQuery插件，用于在您的网站中创建移动应用程序滑动导航菜单 。这个光滑的创意菜单将带来更好，更整洁的用户体验。

入门

要开始使用jQuery.Mmenu ，请转到下载页面，该插件将自动下载。在本文中，我们将尝试构建基本菜单。

就像其他jQuery插件一样，要使用此插件，您必须将所需的依赖项包括到您的站点中。这些是jQuery，jquery.mmenu.js和jquery.mmenu.css 。摘录如下：

<head>
..
   <link type="text/css" rel="stylesheet" href="jquery.mmenu.css" />
   <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript" src="jquery.mmenu.js"></script>
..   
</head>

这样就足以创建具有所有功能和样式的基本菜单 。要获得更多高级功能和附加功能，您需要包括其他JS和CSS文件 。

创建菜单

让我们创建基本菜单，就像通常使用nav ， ul ， li和a元素创建菜单一样。在此演示中，我们将创建一个水平菜单，其中包含三个子菜单以及三个子子菜单，如下所示。

<nav id="menu">
   <ul>
     <li class="Selected">
         <a href="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>

在上面的菜单中，我们包含了带有menu ID的导航，它将用作jQuery.mmenu函数参考。然后使用javascript函数调用插件，并包含id，就像这样。

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

在LI标记中，您可以看到一个名为Selected的类，该类对于在初始化时提供默认的选定菜单很有用。您也可以添加自己的类（例如“活动”），但请确保将其包括在配置部分中 ，就像这样。

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

该插件自动添加了子菜单的关闭和打开链接，因此我们无需创建它们。我们的菜单应如下所示。

结论

jQuery.mmenu为您提供了一个绝佳的解决方案，以尽可能轻松地创建不同的菜单。您甚至可以使用此插件创建其他交互式元素 ，例如，可以为移动网站创建滑动工具提示和通知栏。

jQuery.Mmenu也可以自定义为高级用法。例如，您可以通过组合其主题扩展，附加组件（标签，计数器，标题，dragOpen和搜索字段）和位置来在网站中创建类似移动设备的联系人列表。

翻译自: https://www.hongkiat.com/blog/jquery-mmenu-sliding-menu/

cune1359

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery mmenu_使用jQuery.mmenu轻松创建滑动菜单

如果您没有任何好主意或灵感，有时创建具有创意的其他菜单会非常困难。但是，可以通过搜索其他鼓舞人心的菜单设计或借助工具来解决此类问题。在这件事上， jQuery.Mmenu是一个非常方便的工具。 jQuery.Mmenu是一个易于使用的jQuery插件，用于在您的网站中创建移动应用滑动导航菜单。这个光滑的创意菜单将带来更好，更整洁的用户体验。入门要开始使用jQuery.M...
复制链接

扫一扫