大连企业网站制作:jQuery.mmenu——轻松创建滑动菜单

2019.09.02 大连企业网站制作

135

大连企业网站制作创造性地创建不同的菜单有时是很困难的,当你没有任何好主意或灵感。 但是这种物质可以通过搜索来解决 其他鼓舞人心的菜单设计 或工具的帮助下。 在这个问题上, jQuery.Mmenu 作为一个很方便的工具。

jQuery.Mmenu 是一个易于使用jQuery插件吗 创建移动应用滑动导航菜单 在你的网站。 这个狡猾的创意菜单将带来更好的和neatere用户体验。

开始

开始使用 jQuery.Mmenu 交给负责人 下载页面 和插件会自动下载。 在这篇文章中,我们将尝试建立一个基本的菜单。

就像其他jQuery插件,使用这个你必须包括你的网站所需的依赖项。 这些都是 jQuery, jquery.mmenu。 js和jquery.mmenu.css 。 代码片段如下:

1
2
3.
4
5
6
7
<头>
. .
   <链接 类型=“文本/ css” rel=“样式表” href=“jquery.mmenu.css” />
   <脚本 类型=“text / javascript” src=“jquery.js”> < /脚本>
   <脚本 类型=“text / javascript” src=“jquery.mmenu.js”> < /脚本>
. .
头>

这应该足够了 创建一个基本的菜单功能和样式 。 对于更高级的和额外的功能,你需要包括 额外的JS和CSS文件 。

创建一个菜单

让我们创建基本的菜单,你通常与创建它 导航 , ul , 李 和 一个 元素。 在这个演示中,我们将创建一个水平菜单,也有三个子菜单和三个sub-sub-menus,。

1
2
3.
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<导航 id=“菜单”>
   <ul>
     <李 类=“选择”>
         <一个 href=“替换”< / >基本水平菜单一个>
         <ul>
             <李><一个 href=“#”第一子菜单< / >a></li>
             <li><a href="#">Second sub-menu</a>
                 <ul>
                     <li><一个 href=“#”第一sub-sub-menu < / >一个> < /李>
                     <李><一个 href=“#”第二sub-sub-menu < / >一个> < /李>
                     <李><一个 href=“#”第三sub-sub-menu < / >一个> < /李>
                 ul>
             李>
             <李><一个 href=“#”第三子菜单< / >一个> < /李>
         ul>
     李>
   ul>
导航>

在上面的菜单中,我们包含的导航 菜单 id将被用作jQuery。 mmenu函数引用。 然后调用javascript函数插件,包括id。

1
2
3.
4
5
<脚本 类型=“text / javascript”>
  $(函数(){
    $ (nav #菜单).mmenu ();
  });
脚本>

李的标签,你可以看到一个类命名 选择 ,这个类是有用的在初始化默认选中的菜单。 你也可以添加自己的类(例如“活跃”),但一定要 包括它的配置部分 ,就像这样。

1
2
3.
4
5
6
7
8
9
10
<脚本 类型=“text / javascript”>
  $(函数(){
    $ (nav #菜单).mmenu ({
      / /选择对象
    },{
      / /配置对象
      selectedClass:“活跃”
    });
  });
脚本>

这个插件 自动添加 子菜单关闭和打开链接,所以我们不需要创建它们。 我们的菜单应该是这样的。

大连企业网站制作

结论

jQuery。 mmenu为您提供一个伟大的解决方案创建不同的菜单尽可能容易。 你甚至可以 创建其他交互元素 用这个插件,例如,您可以创建一个滑动提示和通知酒吧为移动网站。

jQuery.Mmenu 可以定制的 提前使用 。 例如,大连企业网站制作可以创建一个移动站点中的联系人列表结合其themesextension插件(标签、计数器、头dragOpen和searchfield)和定位。


最新案例

寒枫总监

来电咨询

400-6065-301

微信咨询

寒枫总监

TOP