jQuery html5手机导航菜单触屏点击弹出导航菜单代码



370 1477 493



特效描述:jQueryhtml5 手机导航菜单 触屏点击弹出 导航菜单代码,手机导航菜单触屏点击弹出导航菜单

代码结构

1. 引入CSS

<link href="css/global.css" rel="stylesheet">
<link type="text/css" href="css/style.css" rel="stylesheet">
<link href="css/component.css" rel="stylesheet" type="text/css" />

2. 引入JS

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/modernizr.custom.js"></script>
<script type="text/javascript" src="js/jquery.dlmenu.js"></script>

3. HTML代码

<header class="header">
	<a href="http://www.51qianduan.com/" class="logo"><img src="images/logo.png" alt="嘉华旅游"></a>
	<a href="http://www.51qianduan.com/" class="search"><span>目的地搜索</span></a>
	<a href="http://www.51qianduan.com/" class="user-icon"><span>用户中心</span></a>
	<div id="dl-menu" class="dl-menuwrapper">
		<button id="dl-menu-button">Open Menu</button>
		<ul class="dl-menu">
			<li><a href="http://www.51qianduan.com/">首页</a></li>
			<li><a href="http://www.51qianduan.com/">台湾游</a></li>
			<li><a href="http://www.51qianduan.com/">出境游</a></li>
			<li><a href="http://www.51qianduan.com/">国内游</a></li>
			<li><a href="http://www.51qianduan.com/">周边游</a></li>
			<li>
				<a href="Line">自由行</a>
				<ul class="dl-submenu">
					<li class="dl-back"><a href="#">返回上一级</a></li>
					<li><a href="http://www.51qianduan.com/">线路</a></li>
					<li><a href="http://www.51qianduan.com/">签证</a></li>
					<li><a href="http://www.51qianduan.com/">门票</a></li>
				</ul>
			</li>
		</ul>
	</div>
</header>
<script type="text/javascript">
$(function(){
	$( '#dl-menu' ).dlmenu();
});
</script>



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


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

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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