移动优先的jquery多级导航菜单插件

移动优先的jquery多级导航菜单插件

这是一款移动优先的jquery多级导航菜单插件。该导航菜单采用响应式设计,在移动手机上,菜单会显示为隐藏侧边栏菜单。该导航菜单的特点还有:

使用方法
在页面中引入下面的codehim-dropdown.css和jquery和codehim-dropdown.js文件。

1
2
3
<link rel="stylesheet" type="text/css" href="codehim-dropdown.css" />
<script src="js/jquery.min.js"></script>
<script src="js/codehim.dropdown.js"></script>

HTML结构
导航菜单使用下面的HTML结构:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<nav class="codehim-dropdown">
  <ul class="dropdown-items">
    <li class="home-link">
       <a href="#home_link"><i class="fa fa-home"></i></a>
    </li>
    <li>
       <span class="dropdown-heading">
       <i class="icon fa fa-rss"></i>
       News and Media</span>
       <ul class="menu-items">
          <li> <a href="#1"> Item one</a></li>
          <li class="has-child">
             <span class="parent">Item two  </span>
             <ul>
                <li> <a href="#11"> sub item one</a></li>
                <li> <a href="#11"> sub item two</a></li>
                <li> <a href="#11"> sub item two</a></li>
             </ul>
          </li>
          <li> <a href="#1">Item three </a></li>
          <li> <a href="#1"> Item four</a></li>
          <li> <a href="#1">Item five </a></li>
          <li class="has-child">
             <span class="parent">Item last  </span>
             <ul>
                <li> <a href="#11"> sub item one</a></li>
                <li> <a href="#11"> sub item two</a></li>
                <li> <a href="#11"> sub item two</a></li>
                <li class="has-child">
                   <span class="parent">Item two  </span>
                   <ul>
                      <li> <a href="#11"> sub item one</a></li>
                      <li> <a href="#11"> sub item two</a></li>
                      <li> <a href="#11"> sub item two</a></li>
                   </ul>
                </li>
             </ul>
          </li>
       </ul>
    </li>
    <li> <a class="main-links" href="#11">
      <i class="icon fa fa-question-circle"></i>
      About</a>
    </li>
    <li> <a class="main-links" href="#11">
      <i class="icon fa fa-envelope"></i>
      Contact</a>
    </li>
  </ul>
</nav>

初始化插件
在页面DOM元素加载完毕之后,通过下面的方法来初始化该导航菜单插件。

1
2
3
$(function(){
  $(".codehim-dropdown").CodehimDropdown();
});

配置参数
该导航菜单插件可用的配置参数有:

1
2
3
4
5
6
7
8
9
10
11
12
13
skin: "red", //skin color for menubar and drawer
slideUpOther: true, //close other opened dropdowns if user trigger new one
sticky: true, //fixed menubar on top, false to static
  /* Some settings for mobile devices (small screen) when horizontal menubar converted into offcanvas menu */
listAnimation: "fadeInUp", //Animate list items when revealed
subListAnimation: "fadeInUp", //Animate sub items when revealed
  //@info: any animation can be used, put the name of animation class name from animate.css in the above options
dimOverlay: true, //possible options true or false
offCanvasSpeed: "default", //possible options are default, fast, faster, slow and slower
offCanvasDirection: "left", //possible options are left and right
offCanvasWidth: 290, //the width of drawer on mobile devices in pixels
onOffCanvasOpen: function () {}, //your custom function to execute when menu open on mobile devices
onOffCanvasClose: function () {}, //your custom function to execute when menu closed
  • 响应式设计,在移动手机上显示隐藏侧边栏菜单。
  • 菜单项可以定制多种动画特效。
  • 提供20多种内置的主题效果。
  • 使用简单,seo友好。
当前内容只有登录了才能查看,如果您已经注册,请登录
2

发表评论