首页 > 特效插件 > 导航菜单 >  zepto固定在底部弹出的导航菜单,适用于手机端正文

zepto固定在底部弹出的导航菜单,适用于手机端

特效介绍
zepto手机端底部弹出菜单导航
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");
		}
	});
});