欢迎光临
Html5圈

jquery和CSS3带弹性动画效果的工具栏菜单

 使用方法

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


 HTML结构

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

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" );
});
 本站文章均由 HTML5中国 编辑从其他媒体精选HTML5相关文章转载,仅供网友学习和交流,如果我们的工作有侵犯到您的权益,请及时联系站长QQ:2601929995,我们会在第一时间进行处理!
投稿: 2601929995@qq.com
原文链接:http://www.htmleaf.com/jQuery/Menu-Navigation/201701164323.html

未经允许不得转载:Html5圈 » jquery和CSS3带弹性动画效果的工具栏菜单

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

HTML5网站定制 更优秀 更专业

联系我们全国服务热线