jQuery固定侧边栏手风琴导航下拉菜单代码

jQuery固定侧边栏手风琴导航下拉菜单代码

一款jQuery固定侧边栏手风琴导航下拉菜单代码,点击菜单项滑动展开收缩,支持二级和三级下拉菜单。

使用方法
在页面引入CSS文件

1
<link rel="stylesheet" href="css/index.css" />

侧栏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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<div class="s-side">
  <ul>
      <!--这部分是导航栏信息。-->
      <li class="s-firstItem first">
          <a href="#">
              <i class="fa fa-home"></i>
              <span>首页</span>
          </a>
      </li>
     
      <li class="first">
          <div class="d-firstNav s-firstNav clearfix">
              <i class="fa fa-bars"></i>
              <span>一级菜单</span>
              <i class="fa fa-caret-right fr "></i>
          </div>
          <ul class="d-firstDrop s-firstDrop">
              <li>
                  <div class="d-secondNav s-secondNav">
                      <i class="fa fa-minus-square-o"></i>
                      <span>二级菜单</span>
                      <i class="fa fa-caret-right fr"></i>
                  </div>
                  <ul class="d-secondDrop s-secondDrop">
                      <li class="s-thirdItem">
                          <a href="#">三级导航</a>
                      </li>
                      <li class="s-thirdItem">
                          <a href="#">三级导航</a>
                      </li>
                  </ul>
              </li>
              <li>
                  <div class="d-secondNav s-secondNav">
                      <i class="fa fa-minus-square-o"></i>
                      <span>二级菜单</span>
                      <i class="fa fa-caret-right fr "></i>
                  </div>
                  <ul class="d-secondDrop s-secondDrop">
                      <li class="s-thirdItem">
                          <a href="#">三级导航</a>
                      </li>
                  </ul>
              </li>
              <li class="s-secondItem">
                  <a href="#">
                      <i class="fa fa-minus-square-o"></i>
                      <span>二级导航</span>
                  </a>
              </li>
          </ul>
      </li>
      <li class="first">
          <div class="d-firstNav s-firstNav">
              <i class="fa fa-bars"></i>                       
              <span>一级菜单</span>
              <i class="fa fa-caret-right fr" ></i>
          </div>
          <ul class="d-firstDrop s-firstDrop">
              <li class="s-secondItem">
                  <i class="fa fa-minus-square-o"></i>
                  <a href="#">二级导航</a>
              </li>
              <li class="s-secondItem">
                  <i class="fa fa-minus-square-o"></i>
                  <a href="#">二级导航</a>
              </li>
          </ul>
      </li>
  </ul>
</div>

文件信息:

    1

    发表评论