弹性动画效果工具栏菜单

PetitQ 导航菜单 2018-10-21 1.41K 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" );
```
```
});
```

弹性动画效果工具栏菜单

已有 351 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

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

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

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

导航菜单

弹性动画效果工具栏菜单

使用方法：

HTML 结构：

CSS 样式：

初始化插件：

弹性动画效果工具栏菜单

相关文章

Bootstrap4 响应式多级导航菜单插件

jQuery 依次出现动画圆形按钮

全屏圆形导航轮播图布局jQuery特效

发表回复取消回复

热销模板

导航菜单

使用方法：

HTML 结构：

CSS 样式：

初始化插件：

弹性动画效果工具栏菜单

相关文章

发表回复 取消回复

热销模板

发表回复取消回复