Material Design风格多级下拉列表菜单

PetitQ 导航菜单, 手风琴 2018-10-30 2.45K 0 0

jquery-accordion-menu-multilevel 是一款非常酷的 Material Design 风格多级下拉列表菜单 jQuery 插件。该下拉列表在菜单项点击时采用漂亮的点击波特效，并提供了三种预设的颜色主题样式。

使用方法:

使用该多级下拉菜单插件需要引入 jQuery，script.js 和 style.css 文件。要使用字体图标还要引入 font-awesome.min.css 文件。

也想出现在这里？联系我们吧

<link rel="stylesheet" href="font-awesome.min.css">

<link href="css/style.css" rel="stylesheet"/>

<script src="js/jquery-2.1.4.min.js"></script>

```
<script src="js/script.js"></script>
```

HTML 结构:

该多级下拉菜单插件的 HTML 结构使用的是一个

元素作为包裹容器。里面放置一个

作为菜单项的包裹容器。菜单使用一个无序列表来制作。多级菜单则是在无序列表中在嵌套无序列表。

```
<nav>
```
```
  <div id="menu" class="menu">
```

    <div class="menu-header"> ACCORDION MENU </div>

```
    <ul>
```

      <li class="active"><a href="#"><i class="fa fa-home"></i>Home</a></li>

      <li><a href="#"><i class="fa fa-file-image-o"> </i><a href="#">Gallery</a></a>

```
        <ul class="submenu">
```

          <li><a href="#"> Graphics</a></li>

          <li><a href="#"> Photoshop</a></li>

```
        </ul>
```
```
      </li>
```

      <li><a href="#"><i class="fa fa-cog"> </i>Services</a>

```
        <ul class="submenu">
```

          <li><a href="#"> Web Design </a>

```
            <ul class="submenu">
```

              <li><a href="#"> WordPress</a></li>

              <li><a href="#"> Joomla</a></li>

```
            </ul>
```
```
          </li>
```

          <li><a href="#"> Hosting</a></li>

          <li><a href="#"> Design </a></li>

```
        </ul>
```
```
      </li>
```

      <li><a href="#"><i class="fa fa-newspaper-o"> </i>News<span class="menu-label"> 8 </span></a></li>

      <li><a href="#"><i class="fa fa-user"> </i>About</a></li>

      <li><a href="#"><i class="fa fa-envelope"> </i> Contact</a></li>

```
    </ul>
```

    <div class="menu-footer"> @ Test</div>

```
  </div>
```
```
</nav>
```

CSS 样式:

在 CSS 样式中，主要介绍一些 Material Design 风格的按钮点击波特效的制作方法。这个点击波效果通过.ink class 和.animate-ink class 来实现。.ink 是一个使用 jQuery 来在菜单项被点击或移动触摸的时候动态添加的元素，开始的时候使用 CSS3 scale(0)将它隐藏，然后使用.animate-ink class 来制作光波扩散动画效果。