jquery html5手机触屏版导航菜单响应式网页布局模板下载



178 709 237



特效描述:手机触屏导航 响应式布局模板,

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/main.js"></script>

3. HTML代码

<header>
	<a id="cd-logo" href="#0"><img src="img/cd-logo.svg" alt="Homepage"></a>
	<nav id="cd-top-nav">
		<ul>
			<li><a href="#0">Tour</a></li>
			<li><a href="#0">Login</a></li>
		</ul>
	</nav>
	<a id="cd-menu-trigger" href="#0"><span class="cd-menu-text">Menu</span><span class="cd-menu-icon"></span></a>
</header>
<main class="cd-main-content">
	<!-- put your content here -->
</main> <!-- cd-main-content -->
<nav id="cd-lateral-nav">
	<ul class="cd-navigation">
		<li class="item-has-children">
			<a href="#0">Services</a>
			<ul class="sub-menu">
				<li><a href="#0">Brand</a></li>
				<li><a href="#0">Web Apps</a></li>
				<li><a href="#0">Mobile Apps</a></li>
			</ul>
	  </li> <!-- item-has-children -->
		<li class="item-has-children">
			<a href="#0">Products</a>
			<ul class="sub-menu">
				<li><a href="#0">Product 1</a></li>
				<li><a href="#0">Product 2</a></li>
				<li><a href="#0">Product 3</a></li>
				<li><a href="#0">Product 4</a></li>
				<li><a href="#0">Product 5</a></li>
			</ul>
	  </li> <!-- item-has-children -->
		<li class="item-has-children">
			<a href="#0">Stockists</a>
			<ul class="sub-menu">
				<li><a href="#0">London</a></li>
				<li><a href="#0">New York</a></li>
				<li><a href="#0">Milan</a></li>
				<li><a href="#0">Paris</a></li>
			</ul>
	  </li> <!-- item-has-children -->
	</ul> <!-- cd-navigation -->
	<ul class="cd-navigation cd-single-item-wrapper">
		<li><a href="#0">Tour</a></li>
		<li><a href="#0">Login</a></li>
		<li><a href="#0">Register</a></li>
		<li><a href="#0">Pricing</a></li>
		<li><a href="#0">Support</a></li>
	</ul> <!-- cd-single-item-wrapper -->
	<ul class="cd-navigation cd-single-item-wrapper">
		<li><a class="current" href="#0">Journal</a></li>
		<li><a href="#0">FAQ</a></li>
		<li><a href="#0">Terms &amp; Conditions</a></li>
		<li><a href="#0">Careers</a></li>
		<li><a href="#0">Students</a></li>
	</ul> <!-- cd-single-item-wrapper -->
	<div class="cd-navigation socials">
		<a class="cd-twitter cd-img-replace" href="#0">Twitter</a>
		<a class="cd-github cd-img-replace" href="#0">Git Hub</a>
		<a class="cd-facebook cd-img-replace" href="#0">Facebook</a>
		<a class="cd-google cd-img-replace" href="#0">Google Plus</a>
	</div> <!-- socials -->
</nav>
<script src="js/main.js"></script> <!-- Resource jQuery -->



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


热门标签: 右键菜单 文字提示框 提示框/弹出层 layer lightbox Tooltip工具提示框 浮动提示框 html5弹窗动画 弹出层拖动 窗口提示框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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