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