jQuery/CSS3实现弹性动画展开菜单

本文作者html5tricks,转载请注明出处

这是一款基于jQuery和CSS3的动画菜单插件,这款菜单的特点是点击按钮时可以展开菜单,展开的时候带有弹性的动画特效,效果相当酷。菜单项是一些小图标,当然你也可以使用图标结合文字的方式,由于隐藏/展开的方式相对节省空间,因此这款菜单可以应用在移动设备上。

jquery-css3-elasticity-menu

下面我们一起来看看实现这款菜单的实现细节,或许对你学习前端,特别是学习jQuery有一定帮助。

HTML代码

菜单的HTML代码非常简单,用一个div模拟了初始的按钮,ul列表列出了所有菜单项图标,代码如下:

<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>

CSS代码

这里我们主要用CSS代码渲染菜单展开按钮,首先是按钮默认的样式:

.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;
}

很明显,这里我们用到了不少CSS3相关特性,比如CSS3 transition过渡动画属性,这让菜单栏可以在一定时间内过渡地展开和隐藏。同时CSS3的rotate属性,让展开按钮的“+”背景在展开菜单时进行旋转。

jQuery代码

HTML结构和CSS样式都定义好以后,我们就要通过调用jQuery代码来协调鼠标动作和具体样式之间的变换。首先引入jQuery脚本库:

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

然后调用以下jQuery代码:

<script type="text/javascript">
	$( ".button" ).click(function() {
	  $(this).toggleClass( "active" );
	  $(".icons").toggleClass( "open" );
	});
</script>

这样一款富有创意的jQuery/CSS3实现弹性动画展开菜单就完成了,上面的代码仅仅是插件主要代码,完整代码大家可以自行下载插件后研究。

在线演示源码下载

热门推荐

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>