responsive-sidebar-navigation

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插件,以区分用户尝试悬停在边栏项和用户尝试导航到子菜单的内容(仅限桌面版本)的用户。