jQuery Bootstrap简洁的响应式导航下拉菜单插件


jQuery Bootstrap简洁的响应式导航下拉菜单插件
jQuery Bootstrap简洁的响应式导航下拉菜单插件以及响应式、导航下拉菜单等js/jquery网页特效代码下载。

1. 引入CSS

<link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" type="text/css" href="css/bootsnav.css">

2. 引入JS

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootsnav.js"></script>

3. HTML代码

	<div class="demo" style="padding: 2em 0;">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<nav class="navbar navbar-default navbar-mobile bootsnav">
						<div class="navbar-header">
							<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
								<i class="fa fa-bars"></i>
							</button>
						</div>
						<div class="collapse navbar-collapse" id="navbar-menu">
							<ul class="nav navbar-nav" data-in="fadeInDown" data-out="fadeOutUp">
								<li><a href="#">Home</a></li>
								<li><a href="#">About Us</a></li>
								<li class="dropdown">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown">Shortcodes</a>
									<ul class="dropdown-menu">
										<li><a href="#">Custom Menu</a></li>
										<li><a href="#">Custom Menu</a></li>
										<li class="dropdown">
											<a href="#" class="dropdown-toggle" data-toggle="dropdown" >Sub Menu</a>
											<ul class="dropdown-menu">
												<li><a href="#">Custom Menu</a></li>
												<li><a href="#">Custom Menu</a></li>
												<li class="dropdown">
													<a href="#" class="dropdown-toggle" data-toggle="dropdown" >Sub Menu</a>
													<ul class="dropdown-menu multi-dropdown">
														<li><a href="#">Custom Menu</a></li>
														<li><a href="#">Custom Menu</a></li>
														<li><a href="#">Custom Menu</a></li>
														<li><a href="#">Custom Menu</a></li>
													</ul>
												</li>
												<li><a href="#">Custom Menu</a></li>
											</ul>
										</li>
										<li><a href="#">Custom Menu</a></li>
										<li><a href="#">Custom Menu</a></li>
										<li><a href="#">Custom Menu</a></li>
										<li><a href="#">Custom Menu</a></li>
									</ul>
								</li>
								<li class="dropdown">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages</a>
									<ul class="dropdown-menu">
										<li><a href="#">Custom Menu</a></li>
										<li><a href="#">Custom Menu</a></li>
										<li class="dropdown">
											<a href="#" class="dropdown-toggle" data-toggle="dropdown">Sub Menu</a>
											<ul class="dropdown-menu">
												<li><a href="#">Custom Menu</a></li>
												<li><a href="#">Custom Menu</a></li>
												<li class="dropdown">
													<a href="#" class="dropdown-toggle" data-toggle="dropdown">Sub Menu</a>
													<ul class="dropdown-menu multi-dropdown">
														<li><a href="#">Custom Menu</a></li>
														<li><a href="#">Custom Menu</a></li>
														<li><a href="#">Custom Menu</a></li>
														<li><a href="#">Custom Menu</a></li>
													</ul>
												</li>
												<li><a href="#">Custom Menu</a></li>
											</ul>
										</li>
										<li><a href="#">Custom Menu</a></li>
										<li><a href="#">Custom Menu</a></li>
										<li><a href="#">Custom Menu</a></li>
										<li><a href="#">Custom Menu</a></li>
									</ul>
								</li>
								<li><a href="#">Portfolio</a></li>
								<li><a href="#">Contact Us</a></li>
							</ul>
						</div>
					</nav>
				</div>
			</div>
		</div>
	</div>

相关推荐

发表评论

相关文章