特效介绍
zepto手机端底部弹出菜单导航
固定在页面底部的zepto环形弹出和收起的导航菜单，特别适合于手机端。兼容IE9+浏览器及其他现代浏览器。在IE9浏览器下，弹出和收起菜单项时，没有动画效果。
使用方法
1、将下载的文件放到您的项目中。2、在head引入下面的css文件，您也可以将css中的代码放到您的项目中的文件中：
<link rel="stylesheet" type="text/css" href="css/style.css" />3、在页面底部加入菜单项html代码：
<div class="wrap"> <div class="menu"><img class="icon_menu" src="img/menu.png" /><span></span></div> <div class="btn btn1" data-num="1"><span>照相</span></div> <div class="btn btn2" data-num="2"><span>位置</span></div> <div class="btn btn3" data-num="3"><span>音乐</span></div> <div class="btn btn4" data-num="4"><span>聊天</span></div> </div>4、在上面的代码后面或者</body>之前引用下面的js代码：
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript">
$(function(){
$(".menu").click(function(){
var span = $(this).find("span");
if(span.hasClass("open")){
span.removeClass("open").addClass("close");
$(".btn").removeClass("open").addClass("close");
}else{
span.removeClass("close").addClass("open");
$(".btn").removeClass("close").addClass("open");
}
});
});