html5适用于手机端点击弹出导航菜单代码



129 514 172



特效描述:html5 适用于手机端 点击弹出 导航菜单代码,html5点击弹出导航菜单代码

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">

2. 引入JS

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

3. HTML代码

<div class="nav">
	<button class="btn-nav">
		<span class="icon-bar top"></span>
		<span class="icon-bar middle"></span>
		<span class="icon-bar bottom"></span>
	</button>
</div>
<div class="nav-content hideNav hidden">
	<ul class="nav-list">
		<li class="nav-item"><a href="#" class="item-anchor">item 1</a></li>
		<li class="nav-item"><a href="#" class="item-anchor">item 2</a></li>
		<li class="nav-item"><a href="#" class="item-anchor">item 3</a></li>
		<li class="nav-item"><a href="#" class="item-anchor">item 4</a></li>
	</ul>
</div>
<article class="htmleaf-container">
	<header class="htmleaf-header">
		<h1>带炫酷CSS3过渡动画的全屏导航菜单网页UI设计 <span>A Menu with CSS3 transition</span></h1>
	</header>
</article>
<script>
$(window).load(function () {
	$('.btn-nav').on('click tap', function () {
		$('.nav-content').toggleClass('showNav hideNav').removeClass('hidden');
		$(this).toggleClass('animated');
	});
});
</script>



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


热门标签: 右键菜单 二级导航菜单 文字提示框 下拉导航菜单 提示框/弹出层 竖直导航菜单 layer 图标导航菜单 lightbox 固定导航菜单 侧边导航菜单 Tooltip工具提示框 树形导航菜单 浮动提示框 网址导航菜单 html5弹窗动画 导航菜单插件 文字导航菜单 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 弹出层拖动 窗口提示框 导航菜单导航条

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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