简洁时尚jQuery和CSS3侧边栏菜单插件

PetitQ 导航菜单 2018-10-22 1.53K 0 0

sidenav 是一款简洁时尚的 jQuery 和 CSS3 侧边栏菜单插件。该侧边栏插件具有手风琴的多级菜单效果，使用简单，效果简洁大方。

使用方法:

在页面中引入 sidenav.min.css、jquery 和 sidenav.min.js 文件。

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

<link rel="stylesheet" href="dist/sidenav.min.css" type="text/css">

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

<script src="dist/sidenav.min.js"></script>

HTML 结构:

该侧边栏菜单的 HTML 结构如下。

<nav class="sidenav" data-sidenav data-sidenav-toggle="#sidenav-toggle">

```
  <div class="sidenav-brand">
```
```
    BRAND
```
```
  </div>
```
```
 
```
```
  <div class="sidenav-header">
```
```
    Section Header
```
```
    <small>secondary text</small>
```
```
  </div>
```
```
 
```
```
  <ul class="sidenav-menu">
```
```
    <li>
```

      <a href="javascript:;" data-sidenav-dropdown-toggle class="active">

        <span class="sidenav-link-icon">

          <i class="material-icons">store</i>

```
        </span>
```

        <span class="sidenav-link-title">Lorem ipsum</span>

        <span class="sidenav-dropdown-icon show" data-sidenav-dropdown-icon>

          <i class="material-icons">arrow_drop_down</i>

```
        </span>
```

        <span class="sidenav-dropdown-icon" data-sidenav-dropdown-icon>

          <i class="material-icons">arrow_drop_up</i>

```
        </span>
```
```
      </a>
```
```
 
```

      <ul class="sidenav-dropdown" data-sidenav-dropdown>

        <li><a href="javascript:;">Dolor sit amet</a></li>

        <li><a href="javascript:;">Consectetur adipisicing</a></li>

        <li><a href="javascript:;">Elit</a></li>

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

      <a href="javascript:;" data-sidenav-dropdown-toggle>

        <span class="sidenav-link-icon">

          <i class="material-icons">payment</i>

```
        </span>
```

        <span class="sidenav-link-title">Sed do eiusmod</span>

        <span class="sidenav-dropdown-icon show" data-sidenav-dropdown-icon>

          <i class="material-icons">arrow_drop_down</i>

```
        </span>
```

        <span class="sidenav-dropdown-icon" data-sidenav-dropdown-icon>

          <i class="material-icons">arrow_drop_up</i>

```
        </span>
```
```
      </a>
```
```
 
```

      <ul class="sidenav-dropdown" data-sidenav-dropdown>

        <li><a href="javascript:;">Tempor incididunt</a></li>

        <li><a href="javascript:;">Labore</a></li>

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

      <a href="javascript:;" data-sidenav-dropdown-toggle>

        <span class="sidenav-link-icon">

          <i class="material-icons">shopping_cart</i>

```
        </span>
```

        <span class="sidenav-link-title">Dolore magna</span>

        <span class="sidenav-dropdown-icon show" data-sidenav-dropdown-icon>

          <i class="material-icons">arrow_drop_down</i>

```
        </span>
```

        <span class="sidenav-dropdown-icon" data-sidenav-dropdown-icon>

          <i class="material-icons">arrow_drop_up</i>

```
        </span>
```
```
      </a>
```
```
 
```

      <ul class="sidenav-dropdown" data-sidenav-dropdown>

        <li><a href="javascript:;">Aliqua</a></li>

        <li><a href="javascript:;">Exercitation</a></li>

        <li><a href="javascript:;">Minim veniam</a></li>

```
      </ul>
```
```
    </li>
```
```
    <li>
```
```
      <a href="javascript:;">
```

        <span class="sidenav-link-icon">

          <i class="material-icons">assignment_ind</i>

```
        </span>
```

        <span class="sidenav-link-title">Nostrud ullamco</span>

```
      </a>
```
```
    </li>
```
```
    <li>
```
```
      <a href="javascript:;">
```

        <span class="sidenav-link-icon">

          <i class="material-icons">alarm</i>

```
        </span>
```

        <span class="sidenav-link-title">Commodo</span>

```
      </a>
```
```
    </li>
```
```
  </ul>
```
```
 
```
```
  <div class="sidenav-header">
```
```
    Another Section Header
```
```
  </div>
```
```
 
```
```
  <ul class="sidenav-menu">
```
```
    <li>
```

      <a href="javascript:;" data-sidenav-dropdown-toggle>

        <span class="sidenav-link-icon">

          <i class="material-icons">date_range</i>

```
        </span>
```

        <span class="sidenav-link-title">Reprehenderit</span>

        <span class="sidenav-dropdown-icon show" data-sidenav-dropdown-icon>

          <i class="material-icons">arrow_drop_down</i>

```
        </span>
```

        <span class="sidenav-dropdown-icon" data-sidenav-dropdown-icon>

          <i class="material-icons">arrow_drop_up</i>

```
        </span>
```
```
      </a>
```
```
 
```

      <ul class="sidenav-dropdown" data-sidenav-dropdown>

        <li><a href="javascript:;">Voluptate</a></li>

        <li><a href="javascript:;">Excepteur</a></li>

```
      </ul>
```
```
    </li>
```
```
    <li>
```
```
      <a href="javascript:;">
```

        <span class="sidenav-link-icon">

          <i class="material-icons">backup</i>

```
        </span>
```

        <span class="sidenav-link-title">Occaecat</span>

```
      </a>
```
```
    </li>
```
```
    <li>
```
```
      <a href="javascript:;">
```

        <span class="sidenav-link-icon">

          <i class="material-icons">settings</i>

```
        </span>
```

        <span class="sidenav-link-title">Deserunt</span>

```
      </a>
```
```
    </li>
```
```
  </ul>
```
```
</nav>
```

使用下面的代码来创建一个汉堡包按钮，用于打开侧边栏菜单。

<a href="javascript:;" class="toggle" id="sidenav-toggle">

```
  <i class="material-icons">menu</i>
```
```
</a>
```

初始化插件:

在页面 DOM 元素加载完毕之后，通过下面的方法来初始化该侧边栏菜单。

```
$('[data-sidenav]').sidenav();
```

sidenav 侧边栏菜单插件的 github 地址为：https://github.com/eumatheusgomes/sidenav

简洁时尚 jQuery 和 CSS3 侧边栏菜单插件

已有 381 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

导航菜单

简洁时尚jQuery和CSS3侧边栏菜单插件

使用方法:

HTML 结构:

初始化插件:

简洁时尚 jQuery 和 CSS3 侧边栏菜单插件

相关文章

五彩带图标动画菜单

变形特效固定导航菜单

纯CSS3创意导航菜单特效

发表回复取消回复

热销模板

导航菜单

使用方法:

HTML 结构:

初始化插件:

简洁时尚 jQuery 和 CSS3 侧边栏菜单插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复