html5触屏手机侧边栏滑动导航菜单动画特效



203 809 270



特效描述:html5触屏 手机侧边栏 滑动导航菜单 动画特效,html5导航菜单,侧边导航,滑动导航菜单。

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/default.css">
<link href='http://fonts.useso.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/demo-1.css">

2. 引入JS

<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="js/stopExecutionOnTimeout.js?t=1"></script>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>

3. HTML代码

<div id="wrapper">
	<div class="menu">				
		<img id="menu-bg" src="img/golden-gate-lights.jpg" />
		<ul>
			<li><a href="">About</a></li>
			<li><a href="">Share</a></li>
			<li><a href="">Activity</a></li>
			<li><a href="">Settings</a></li>
			<li><a href="">Contact</a></li>
		</ul>                
	</div>	
	<div class="screen">
		<div class="navbar"></div>
		<div class="list">
			<div class="item">
				<div class="img"></div>
				<span></span>
				<span></span>
				<span></span>                    
			</div>
			<div class="item">
				<div class="img"></div>
				<span></span>
				<span></span>
				<span></span>                    
			</div>
			<div class="item">
				<div class="img"></div>
				<span></span>
				<span></span>
				<span></span>                    
			</div>
			<div class="item">
				<div class="img"></div>
				<span></span>
				<span></span>
				<span></span>                    
			</div>
		</div>                            
		<div class="burger">
			<div class="x"></div>
			<div class="y"></div>
			<div class="z"></div>
		</div>        
	</div>	
 </div>	
<script type="text/javascript">
if ('ontouchstart' in window) {
	var click = 'touchstart';
} else {
	var click = 'click';
}
$('div.burger').on(click, function () {
	if (!$(this).hasClass('open')) {
		openMenu();
	} else {
		closeMenu();
	}
});
$('div.menu ul li a').on(click, function (e) {
	e.preventDefault();
	closeMenu();
});
function openMenu() {
	$('div.burger').addClass('open');
	$('div.y').fadeOut(100);
	$('div.screen').addClass('animate');
	setTimeout(function () {
		$('div.x').addClass('rotate30');
		$('div.z').addClass('rotate150');
		$('.menu').addClass('animate');
		setTimeout(function () {
			$('div.x').addClass('rotate45');
			$('div.z').addClass('rotate135');
		}, 100);
	}, 10);
}
function closeMenu() {
	$('div.screen, .menu').removeClass('animate');
	$('div.y').fadeIn(150);
	$('div.burger').removeClass('open');
	$('div.x').removeClass('rotate45').addClass('rotate30');
	$('div.z').removeClass('rotate135').addClass('rotate150');
	setTimeout(function () {
		$('div.x').removeClass('rotate30');
		$('div.z').removeClass('rotate150');
	}, 50);
	setTimeout(function () {
		$('div.x, div.z').removeClass('collapse');
	}, 70);
}
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 滑动 加载动画 收缩展开 html5弹窗动画 html5动画 导航菜单 html5按钮动画 收缩导航菜单 html5动画导航菜单 滑动选项卡切换 侧边导航菜单 导航菜单插件

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到