jQuery响应式导航菜单简单的响应式布局导航菜单代码



121 483 162



特效描述:响应式导航 响应式布局 导航菜单,jquery导航菜单插件制作响应式布局网站导航菜单效果,自适应网站导航菜单代码

代码结构

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cbFlyout.js"></script>

3. HTML代码

<div id="left-flyout-nav" class="layout-left-flyout visible-sm"></div>
<div class="layout-right-content">
	<header class="the-header">
		<div class="navbar container">
			<!-- Trigger -->
			<a class="btn-navbar btn-navbar-navtoggle btn-flyout-trigger" href="javascript:;">
				<span class="icon-bar btn-flyout-trigger"></span>
				<span class="icon-bar btn-flyout-trigger"></span>
				<span class="icon-bar btn-flyout-trigger"></span>
			</a>
			<!-- Structure -->
			<nav class="the-nav nav-collapse clearfix">
				<ul class="nav nav-pill pull-left">
					<li class="dropdown">
						<a href="javascript:void(0);">响应式菜单 <b class="caret"></b></a>
						<ul class="subnav">
							<li><a href="http://www.dijiuzhanzhang.com">第九站长一</a></li>
							<li><a href="http://www.dijiuzhanzhang.com">第九站长二</a></li>
							<li><a href="http://www.dijiuzhanzhang.com">第九站长三</a></li>
							<li><a href="http://www.dijiuzhanzhang.com">第九站长四</a></li>
							<li><a href="http://www.dijiuzhanzhang.com">第九站长五</a></li>
							<li><a href="http://www.dijiuzhanzhang.com">第九站长六</a></li>
						</ul>
					</li>
					<li class="dropdown">
						<a href="javascript:void(0);">JS代码  <b class="caret"></b></a>
						<ul class="subnav">
							<li><a href="http://www.dijiuzhanzhang.com">图片代码</a></li>
							<li><a href="http://www.dijiuzhanzhang.com">相册代码</a></li>
							<li><a href="http://www.dijiuzhanzhang.com">QQ客服代码</a></li>
							<li><a href="http://www.dijiuzhanzhang.com">时间日期代码</a></li>
							<li><a href="http://www.dijiuzhanzhang.com">瀑布流代码</a></li>
						</ul>
					</li>
					<li class="dropdown">
						<a href="javascript:void(0);">图片素材  <b class="caret"></b></a>
						<ul class="subnav">
							<li><a href="http://www.dijiuzhanzhang.com">风景图片</a></li>
							<li><a href="http://www.dijiuzhanzhang.com">美女图片</a></li>
							<li><a href="http://www.dijiuzhanzhang.com">人物图片</a></li>
							<li><a href="http://www.dijiuzhanzhang.com">动物图片</a></li>
						</ul>
					</li>
					<li class="dropdown">
						<a href="javascript:void(0);">PSD素材  <b class="caret"></b></a>
						<ul class="subnav">
							<li><a href="http://www.dijiuzhanzhang.com">节日节气</a></li>
							<li><a href="http://www.dijiuzhanzhang.com">网页模板</a></li>
							<li><a href="http://www.dijiuzhanzhang.com">网页元素</a></li>
							<li><a href="http://www.dijiuzhanzhang.com">挂历PSD素材</a></li>
							<li><a href="http://www.dijiuzhanzhang.com">免费素材网</a></li>
						</ul>
					</li>
				</ul>
				<ul class="nav nav-pill pull-right">
					<li><a href="http://www.dijiuzhanzhang.com">联系我们</a></li>
					<li><a href="http://www.dijiuzhanzhang.com">关于我们</a></li>
					<li><a href="http://www.dijiuzhanzhang.com">发展历程</a></li>
				</ul>
			</nav>
		</div>
	</header>
</div>
<script type="text/javascript">
$(document).ready(function(){
	$('.the-nav').cbFlyout();
});
</script>



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


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 导航切换 菜单切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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