弹性动画效果工具栏菜单

PetitQ 导航菜单 2018-10-21 1.44K 0 0

这是一款使用 jquery 和 CSS3 制作的带弹性动画效果的工具栏菜单特效。该工具栏菜单默认只显示一个圆形按钮，单点击按钮时，子菜单项会以弹性动画展开，效果非常炫酷。

使用方法：

在页面中引入 jquery 和字体图标文件 font-awesome.css。

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

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

<script src="path/to/jquery.min.js"></script>

HTML 结构：

该工具栏菜单的 HTML 结构如下：

```
<div id="wrapper">
```
```
  <div id="toolbar">
```
```
        <div class="button"></div>
```
```
        <ul class="icons">
```

              <li><i class="fa fa-home fa-2x" aria-hidden="true"></i></li>

              <li><i class="fa fa-user fa-2x" aria-hidden="true"></i></li>

              <li><i class="fa fa-star fa-2x" aria-hidden="true"></i></li>

              <li><i class="fa fa-file-text-o fa-2x" aria-hidden="true"></i></li>

              <li><i class="fa fa-paper-plane-o fa-2x" aria-hidden="true"></i></li>

```
        </ul>
```
```
      </div>
```
```
</div>
```

CSS 样式：

为该工具栏菜单添加如下的 CSS 样式：

```
#wrapper {
```
```
  text-align:center;
```
```
  font-family: 'Lato', sans-serif;
```
```
  text-transform:uppercase;
```
```
}
```
```
#toolbar {  
```
```
  width:100%;
```
```
  max-width:670px;
```
```
  min-width:550px;
```
```
  margin: 70px auto;
```
```
}
```
```
.button {
```
```
  width:70px;
```
```
  height:70px;
```
```
  border-radius:50%;
```
```
  background-color:#3AB09E;
```
```
  color:#ffffff;
```
```
  text-align:center;
```
```
  font-size:3.5em;
```
```
  position:relative;
```
```
  left:50%;
```
```
  margin-left:-35px;
```
```
  z-index:1;
```
```
}
```
```
.button,.icons{
```

  -webkit-transition: -webkit-all 1s cubic-bezier(.87,-.41,.19,1.44);

          transition:  all 1s cubic-bezier(.87,-.41,.19,1.44);

```
}
```
```
.button:after {
```
```
  content:"+";
```
```
}
```
```
.button.active {
```
```
-webkit-transform: rotate(45deg);
```
```
 transform: rotate(45deg);
```
```
  left:60px;
```
```
}
```
```
.icons {
```
```
  width:0%;
```
```
  overflow:hidden;
```
```
  height:36px;
```
```
  list-style:none;
```
```
  padding:16px 10px 10px 50px;
```
```
  background-color:#ffffff;
```
```
  box-shadow: 1px 1px 1px 1px #DCDCDC;
```
```
  margin:-68px 0 0 45%;
```
```
  border-radius: 2em;
```
```
}
```
```
 
```
```
.icons.open {
```
```
  width:80%;
```
```
  margin:-68px 0 0 5%;
```
```
  overflow:hidden;
```
```
}
```
```
 
```
```
.icons li {
```
```
  display: none;
```
```
  width:10%;
```
```
  color:#3AB09E;
```
```
}
```
```
 
```
```
.icons.open li {
```
```
  width:16%;
```
```
  display: inline-block;
```
```
}
```

初始化插件：

在页面 DOM 元素加载完毕之后，通过下面的 jquery 代码来打开和关闭工具栏菜单。

```
$( ".button" ).click(function() {
```
```
  $(this).toggleClass( "active" );
```
```
  $(".icons").toggleClass( "open" );
```
```
});
```

弹性动画效果工具栏菜单

已有 360 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

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

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

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

导航菜单

弹性动画效果工具栏菜单

使用方法：

HTML 结构：

CSS 样式：

初始化插件：

弹性动画效果工具栏菜单

相关文章

左侧分类导航菜单特效

炫酷菜单线条动画特效UI设计效果

jQuery图片分类筛选插件

发表回复取消回复

热销模板

导航菜单

使用方法：

HTML 结构：

CSS 样式：

初始化插件：

弹性动画效果工具栏菜单

相关文章

发表回复 取消回复

热销模板

发表回复取消回复