滑动展开菜单按钮插件

PetitQ 导航菜单 2018-10-20 1.70K 0 0

这是一款 jQuery 和 CSS3 滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后，子菜单以滑动的方式依次展开，效果非常炫酷。

使用方法：

在页面中引入 jquery 文件。

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

<script src="js/jquery.min.js" type="text/javascript"></script>

HTML 代码：

使用下面的 HTML 结构来创建滑动展开菜单。

```
<ul class="menu">
```
```
 <li id="push">
```
```
 
```
```
      Trigger Button
```
```
 
```
```
 </li>
```
```
 <li id="pushed-left-1">
```
```
 
```
```
      jQuery
```
```
 
```
```
 </li>
```
```
 <li id="pushed-center">
```
```
 
```
```
      Script
```
```
 
```
```
 </li>
```
```
 <li id="pushed-right-1">
```
```
 
```
```
      Net
```
```
 
```
```
 </li>
```
```
 <li id="pushed-right-2">
```
```
 
```
```
      Menu
```
```
 
```
```
 </li>
```
```
</ul>
```

CSS 样式：

然后添加下面的 CSS 样式。

```
ul.menu li, ul.menu li .sub-menu {
```
```
  border-radius: 100%;
```
```
  height: 100px;
```
```
  width: 100px;
```
```
}
```
```
 
```
```
ul.menu {
```
```
  list-style: none;
```
```
  margin: 0;
```
```
  padding: 0;
```
```
}
```
```
 
```
```
ul.menu li {
```
```
  margin: 0;
```
```
  padding: 0;
```
```
  position: absolute;
```
```
  background-color: #5408FF;
```
```
  cursor: pointer;
```
```
  left: 0;
```
```
  right: 0;
```
```
  top: 0;
```
```
  bottom: 0;
```
```
  transition: all 0.5s;
```
```
  display: flex;
```
```
  justify-content: center;
```
```
  align-items: center;
```
```
}
```
```
 
```
```
ul.menu li span {
```
```
  color: #11111C;
```
```
  font-weight: 700;
```
```
  font-size: 1.5rem;
```
```
  letter-spacing: 0.1px;
```
```
}
```
```
 
```
```
ul.menu li .sub-menu {
```
```
  height: 100px;
```
```
  width: 100px;
```
```
  position: absolute;
```
```
  top: 100px;
```
```
  background-color: white;
```
```
}
```
```
 
```
```
ul.menu li:hover {
```
```
  background-color: #FF08FF;
```
```
}
```
```
 
```
```
ul.menu li#push {
```
```
  z-index: 50;
```
```
  background-color: #FF08FF;
```
```
}
```
```
 
```
```
ul.menu li#push span {
```
```
  font-size: 2rem;
```
```
}
```
```
 
```
```
ul.menu li#push.move {
```
```
  left: -200px;
```
```
}
```
```
 
```
```
ul.menu li#push.rotate {
```
```
  transform: rotate(-315deg);
```
```
}
```
```
 
```
```
ul.menu li#pushed-center {
```
```
  z-index: 10;
```
```
}
```
```
 
```
```
ul.menu li#pushed-left-1 {
```
```
  z-index: 20;
```
```
}
```
```
 
```
```
ul.menu li#pushed-left-1.move {
```
```
  left: -100px;
```
```
}
```
```
 
```
```
ul.menu li#pushed-right-1 {
```
```
  z-index: 30;
```
```
}
```
```
 
```
```
ul.menu li#pushed-right-1.move {
```
```
  left: 100px;
```
```
}
```
```
 
```
```
ul.menu li#pushed-right-2 {
```
```
  z-index: 40;
```
```
}
```
```
 
```
```
ul.menu li#pushed-right-2.move {
```
```
  left: 200px;
```
```
}
```

Javascript 代码：

最后通过下面的 js 代码来触发按钮的点击展开动画。

```
$(document).ready(function() {
```
```
  $('#push').on('click',function(){
```

    $('#push, #pushed-center, #pushed-left-1, #pushed-right-1, #pushed-right-2').toggleClass('move');

```
    $('#push').toggleClass('rotate');
```
```
  });
```
```
});
```

该 jQuery 和 CSS3 滑动展开菜单按钮插件的 github 地址为：https://github.com/mdharo/CSS-jQuery-Slide-Menu

滑动展开菜单按钮插件

已有 425 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

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

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

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

导航菜单

滑动展开菜单按钮插件

使用方法：

HTML 代码：

CSS 样式：

Javascript 代码：

滑动展开菜单按钮插件

相关文章

CSS3抽屉式滑动侧边栏菜单设计

纯CSS3列表面板导航设计效果

jQuery+CSS3固定顶部菜单特效

发表回复取消回复

热销模板

导航菜单

使用方法：

HTML 代码：

CSS 样式：

Javascript 代码：

滑动展开菜单按钮插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复