jQuery侧边栏隐藏滑动菜单特效代码下载


jQuery侧边栏隐藏滑动菜单特效代码下载
jQuery侧边栏隐藏滑动菜单特效代码下载以及侧边栏隐藏、滑动菜单等js/jquery网页特效代码下载。

1. 引入CSS

<link rel='stylesheet prefetch' href='css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='css/font-awesome.min.css'>
<link rel="stylesheet" href="css/style.css">

2. 引入JS

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

3. HTML代码

<div id="wrapper">
	<div class="overlay"></div>
	<!-- Sidebar -->
	<nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
		<ul class="nav sidebar-nav">
			<li class="sidebar-brand">
				<a href="#">
				   Bootstrap 3
				</a>
			</li>
			<li>
				<a href="#"><i class="fa fa-fw fa-home"></i> Home</a>
			</li>
			<li>
				<a href="#"><i class="fa fa-fw fa-folder"></i> Page one</a>
			</li>
			<li>
				<a href="#"><i class="fa fa-fw fa-file-o"></i> Second page</a>
			</li>
			<li>
				<a href="#"><i class="fa fa-fw fa-cog"></i> Third page</a>
			</li>
			<li class="dropdown">
			  <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-plus"></i> Dropdown <span class="caret"></span></a>
			  <ul class="dropdown-menu" role="menu">
				<li class="dropdown-header">Dropdown heading</li>
				<li><a href="#">Action</a></li>
				<li><a href="#">Another action</a></li>
				<li><a href="#">Something else here</a></li>
				<li><a href="#">Separated link</a></li>
				<li><a href="#">One more separated link</a></li>
			  </ul>
			</li>
			<li>
				<a href="#"><i class="fa fa-fw fa-bank"></i> Page four</a>
			</li>
			<li>
				<a href="#"><i class="fa fa-fw fa-dropbox"></i> Page 5</a>
			</li>
			<li>
				<a href="#"><i class="fa fa-fw fa-twitter"></i> Last page</a>
			</li>
		</ul>
	</nav>
	<!-- /#sidebar-wrapper -->
	<!-- Page Content -->
	<div id="page-content-wrapper">
	  <button type="button" class="hamburger is-closed animated fadeInLeft" data-toggle="offcanvas">
		<span class="hamb-top"></span>
		<span class="hamb-middle"></span>
		<span class="hamb-bottom"></span>
	  </button>
		<div class="container">
			<div class="row">
				<div class="col-lg-8 col-lg-offset-2">
					<p>Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
				</div>
			</div>
		</div>
	</div>
	<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<script type="text/javascript">
	$(document).ready(function () {
	  var trigger = $('.hamburger'),
		  overlay = $('.overlay'),
		 isClosed = false;
		trigger.click(function () {
		  hamburger_cross();      
		});
		function hamburger_cross() {
		  if (isClosed == true) {          
			overlay.hide();
			trigger.removeClass('is-open');
			trigger.addClass('is-closed');
			isClosed = false;
		  } else {   
			overlay.show();
			trigger.removeClass('is-closed');
			trigger.addClass('is-open');
			isClosed = true;
		  }
	  }
	  $('[data-toggle="offcanvas"]').click(function () {
			$('#wrapper').toggleClass('toggled');
	  });  
	});
</script>

相关推荐

发表评论

相关文章