jQuery bootstrap响应式多级下拉导航菜单特效代码下载


jQuery bootstrap响应式多级下拉导航菜单特效代码下载
jQuery bootstrap响应式多级下拉导航菜单特效代码下载以及多级下拉导航等js/jquery网页特效代码下载。

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootsnav.js"></script>

3. HTML代码

	<div class="demo">
		<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="#" data-hover="Home">Home</a></li>
								<li><a href="#" data-hover="About">About</a></li>
								<li class="dropdown">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="Shortcodes">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" data-hover="Pages">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="#" data-hover="Portfolio">Portfolio</a></li>
								<li class="dropdown megamenu-fw">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown">Megamenu</a>
									<ul class="dropdown-menu megamenu-content" role="menu">
										<li>
											<div class="row">
												<div class="col-menu col-md-3">
													<h6 class="title">Title Menu One</h6>
													<div class="content">
														<ul class="menu-col">
															<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>
															<li><a href="#">Custom Menu</a></li>
														</ul>
													</div>
												</div><!-- end col-3 -->
												<div class="col-menu col-md-3">
													<h6 class="title">Title Menu Two</h6>
													<div class="content">
														<ul class="menu-col">
															<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>
															<li><a href="#">Custom Menu</a></li>
														</ul>
													</div>
												</div><!-- end col-3 -->
												<div class="col-menu col-md-3">
													<h6 class="title">Title Menu Three</h6>
													<div class="content">
														<ul class="menu-col">
															<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>
															<li><a href="#">Custom Menu</a></li>
														</ul>
													</div>
												</div>
												<div class="col-menu col-md-3">
													<h6 class="title">Title Menu Four</h6>
													<div class="content">
														<ul class="menu-col">
															<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>
															<li><a href="#">Custom Menu</a></li>
														</ul>
													</div>
												</div><!-- end col-3 -->
											</div><!-- end row -->
										</li>
									</ul>
								</li>
								<li><a href="#" data-hover="Contact">Contact</a></li>
							</ul>
						</div>
					</nav>
				</div>
			</div>
		</div>
	</div>

相关推荐

发表评论

相关文章