Responsive Sidebar Navigation – 响应式侧栏导航

HTML结构

HTML结构由两个主要元素组成：一个<header>元素，包含网站标志，搜索表单，导航触发器（.cd-nav-trigger – 仅限移动版本）和顶部导航， 包含页面主要内容（div.content-wrapper）和侧边栏导航（nav.cd-side-nav）的元素。

<header class="cd-main-header">
	<a href="#0" class="cd-logo"><img src="img/cd-logo.svg" alt="Logo"></a>
	
	<div class="cd-search">
		<form action="#0">
			<input type="search" placeholder="Search...">
		</form>
	</div> <!-- cd-search -->
 
	<a href="#0" class="cd-nav-trigger">Menu<span></span></a>
 
	<nav class="cd-nav">
		<ul class="cd-top-nav">
			<li><a href="#0">Tour</a></li>
			<li><a href="#0">Support</a></li>
			<li class="has-children account">
				<a href="#0">
					<img src="img/cd-avatar.png" alt="avatar">
					Account
				</a>
 
				<ul>
					<li><a href="#0">My Account</a></li>
					<!-- other list items here -->
				</ul>
			</li>
		</ul>
	</nav>
</header> <!-- .cd-main-header -->
 
<main class="cd-main-content">
	<nav class="cd-side-nav">
		<ul>
			<li class="cd-label">Main</li>
			<li class="has-children overview">
				<a href="#0">Overview</a>
				
				<ul>
					<li><a href="#0">All Data</a></li>
					<!-- other list items here -->
				</ul>
			</li>
			<li class="has-children notifications active">
				<a href="#0">Notifications<span class="count">3</span></a>
				
				<ul>
					<li><a href="#0">All Notifications</a></li>
					<!-- other list items here -->
				</ul>
			< </li>
 
			<!-- other list items here -->
		</ul>
 
		<!-- other unordered lists here -->
	</nav>
 
	<div class="content-wrapper">
		<!-- main content here -->
	</div> <!-- .content-wrapper -->
</main> <!-- .cd-main-content -->

在初始的HTML结构中，.cd-search和.cd-top-nav元素在<header>内，而在移动设备上，它们在.cd-side-nav元素内移动 。

style样式

这里根据屏幕尺寸创建了3种不同的侧边栏配置。
在小型设备上，边栏具有100％的宽度，位于绝对位置，默认隐藏（可见性：隐藏）。 当用户单击/点击.cd-nav-trigger时，边栏可见性更改为visible（使用.nav-is-visible类）。

.cd-side-nav {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s 0s, visibility 0s 0.2s;
}
.cd-side-nav.nav-is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s 0s, visibility 0s 0s;
}

在中型设备上（视口宽度大于768像素），默认情况下会显示边栏的缩小版本：它处于相对位置，具有固定宽度（110像素）和浮动：左边，以便它位于左侧 <main>元素。

.cd-side-nav {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s 0s, visibility 0s 0.2s;
}
.cd-side-nav.nav-is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s 0s, visibility 0s 0s;
}

在更大的设备上（视口宽度大于1170像素），会显示侧边栏的展开版本。

javascript事件处理

在初始的HTML结构中，.cd-search和.cd-top-nav元素在<header>中。
在小型设备（视口宽度小于1170像素）上，我们将这些元素移动到.cd-side-nav导航中。

var resizing = false;
moveNavigation();
$(window).on('resize', function(){
 if( !resizing ) {
 	window.requestAnimationFrame(moveNavigation);
 	resizing = true;
 }
});
 
function moveNavigation(){
 var mq = checkMQ(); //this function returns mobile,tablet or desktop 
 
 if ( mq == 'mobile' && topNavigation.parents('.cd-side-nav').length == 0 ) { //topNavigation = $('.cd-top-nav')
 detachElements();
 topNavigation.appendTo(sidebar); //sidebar = $('.cd-side-nav')
 searchForm.prependTo(sidebar);
 } else if ( ( mq == 'tablet' || mq == 'desktop') && topNavigation.parents('.cd-side-nav').length > 0 ) {
 detachElements();
 searchForm.insertAfter(header.find('.cd-logo')); //header = $('.cd-main-header')
 topNavigation.appendTo(header.find('.cd-nav'));
 }
 resizing = false;
}
 
function detachElements() {
 topNavigation.detach();//topNavigation = $('.cd-top-nav')
 searchForm.detach();//searchForm = $('.cd-search')
}

此外，集成了jQuery-menu-aim插件，以区分用户尝试悬停在边栏项和用户尝试导航到子菜单的内容（仅限桌面版本）的用户。