效果图
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- 导航nav -->
<header class="cd-main-header">
<a class="cd-logo" href="#0"><img src="images/cd-logo.svg" alt="Logo"></a>
<ul class="cd-header-buttons">
<li><a class="cd-search-trigger" href="#cd-search">Search<span></span></a></li>
<li><a class="cd-nav-trigger" href="#cd-primary-nav">Menu<span></span></a></li>
</ul>
</header>
<main class="cd-main-content">
<div class="cd-overlay"></div>
</main>
<!-- 右侧导航内容 -->
<nav class="cd-nav">
<ul id="cd-primary-nav" class="cd-primary-nav is-fixed">
<li class="has-children first-nav">
<a href="#">Clothing</a>
<!-- 一级导航 -->
<ul class="cd-secondary-nav is-hidden">
<li class="go-back"><a href="#0">Menu</a></li>
<li class="see-all"><a href="#">All Clothing</a></li>
<li class="has-children">
<a href="#">Accessories</a>
<!-- 二级导航 -->
<ul class="is-hidden">
<li class="go-back"><a href="#0">Clothing</a></li>
<li class="see-all"><a href="#">All Accessories</a></li>
<li class="has-children">
<a href="#0">Beanies</a>
<!-- 三级导航 -->
<ul class="is-hidden">
<li class="go-back"><a href="#0">Accessories</a></li>
<li class="see-all"><a href="#">All Benies</a></li>
<li><a href="#">Caps & Hats</a></li>
<li><a href="#">Gifts</a></li>
<li><a href="#">Scarves & Snoods</a></li>
</ul>
</li>
<li class="has-children">
<a href="#0">Caps & Hats</a>
<ul class="is-hidden">
<li class="go-back"><a href="#0">Accessories</a></li>
<li class="see-all"><a href="#">All Caps & Hats</a></li>
<li><a href="#">Beanies</a></li>
<li><a href="#">Caps</a></li>
<li><a href="#">Hats</a></li>
</ul>
</li>
<li><a href="#">Glasses</a></li>
<li><a href="#">Gloves</a></li>
<li><a href="#">Jewellery</a></li>
<li><a href="#">Scarves</a></li>
<li><a href="#">Wallets</a></li>
<li><a href="#">Watches</a></li>
</ul>
</li>
<li class="has-children">
<a href="#">Bottoms</a>
<ul class="is-hidden">
<li class="go-back"><a href="#0">Clothing</a></li>
<li class="see-all"><a href="#">All Bottoms</a></li>
<li><a href="#">Casual Trousers</a></li>
<li class="has-children">
<a href="#0">Jeans</a>
<ul class="is-hidden">
<li class="go-back"><a href="#0">Bottoms</a></li>
<li class="see-all"><a href="#">All Jeans</a></li>
<li><a href="#">Ripped</a></li>
<li><a href="#">Skinny</a></li>
<li><a href="#">Slim</a></li>
<li><a href="#">Straight</a></li>
</ul>
</li>
<li><a href="#0">Leggings</a></li>
<li><a href="#0">Shorts</a></li>
</ul>
</li>
<li class="has-children">
<a href="#">Jackets</a>
<ul class="is-hidden">
<li class="go-back"><a href="#0">Clothing</a></li>
<li class="see-all"><a href="#">All Jackets</a></li>
<li><a href="#">Blazers</a></li>
<li><a href="#">Bomber jackets</a></li>
<li><a href="#">Denim Jackets</a></li>
<li><a href="#">Duffle Coats</a></li>
<li><a href="#">Leather Jackets</a></li>
<li><a href="#">Parkas</a></li>
</ul>
</li>
<li class="has-children">
<a href="#">Tops</a>
<ul class="is-hidden">
<li class="go-back"><a href="#0">Clothing</a></li>
<li class="see-all"><a href="#">All Tops</a></li>
<li><a href="#">Cardigans</a></li>
<li><a href="#">Coats</a></li>
<li><a href="#">Hoodies & Sweatshirts</a></li>
<li><a href="#">Jumpers</a></li>
<li><a href="#">Polo Shirts</a></li>
<li><a href="#">Shirts</a></li>
<li class="has-children">
<a href="#0">T-Shirts</a>
<ul class="is-hidden">
<li class="go-back"><a href="#0">Tops</a></li>
<li class="see-all"><a href="#">All T-shirts</a></li>
<li><a href="#">Plain</a></li>
<li><a href="#">Print</a></li>
<li><a href="#">Striped</a></li>
<li><a href="#">Long sleeved</a></li>
</ul>
</li>
<li><a href="#">Vests</a></li>
</ul>
</li>
</ul>
</li>
<li class="has-children first-nav">
<a href="#">Gallery</a>
<ul class="cd-nav-gallery is-hidden">
<li class="go-back"><a href="#0">Menu</a></li>
<li class="see-all"><a href="#">Browse Gallery</a></li>
<li>
<a class="cd-nav-item" href="#">
<img src="images/img.jpg" alt="Product Image">
<h3>Product #1</h3>
</a>
</li>
<li>
<a class="cd-nav-item" href="#">
<img src="images/img.jpg" alt="Product Image">
<h3>Product #2</h3>
</a>
</li>
<li>
<a class="cd-nav-item" href="#">
<img src="images/img.jpg" alt="Product Image">
<h3>Product #3</h3>
</a>
</li>
<li>
<a class="cd-nav-item" href="#">
<img src="images/img.jpg" alt="Product Image">
<h3>Product #4</h3>
</a>
</li>
</ul>
</li>
<li class="has-children first-nav">
<a href="#">Services</a>
<ul class="cd-nav-icons is-hidden">
<li class="go-back"><a href="#0">Menu</a></li>
<li class="see-all"><a href="#">Browse Services</a></li>
<li>
<a class="cd-nav-item item-1" href="#">
<h3>Service #1</h3>
<p>This is the item description</p>
</a>
</li>
<li>
<a class="cd-nav-item item-2" href="#">
<h3>Service #2</h3>
<p>This is the item description</p>
</a>
</li>
<li>
<a class="cd-nav-item item-3" href="#">
<h3>Service #3</h3>
<p>This is the item description</p>
</a>
</li>
<li>
<a class="cd-nav-item item-4" href="#">
<h3>Service #4</h3>
<p>This is the item description</p>
</a>
</li>
<li>
<a class="cd-nav-item item-5" href="#">
<h3>Service #5</h3>
<p>This is the item description</p>
</a>
</li>
<li>
<a class="cd-nav-item item-6" href="#">
<h3>Service #6</h3>
<p>This is the item description</p>
</a>
</li>
<li>
<a class="cd-nav-item item-7" href="#">
<h3>Service #7</h3>
<p>This is the item description</p>
</a>
</li>
<li>
<a class="cd-nav-item item-8" href="#">
<h3>Service #8</h3>
<p>This is the item description</p>
</a>
</li>
</ul>
</li>
<li><a href="#">Standard</a></li>
</ul>
</nav>
<!-- 搜索框 -->
<div id="cd-search" class="cd-search">
<form><input type="search" placeholder="Search..."></form>
</div>
<script src='https://libs.baidu.com/jquery/1.7.1/jquery.min.js'></script>
<script src="js/jquery.mobile.custom.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>reset.css
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main {
display:block
}
body {
line-height:1
}
ol,ul {
list-style:none
}
blockquote,q {
quotes:none
}
blockquote:before,blockquote:after,q:before,q:after {
content:'';
content:none
}
table {
border-collapse:collapse;
border-spacing:0
}style.css
*,*::after,*::before {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}
html {
font-size:62.5%
}
body {
font-size:1.6rem;
font-family:sans-serif;
color:#2e3233;
background-color:#fff
}
@media only screen and (max-width:1169px) {
body.nav-on-left.overflow-hidden {
overflow:hidden
}
}a {
color:#69aa6f;
text-decoration:none
}
img {
max-width:100%
}
input {
font-family:sans-serif;
font-size:1.6rem
}
input[type=search]::-ms-clear {
display:none
}
input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration {
display:none
}
.cd-main-content,.cd-main-header {
-webkit-transform:translateZ(0);
-moz-transform:translateZ(0);
-ms-transform:translateZ(0);
-o-transform:translateZ(0);
transform:translateZ(0);
will-change:transform
}
.cd-main-content,.cd-main-header {
position:relative;
-webkit-transition:-webkit-transform .3s;
-moz-transition:-moz-transform .3s;
transition:transform .3s
}
@media only screen and (max-width:1169px) {
.cd-main-content.nav-is-visible,.cd-main-header.nav-is-visible {
-webkit-transform:translateX(-260px);
-moz-transform:translateX(-260px);
-ms-transform:translateX(-260px);
-o-transform:translateX(-260px);
transform:translateX(-260px)
}
.nav-on-left .cd-main-content.nav-is-visible,.nav-on-left .cd-main-header.nav-is-visible {
-webkit-transform:translateX(260px);
-moz-transform:translateX(260px);
-ms-transform:translateX(260px);
-o-transform:translateX(260px);
transform:translateX(260px)
}
}.cd-main-content {
background:#e2e3df;
min-height:100vh;
z-index:2
}
.cd-main-header {
height:50px;
background:#fff;
z-index:3
}
.nav-is-fixed .cd-main-header {
position:fixed;
top:0;
left:0;
width:100%
}
@media only screen and (min-width:1170px) {
.cd-main-header {
height:80px
}
.cd-main-header:after {
content:"";
display:table;
clear:both
}
}.cd-logo {
position:absolute;
top:12px;
left:5%
}
.cd-logo img {
display:block
}
@media only screen and (max-width:1169px) {
.nav-on-left .cd-logo {
left:auto;
right:5%
}
}@media only screen and (min-width:1170px) {
.cd-logo {
top:26px;
left:4em
}
}.cd-header-buttons {
position:absolute;
display:inline-block;
top:3px;
right:5%
}
.cd-header-buttons li {
display:inline-block
}
@media only screen and (max-width:1169px) {
.nav-on-left .cd-header-buttons {
right:auto;
left:5%
}
.nav-on-left .cd-header-buttons li {
float:right
}
}@media only screen and (min-width:1170px) {
.cd-header-buttons {
top:18px;
right:4em
}
}.cd-search-trigger,.cd-nav-trigger {
position:relative;
display:block;
width:44px;
height:44px;
overflow:hidden;
white-space:nowrap;
color:transparent;
z-index:3
}
.cd-search-trigger::before,.cd-search-trigger::after {
content:'';
position:absolute;
-webkit-transition:opacity .3s;
-moz-transition:opacity .3s;
transition:opacity .3s;
-webkit-transform:translateZ(0);
-moz-transform:translateZ(0);
-ms-transform:translateZ(0);
-o-transform:translateZ(0);
transform:translateZ(0);
-webkit-backface-visibility:hidden;
backface-visibility:hidden
}
.cd-search-trigger::before {
top:11px;
left:11px;
width:18px;
height:18px;
border-radius:50%;
border:3px solid #2e3233
}
.cd-search-trigger::after {
height:3px;
width:8px;
background:#2e3233;
bottom:14px;
right:11px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg)
}
.cd-search-trigger span {
position:absolute;
height:100%;
width:100%;
top:0;
left:0
}
.cd-search-trigger span::before,.cd-search-trigger span::after {
content:'';
position:absolute;
display:inline-block;
height:3px;
width:22px;
top:50%;
margin-top:-2px;
left:50%;
margin-left:-11px;
background:#2e3233;
opacity:0;
-webkit-transform:translateZ(0);
-moz-transform:translateZ(0);
-ms-transform:translateZ(0);
-o-transform:translateZ(0);
transform:translateZ(0);
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
-webkit-transition:opacity .3s,-webkit-transform .3s;
-moz-transition:opacity .3s,-moz-transform .3s;
transition:opacity .3s,transform .3s
}
.cd-search-trigger span::before {
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg)
}
.cd-search-trigger span::after {
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg)
}
.cd-search-trigger.search-is-visible::before,.cd-search-trigger.search-is-visible::after {
opacity:0
}
.cd-search-trigger.search-is-visible span::before,.cd-search-trigger.search-is-visible span::after {
opacity:1
}
.cd-search-trigger.search-is-visible span::before {
-webkit-transform:rotate(135deg);
-moz-transform:rotate(135deg);
-ms-transform:rotate(135deg);
-o-transform:rotate(135deg);
transform:rotate(135deg)
}
.cd-search-trigger.search-is-visible span::after {
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg)
}
.cd-nav-trigger span,.cd-nav-trigger span::before,.cd-nav-trigger span::after {
position:absolute;
display:inline-block;
height:3px;
width:24px;
background:#2e3233
}
.cd-nav-trigger span {
position:absolute;
top:50%;
right:10px;
margin-top:-2px;
-webkit-transition:background .3s .3s;
-moz-transition:background .3s .3s;
transition:background .3s .3s
}
.cd-nav-trigger span::before,.cd-nav-trigger span::after {
content:'';
right:0;
-webkit-transform:translateZ(0);
-moz-transform:translateZ(0);
-ms-transform:translateZ(0);
-o-transform:translateZ(0);
transform:translateZ(0);
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
-webkit-transform-origin:0% 50%;
-moz-transform-origin:0% 50%;
-ms-transform-origin:0% 50%;
-o-transform-origin:0% 50%;
transform-origin:0% 50%;
-webkit-transition:-webkit-transform .3s .3s;
-moz-transition:-moz-transform .3s .3s;
transition:transform .3s .3s
}
.cd-nav-trigger span::before {
top:-6px
}
.cd-nav-trigger span::after {
top:6px
}
.cd-nav-trigger.nav-is-visible span {
background:transparent
}
.cd-nav-trigger.nav-is-visible span::before,.cd-nav-trigger.nav-is-visible span::after {
background:#2e3233
}
.cd-nav-trigger.nav-is-visible span::before {
-webkit-transform:translateX(4px) translateY(-3px) rotate(45deg);
-moz-transform:translateX(4px) translateY(-3px) rotate(45deg);
-ms-transform:translateX(4px) translateY(-3px) rotate(45deg);
-o-transform:translateX(4px) translateY(-3px) rotate(45deg);
transform:translateX(4px) translateY(-3px) rotate(45deg)
}
.cd-nav-trigger.nav-is-visible span::after {
-webkit-transform:translateX(4px) translateY(2px) rotate(-45deg);
-moz-transform:translateX(4px) translateY(2px) rotate(-45deg);
-ms-transform:translateX(4px) translateY(2px) rotate(-45deg);
-o-transform:translateX(4px) translateY(2px) rotate(-45deg);
transform:translateX(4px) translateY(2px) rotate(-45deg)
}
@media only screen and (min-width:1170px) {
.cd-nav-trigger {
display:none
}
}.cd-primary-nav,.cd-primary-nav ul {
position:fixed;
top:0;
right:0;
height:100%;
width:260px;
background:#2e3233;
overflow:auto;
-webkit-overflow-scrolling:touch;
z-index:1;
-webkit-transform:translateZ(0);
-moz-transform:translateZ(0);
-ms-transform:translateZ(0);
-o-transform:translateZ(0);
transform:translateZ(0);
-webkit-transform:translateX(0);
-moz-transform:translateX(0);
-ms-transform:translateX(0);
-o-transform:translateX(0);
transform:translateX(0);
-webkit-transition:-webkit-transform .3s;
-moz-transition:-moz-transform .3s;
transition:transform .3s
}
.cd-primary-nav a,.cd-primary-nav ul a {
display:block;
height:50px;
line-height:50px;
padding:0 20px;
color:#fff;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
border-bottom:1px solid #3a3f40;
-webkit-transform:translateZ(0);
-moz-transform:translateZ(0);
-ms-transform:translateZ(0);
-o-transform:translateZ(0);
transform:translateZ(0);
will-change:transform,opacity;
-webkit-transition:-webkit-transform .3s,opacity .3s;
-moz-transition:-moz-transform .3s,opacity .3s;
transition:transform .3s,opacity .3s
}
.cd-primary-nav.is-hidden,.cd-primary-nav ul.is-hidden {
-webkit-transform:translateX(100%);
-moz-transform:translateX(100%);
-ms-transform:translateX(100%);
-o-transform:translateX(100%);
transform:translateX(100%)
}
.cd-primary-nav.moves-out>li>a,.cd-primary-nav ul.moves-out>li>a {
-webkit-transform:translateX(-100%);
-moz-transform:translateX(-100%);
-ms-transform:translateX(-100%);
-o-transform:translateX(-100%);
transform:translateX(-100%);
opacity:0
}
@media only screen and (max-width:1169px) {
.nav-on-left .cd-primary-nav,.nav-on-left .cd-primary-nav ul {
right:auto;
left:0
}
}.cd-primary-nav .see-all a {
color:#69aa6f
}
.cd-primary-nav .cd-nav-gallery .cd-nav-item,.cd-primary-nav .cd-nav-icons .cd-nav-item {
height:80px;
line-height:80px
}
.cd-primary-nav .cd-nav-gallery .cd-nav-item h3,.cd-primary-nav .cd-nav-icons .cd-nav-item h3 {
overflow:hidden;
text-overflow:ellipsis
}
.cd-primary-nav .cd-nav-gallery .cd-nav-item {
padding-left:90px
}
.cd-primary-nav .cd-nav-gallery .cd-nav-item img {
position:absolute;
display:block;
height:40px;
width:auto;
left:20px;
top:50%;
margin-top:-20px
}
.cd-primary-nav .cd-nav-icons .cd-nav-item {
padding-left:75px
}
.cd-primary-nav .cd-nav-icons .cd-nav-item p {
color:#2e3233;
font-size:1.3rem;
display:none
}
.cd-primary-nav .cd-nav-icons .cd-nav-item::before {
content:'';
display:block;
position:absolute;
left:20px;
top:50%;
margin-top:-20px;
width:40px;
height:40px;
background-repeat:no-repeat;
background-position:center center;
background-size:40px 40px
}
.cd-primary-nav .cd-nav-icons .cd-nav-item.item-1::before {
background-image:url(../images/line-icon-1.svg)
}
.cd-primary-nav .cd-nav-icons .cd-nav-item.item-2::before {
background-image:url(../images/line-icon-2.svg)
}
.cd-primary-nav .cd-nav-icons .cd-nav-item.item-3::before {
background-image:url(../images/line-icon-3.svg)
}
.cd-primary-nav .cd-nav-icons .cd-nav-item.item-4::before {
background-image:url(../images/line-icon-4.svg)
}
.cd-primary-nav .cd-nav-icons .cd-nav-item.item-5::before {
background-image:url(../images/line-icon-5.svg)
}
.cd-primary-nav .cd-nav-icons .cd-nav-item.item-6::before {
background-image:url(../images/line-icon-6.svg)
}
.cd-primary-nav .cd-nav-icons .cd-nav-item.item-7::before {
background-image:url(../images/line-icon-7.svg)
}
.cd-primary-nav .cd-nav-icons .cd-nav-item.item-8::before {
background-image:url(../images/line-icon-8.svg)
}
@media only screen and (max-width:1169px) {
.cd-primary-nav {
visibility:hidden;
-webkit-transition:visibility 0s .3s;
-moz-transition:visibility 0s .3s;
transition:visibility 0s .3s
}
.cd-primary-nav.nav-is-visible {
visibility:visible;
-webkit-transition:visibility 0s 0s;
-moz-transition:visibility 0s 0s;
transition:visibility 0s 0s
}
}@media only screen and (min-width:1170px) {
.cd-primary-nav {
position:static;
padding:0 150px 0 0;
height:auto;
width:auto;
float:right;
overflow:visible;
background:0 0
}
.cd-primary-nav:after {
content:"";
display:table;
clear:both
}
.cd-primary-nav.moves-out>li>a {
-webkit-transform:translateX(0);
-moz-transform:translateX(0);
-ms-transform:translateX(0);
-o-transform:translateX(0);
transform:translateX(0);
opacity:1
}
.cd-primary-nav ul {
position:static;
height:auto;
width:auto;
background:0 0;
overflow:visible;
z-index:3
}
.cd-primary-nav ul.is-hidden {
-webkit-transform:translateX(0);
-moz-transform:translateX(0);
-ms-transform:translateX(0);
-o-transform:translateX(0);
transform:translateX(0)
}
.cd-primary-nav ul.moves-out>li>a {
-webkit-transform:translateX(0);
-moz-transform:translateX(0);
-ms-transform:translateX(0);
-o-transform:translateX(0);
transform:translateX(0);
opacity:1
}
.cd-primary-nav>li {
float:left;
margin-left:3em
}
.cd-primary-nav>li>a {
position:relative;
display:inline-block;
height:80px;
line-height:80px;
padding:0 10px;
color:#2e3233;
overflow:visible;
border-bottom:0;
-webkit-transition:color .3s,box-shadow .3s;
-moz-transition:color .3s,box-shadow .3s;
transition:color .3s,box-shadow .3s
}
.cd-primary-nav>li>a:hover {
color:#69aa6f
}
.cd-primary-nav>li>a.selected {
color:#69aa6f;
box-shadow:inset 0 -2px 0 #69aa6f
}
.cd-primary-nav .go-back,.cd-primary-nav .see-all {
display:none
}
.cd-primary-nav .cd-secondary-nav,.cd-primary-nav .cd-nav-gallery,.cd-primary-nav .cd-nav-icons {
position:absolute;
top:80px;
width:100vw;
background:#fff;
padding:48px 64px 130px;
box-shadow:inset 0 1px 0 #e2e3df,0 3px 6px rgba(0,0,0,.05);
-webkit-transform:translateX(0);
-moz-transform:translateX(0);
-ms-transform:translateX(0);
-o-transform:translateX(0);
transform:translateX(0);
-webkit-transition:opacity .3s 0s,visibility 0s 0s;
-moz-transition:opacity .3s 0s,visibility 0s 0s;
transition:opacity .3s 0s,visibility 0s 0s
}
.cd-primary-nav .cd-secondary-nav:after,.cd-primary-nav .cd-nav-gallery:after,.cd-primary-nav .cd-nav-icons:after {
content:"";
display:table;
clear:both
}
.cd-primary-nav .cd-secondary-nav.is-hidden,.cd-primary-nav .cd-nav-gallery.is-hidden,.cd-primary-nav .cd-nav-icons.is-hidden {
opacity:0;
visibility:hidden;
-webkit-transition:opacity .3s 0s,visibility 0s .3s;
-moz-transition:opacity .3s 0s,visibility 0s .3s;
transition:opacity .3s 0s,visibility 0s .3s
}
.cd-primary-nav .cd-secondary-nav>.see-all,.cd-primary-nav .cd-nav-gallery>.see-all,.cd-primary-nav .cd-nav-icons>.see-all {
display:block;
position:absolute;
left:0;
bottom:0;
height:80px;
width:100%;
overflow:hidden;
margin:0;
padding:0
}
.cd-primary-nav .cd-secondary-nav>.see-all a,.cd-primary-nav .cd-nav-gallery>.see-all a,.cd-primary-nav .cd-nav-icons>.see-all a {
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
font-size:2.2rem;
font-weight:700;
text-align:center;
line-height:80px;
border-top:1px solid #e2e3df;
border-bottom:0;
margin:0;
padding:0;
-webkit-transition:color .2s,background .2s,border .2s;
-moz-transition:color .2s,background .2s,border .2s;
transition:color .2s,background .2s,border .2s
}
.cd-primary-nav .cd-secondary-nav>.see-all a:hover,.cd-primary-nav .cd-nav-gallery>.see-all a:hover,.cd-primary-nav .cd-nav-icons>.see-all a:hover {
background:#2e3233;
border-color:#2e3233;
color:#fff
}
.cd-primary-nav .cd-secondary-nav>li {
height:340px;
width:23%;
float:left;
margin-right:2.66%;
border-right:1px solid #e2e3df;
overflow:hidden;
overflow-x:hidden;
overflow-y:auto;
-webkit-overflow-scrolling:touch
}
.cd-primary-nav .cd-secondary-nav>li:nth-child(4n+2) {
margin-right:0;
border-right:0
}
.cd-primary-nav .cd-secondary-nav>li>a {
color:#69aa6f;
font-weight:700;
font-size:1.6rem;
margin-bottom:.6em
}
.cd-primary-nav .cd-secondary-nav a {
height:30px;
line-height:30px;
padding:0 18% 0 0;
color:#2e3233;
border-bottom:0;
font-size:1.4rem
}
.cd-primary-nav .cd-secondary-nav a:hover {
color:#69aa6f
}
.cd-primary-nav .cd-secondary-nav ul {
-webkit-transform:translateZ(0);
-moz-transform:translateZ(0);
-ms-transform:translateZ(0);
-o-transform:translateZ(0);
transform:translateZ(0)
}
.cd-primary-nav .cd-secondary-nav ul ul {
position:absolute;
top:0;
left:0;
height:100%;
width:100%
}
.cd-primary-nav .cd-secondary-nav ul ul.is-hidden {
-webkit-transform:translateX(100%);
-moz-transform:translateX(100%);
-ms-transform:translateX(100%);
-o-transform:translateX(100%);
transform:translateX(100%)
}
.cd-primary-nav .cd-secondary-nav ul ul .go-back {
display:block
}
.cd-primary-nav .cd-secondary-nav ul ul .go-back a {
color:transparent
}
.cd-primary-nav .cd-secondary-nav ul ul .see-all {
display:block
}
.cd-primary-nav .cd-secondary-nav .moves-out>li>a {
-webkit-transform:translateX(-100%);
-moz-transform:translateX(-100%);
-ms-transform:translateX(-100%);
-o-transform:translateX(-100%);
transform:translateX(-100%)
}
.cd-primary-nav .cd-nav-gallery li {
width:22%;
float:left;
margin:0 4% 40px 0
}
.cd-primary-nav .cd-nav-gallery li:nth-child(4n+2) {
margin-right:0
}
.cd-primary-nav .cd-nav-gallery .cd-nav-item {
border-bottom:0;
padding:0;
height:auto;
line-height:1.2
}
.cd-primary-nav .cd-nav-gallery .cd-nav-item img {
position:static;
margin-top:0;
height:auto;
width:100%;
margin-bottom:.6em
}
.cd-primary-nav .cd-nav-gallery .cd-nav-item h3 {
color:#69aa6f;
font-weight:700;
padding:0 .4em
}
.cd-primary-nav .cd-nav-icons li {
width:32%;
float:left;
margin:0 2% 20px 0
}
.cd-primary-nav .cd-nav-icons li:nth-child(3n+2) {
margin-right:0
}
.cd-primary-nav .cd-nav-icons .cd-nav-item {
border-bottom:0;
height:80px;
line-height:1.2;
padding:24px 0 0 85px
}
.cd-primary-nav .cd-nav-icons .cd-nav-item:hover {
background:#f6f6f5
}
.cd-primary-nav .cd-nav-icons .cd-nav-item h3 {
color:#69aa6f;
font-weight:700
}
.cd-primary-nav .cd-nav-icons .cd-nav-item p {
display:block
}
.cd-primary-nav .cd-nav-icons .cd-nav-item::before {
left:25px
}
}.has-children>a,.go-back a {
position:relative
}
.has-children>a::before,.has-children>a::after,.go-back a::before,.go-back a::after {
content:'';
position:absolute;
top:50%;
margin-top:-1px;
display:inline-block;
height:2px;
width:10px;
background:#464c4e;
-webkit-backface-visibility:hidden;
backface-visibility:hidden
}
.has-children>a::before,.go-back a::before {
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg)
}
.has-children>a::after,.go-back a::after {
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg)
}
@media only screen and (min-width:1170px) {
.has-children>a::before,.has-children>a::after,.go-back a::before,.go-back a::after {
background:#c9cbc4
}
.has-children>a:hover::before,.has-children>a:hover::after,.go-back a:hover::before,.go-back a:hover::after {
background:#69aa6f
}
}.has-children>a {
padding-right:40px
}
.has-children>a::before,.has-children>a::after {
right:20px;
-webkit-transform-origin:9px 50%;
-moz-transform-origin:9px 50%;
-ms-transform-origin:9px 50%;
-o-transform-origin:9px 50%;
transform-origin:9px 50%
}
.cd-primary-nav .go-back a {
padding-left:40px
}
.cd-primary-nav .go-back a::before,.cd-primary-nav .go-back a::after {
left:20px;
-webkit-transform-origin:1px 50%;
-moz-transform-origin:1px 50%;
-ms-transform-origin:1px 50%;
-o-transform-origin:1px 50%;
transform-origin:1px 50%
}
@media only screen and (min-width:1170px) {
.has-children>a::before,.has-children>a::after {
right:15%
}
.cd-primary-nav>.has-children>a {
padding-right:30px!important
}
.cd-primary-nav>.has-children>a::before,.cd-primary-nav>.has-children>a::after {
width:9px;
-webkit-transform-origin:50% 50%;
-moz-transform-origin:50% 50%;
-ms-transform-origin:50% 50%;
-o-transform-origin:50% 50%;
transform-origin:50% 50%;
background:#c9cbc4;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
-webkit-transition:width .3s,-webkit-transform .3s;
-moz-transition:width .3s,-moz-transform .3s;
transition:width .3s,transform .3s
}
.cd-primary-nav>.has-children>a::before {
right:12px
}
.cd-primary-nav>.has-children>a::after {
right:7px
}
.cd-primary-nav>.has-children>a.selected::before,.cd-primary-nav>.has-children>a.selected::after {
width:14px
}
.cd-primary-nav>.has-children>a.selected::before {
-webkit-transform:translateX(5px) rotate(-45deg);
-moz-transform:translateX(5px) rotate(-45deg);
-ms-transform:translateX(5px) rotate(-45deg);
-o-transform:translateX(5px) rotate(-45deg);
transform:translateX(5px) rotate(-45deg)
}
.cd-primary-nav>.has-children>a.selected::after {
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg)
}
.cd-secondary-nav>.has-children>a::before,.cd-secondary-nav>.has-children>a::after {
display:none
}
.cd-primary-nav .go-back a {
padding-left:20px
}
.cd-primary-nav .go-back a::before,.cd-primary-nav .go-back a::after {
left:1px
}
}.cd-search {
position:absolute;
height:50px;
width:100%;
top:50px;
left:0;
z-index:3;
opacity:0;
visibility:hidden;
-webkit-transition:opacity .3s 0s,visibility 0s .3s;
-moz-transition:opacity .3s 0s,visibility 0s .3s;
transition:opacity .3s 0s,visibility 0s .3s
}
.cd-search form {
height:100%;
width:100%
}
.cd-search input {
border-radius:0;
border:0;
background:#fff;
height:100%;
width:100%;
padding:0 5%;
box-shadow:inset 0 1px 0 #e2e3df,0 3px 6px rgba(0,0,0,.05);
-webkit-appearance:none;
-moz-appearance:none;
-ms-appearance:none;
-o-appearance:none;
appearance:none
}
.cd-search input::-webkit-input-placeholder {
color:#c9cbc4
}
.cd-search input::-moz-placeholder {
color:#c9cbc4
}
.cd-search input:-moz-placeholder {
color:#c9cbc4
}
.cd-search input:-ms-input-placeholder {
color:#c9cbc4
}
.cd-search input:focus {
outline:0
}
.cd-search.is-visible {
opacity:1;
visibility:visible;
-webkit-transition:opacity .3s 0s,visibility 0s 0s;
-moz-transition:opacity .3s 0s,visibility 0s 0s;
transition:opacity .3s 0s,visibility 0s 0s
}
.nav-is-fixed .cd-search {
position:fixed
}
@media only screen and (min-width:1170px) {
.cd-search {
height:120px;
top:80px
}
.cd-search input {
padding:0 2em;
font-size:3.2rem;
font-weight:300
}
}.cd-overlay {
position:fixed;
height:100%;
width:100%;
top:0;
left:0;
cursor:pointer;
background-color:rgba(105,170,111,.8);
visibility:hidden;
opacity:0;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
-webkit-transition:opacity .3s 0s,visibility 0s .3s;
-moz-transition:opacity .3s 0s,visibility 0s .3s;
transition:opacity .3s 0s,visibility 0s .3s
}
.cd-overlay.is-visible {
opacity:1;
visibility:visible;
-webkit-transition:opacity .3s 0s,visibility 0s 0s;
-moz-transition:opacity .3s 0s,visibility 0s 0s;
transition:opacity .3s 0s,visibility 0s 0s
}
.no-js .cd-primary-nav {
position:relative;
height:auto;
width:100%;
overflow:visible;
visibility:visible;
z-index:2
}
.no-js .cd-search {
position:relative;
top:0;
opacity:1;
visibility:visible
}
@media only screen and (min-width:1170px) {
.no-js .cd-primary-nav {
position:absolute;
z-index:3;
display:inline-block;
width:auto;
top:0;
right:150px;
padding:0
}
.no-js .nav-is-fixed .cd-primary-nav {
position:fixed
}
}jquery.mobile.custom.min.js
/*! jQuery Mobile v1.4.5 | Copyright 2010, 2014 jQuery Foundation, Inc. | jquery.org/license */
(function(e,t,n){typeof define=="function"&&define.amd?define(["jquery"],function(r){return n(r,e,t),r.mobile}):n(e.jQuery,e,t)})(this,document,function(e,t,n,r){(function(e,t,n,r){function T(e){while(e&&typeof e.originalEvent!="undefined")e=e.originalEvent;return e}function N(t,n){var i=t.type,s,o,a,l,c,h,p,d,v;t=e.Event(t),t.type=n,s=t.originalEvent,o=e.event.props,i.search(/^(mouse|click)/)>-1&&(o=f);if(s)for(p=o.length,l;p;)l=o[--p],t[l]=s[l];i.search(/mouse(down|up)|click/)>-1&&!t.which&&(t.which=1);if(i.search(/^touch/)!==-1){a=T(s),i=a.touches,c=a.changedTouches,h=i&&i.length?i[0]:c&&c.length?c[0]:r;if(h)for(d=0,v=u.length;d<v;d++)l=u[d],t[l]=h[l]}return t}function C(t){var n={},r,s;while(t){r=e.data(t,i);for(s in r)r[s]&&(n[s]=n.hasVirtualBinding=!0);t=t.parentNode}return n}function k(t,n){var r;while(t){r=e.data(t,i);if(r&&(!n||r[n]))return t;t=t.parentNode}return null}function L(){g=!1}function A(){g=!0}function O(){E=0,v.length=0,m=!1,A()}function M(){L()}function _(){D(),c=setTimeout(function(){c=0,O()},e.vmouse.resetTimerDuration)}function D(){c&&(clearTimeout(c),c=0)}function P(t,n,r){var i;if(r&&r[t]||!r&&k(n.target,t))i=N(n,t),e(n.target).trigger(i);return i}function H(t){var n=e.data(t.target,s),r;!m&&(!E||E!==n)&&(r=P("v"+t.type,t),r&&(r.isDefaultPrevented()&&t.preventDefault(),r.isPropagationStopped()&&t.stopPropagation(),r.isImmediatePropagationStopped()&&t.stopImmediatePropagation()))}function B(t){var n=T(t).touches,r,i,o;n&&n.length===1&&(r=t.target,i=C(r),i.hasVirtualBinding&&(E=w++,e.data(r,s,E),D(),M(),d=!1,o=T(t).touches[0],h=o.pageX,p=o.pageY,P("vmouseover",t,i),P("vmousedown",t,i)))}function j(e){if(g)return;d||P("vmousecancel",e,C(e.target)),d=!0,_()}function F(t){if(g)return;var n=T(t).touches[0],r=d,i=e.vmouse.moveDistanceThreshold,s=C(t.target);d=d||Math.abs(n.pageX-h)>i||Math.abs(n.pageY-p)>i,d&&!r&&P("vmousecancel",t,s),P("vmousemove",t,s),_()}function I(e){if(g)return;A();var t=C(e.target),n,r;P("vmouseup",e,t),d||(n=P("vclick",e,t),n&&n.isDefaultPrevented()&&(r=T(e).changedTouches[0],v.push({touchID:E,x:r.clientX,y:r.clientY}),m=!0)),P("vmouseout",e,t),d=!1,_()}function q(t){var n=e.data(t,i),r;if(n)for(r in n)if(n[r])return!0;return!1}function R(){}function U(t){var n=t.substr(1);return{setup:function(){q(this)||e.data(this,i,{});var r=e.data(this,i);r[t]=!0,l[t]=(l[t]||0)+1,l[t]===1&&b.bind(n,H),e(this).bind(n,R),y&&(l.touchstart=(l.touchstart||0)+1,l.touchstart===1&&b.bind("touchstart",B).bind("touchend",I).bind("touchmove",F).bind("scroll",j))},teardown:function(){--l[t],l[t]||b.unbind(n,H),y&&(--l.touchstart,l.touchstart||b.unbind("touchstart",B).unbind("touchmove",F).unbind("touchend",I).unbind("scroll",j));var r=e(this),s=e.data(this,i);s&&(s[t]=!1),r.unbind(n,R),q(this)||r.removeData(i)}}}var i="virtualMouseBindings",s="virtualTouchID",o="vmouseover vmousedown vmousemove vmouseup vclick vmouseout vmousecancel".split(" "),u="clientX clientY pageX pageY screenX screenY".split(" "),a=e.event.mouseHooks?e.event.mouseHooks.props:[],f=e.event.props.concat(a),l={},c=0,h=0,p=0,d=!1,v=[],m=!1,g=!1,y="addEventListener"in n,b=e(n),w=1,E=0,S,x;e.vmouse={moveDistanceThreshold:10,clickDistanceThreshold:10,resetTimerDuration:1500};for(x=0;x<o.length;x++)e.event.special[o[x]]=U(o[x]);y&&n.addEventListener("click",function(t){var n=v.length,r=t.target,i,o,u,a,f,l;if(n){i=t.clientX,o=t.clientY,S=e.vmouse.clickDistanceThreshold,u=r;while(u){for(a=0;a<n;a++){f=v[a],l=0;if(u===r&&Math.abs(f.x-i)<S&&Math.abs(f.y-o)<S||e.data(u,s)===f.touchID){t.preventDefault(),t.stopPropagation();return}}u=u.parentNode}}},!0)})(e,t,n),function(e){e.mobile={}}(e),function(e,t){var r={touch:"ontouchend"in n};e.mobile.support=e.mobile.support||{},e.extend(e.support,r),e.extend(e.mobile.support,r)}(e),function(e,t,r){function l(t,n,i,s){var o=i.type;i.type=n,s?e.event.trigger(i,r,t):e.event.dispatch.call(t,i),i.type=o}var i=e(n),s=e.mobile.support.touch,o="touchmove scroll",u=s?"touchstart":"mousedown",a=s?"touchend":"mouseup",f=s?"touchmove":"mousemove";e.each("touchstart touchmove touchend tap taphold swipe swipeleft swiperight scrollstart scrollstop".split(" "),function(t,n){e.fn[n]=function(e){return e?this.bind(n,e):this.trigger(n)},e.attrFn&&(e.attrFn[n]=!0)}),e.event.special.scrollstart={enabled:!0,setup:function(){function s(e,n){r=n,l(t,r?"scrollstart":"scrollstop",e)}var t=this,n=e(t),r,i;n.bind(o,function(t){if(!e.event.special.scrollstart.enabled)return;r||s(t,!0),clearTimeout(i),i=setTimeout(function(){s(t,!1)},50)})},teardown:function(){e(this).unbind(o)}},e.event.special.tap={tapholdThreshold:750,emitTapOnTaphold:!0,setup:function(){var t=this,n=e(t),r=!1;n.bind("vmousedown",function(s){function a(){clearTimeout(u)}function f(){a(),n.unbind("vclick",c).unbind("vmouseup",a),i.unbind("vmousecancel",f)}function c(e){f(),!r&&o===e.target?l(t,"tap",e):r&&e.preventDefault()}r=!1;if(s.which&&s.which!==1)return!1;var o=s.target,u;n.bind("vmouseup",a).bind("vclick",c),i.bind("vmousecancel",f),u=setTimeout(function(){e.event.special.tap.emitTapOnTaphold||(r=!0),l(t,"taphold",e.Event("taphold",{target:o}))},e.event.special.tap.tapholdThreshold)})},teardown:function(){e(this).unbind("vmousedown").unbind("vclick").unbind("vmouseup"),i.unbind("vmousecancel")}},e.event.special.swipe={scrollSupressionThreshold:30,durationThreshold:1e3,horizontalDistanceThreshold:30,verticalDistanceThreshold:30,getLocation:function(e){var n=t.pageXOffset,r=t.pageYOffset,i=e.clientX,s=e.clientY;if(e.pageY===0&&Math.floor(s)>Math.floor(e.pageY)||e.pageX===0&&Math.floor(i)>Math.floor(e.pageX))i-=n,s-=r;else if(s<e.pageY-r||i<e.pageX-n)i=e.pageX-n,s=e.pageY-r;return{x:i,y:s}},start:function(t){var n=t.originalEvent.touches?t.originalEvent.touches[0]:t,r=e.event.special.swipe.getLocation(n);return{time:(new Date).getTime(),coords:[r.x,r.y],origin:e(t.target)}},stop:function(t){var n=t.originalEvent.touches?t.originalEvent.touches[0]:t,r=e.event.special.swipe.getLocation(n);return{time:(new Date).getTime(),coords:[r.x,r.y]}},handleSwipe:function(t,n,r,i){if(n.time-t.time<e.event.special.swipe.durationThreshold&&Math.abs(t.coords[0]-n.coords[0])>e.event.special.swipe.horizontalDistanceThreshold&&Math.abs(t.coords[1]-n.coords[1])<e.event.special.swipe.verticalDistanceThreshold){var s=t.coords[0]>n.coords[0]?"swipeleft":"swiperight";return l(r,"swipe",e.Event("swipe",{target:i,swipestart:t,swipestop:n}),!0),l(r,s,e.Event(s,{target:i,swipestart:t,swipestop:n}),!0),!0}return!1},eventInProgress:!1,setup:function(){var t,n=this,r=e(n),s={};t=e.data(this,"mobile-events"),t||(t={length:0},e.data(this,"mobile-events",t)),t.length++,t.swipe=s,s.start=function(t){if(e.event.special.swipe.eventInProgress)return;e.event.special.swipe.eventInProgress=!0;var r,o=e.event.special.swipe.start(t),u=t.target,l=!1;s.move=function(t){if(!o||t.isDefaultPrevented())return;r=e.event.special.swipe.stop(t),l||(l=e.event.special.swipe.handleSwipe(o,r,n,u),l&&(e.event.special.swipe.eventInProgress=!1)),Math.abs(o.coords[0]-r.coords[0])>e.event.special.swipe.scrollSupressionThreshold&&t.preventDefault()},s.stop=function(){l=!0,e.event.special.swipe.eventInProgress=!1,i.off(f,s.move),s.move=null},i.on(f,s.move).one(a,s.stop)},r.on(u,s.start)},teardown:function(){var t,n;t=e.data(this,"mobile-events"),t&&(n=t.swipe,delete t.swipe,t.length--,t.length===0&&e.removeData(this,"mobile-events")),n&&(n.start&&e(this).off(u,n.start),n.move&&i.off(f,n.move),n.stop&&i.off(a,n.stop))}},e.each({scrollstop:"scrollstart",taphold:"tap",swipeleft:"swipe.left",swiperight:"swipe.right"},function(t,n){e.event.special[t]={setup:function(){e(this).bind(n,e.noop)},teardown:function(){e(this).unbind(n)}}})}(e,this)});script.js
jQuery(document).ready(function($) {
var MqL = 1170;
moveNavigation();
$(window).on('resize',
function() { (!window.requestAnimationFrame) ? setTimeout(moveNavigation, 300) : window.requestAnimationFrame(moveNavigation);
});
$('.cd-nav-trigger').on('click',
function(event) {
event.preventDefault();
if ($('.cd-main-content').hasClass('nav-is-visible')) {
closeNav();
$('.cd-overlay').removeClass('is-visible');
} else {
$(this).addClass('nav-is-visible');
$('.cd-primary-nav').addClass('nav-is-visible');
$('.cd-main-header').addClass('nav-is-visible');
$('.cd-main-content').addClass('nav-is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
function() {
$('body').addClass('overflow-hidden');
});
toggleSearch('close');
$('.cd-overlay').addClass('is-visible');
}
});
$('.cd-search-trigger').on('click',
function(event) {
event.preventDefault();
toggleSearch();
closeNav();
});
$('.cd-overlay').on('swiperight',
function() {
if ($('.cd-primary-nav').hasClass('nav-is-visible')) {
closeNav();
$('.cd-overlay').removeClass('is-visible');
}
});
$('.nav-on-left .cd-overlay').on('swipeleft',
function() {
if ($('.cd-primary-nav').hasClass('nav-is-visible')) {
closeNav();
$('.cd-overlay').removeClass('is-visible');
}
});
$('.cd-overlay').on('click',
function() {
closeNav();
toggleSearch('close');
$('.cd-overlay').removeClass('is-visible');
});
$('.cd-primary-nav').children('.has-children').children('a').on('click',
function(event) {
event.preventDefault();
});
//鼠标点击
$('.has-children').children('a').on('click',
function(event) {
if (!checkWindowWidth()) event.preventDefault();
var selected = $(this);
if (selected.next('ul').hasClass('is-hidden')) {
selected.addClass('selected').next('ul').removeClass('is-hidden').end().parent('.has-children').parent('ul').addClass('moves-out');
selected.parent('.has-children').siblings('.has-children').children('ul').addClass('is-hidden').end().children('a').removeClass('selected');
$('.cd-overlay').addClass('is-visible');
} else {
selected.removeClass('selected').next('ul').addClass('is-hidden').end().parent('.has-children').parent('ul').removeClass('moves-out');
$('.cd-overlay').removeClass('is-visible');
}
toggleSearch('close');
});
//鼠标移入一级导航
$('.has-children.first-nav').children('a').on('mouseenter',function(event) {console.log('鼠标移入一级导航');
if (!checkWindowWidth()) event.preventDefault();
var selected = $(this);
showSecNav(selected);
});
//鼠标移出一级导航
$('.has-children.first-nav').children('a').on('mouseleave',function(event) {console.log('鼠标移出一级导航');
if(timer) clearTimeout(timer);
if (!checkWindowWidth()) event.preventDefault();
var selected = $(this);
var timer = setTimeout(function(){
hideSecNav(selected);
},1000)
//鼠标进入二级导航
selected.next('ul').on('mouseenter',function(event) {console.log('鼠标进入二级导航');
console.log(timer);
if(timer) clearTimeout(timer);console.log(timer);
if (!checkWindowWidth()) event.preventDefault();
var selected = $(this).parent('.has-children.first-nav').children('a');
showSecNav(selected);
//鼠标离开二级导航
$(this).on('mouseleave',function(event) {console.log('鼠标离开二级导航');console.log($(this));
if(timer) clearTimeout(timer);
if (!checkWindowWidth()) event.preventDefault();
var selected = $(this).parent('.has-children.first-nav').children('a');
hideSecNav(selected);
});
});
});
//显示二级导航
function showSecNav(selected){
selected.addClass('selected').next('ul').removeClass('is-hidden').end().parent('.has-children').parent('ul').addClass('moves-out');
selected.parent('.has-children').siblings('.has-children').children('ul').addClass('is-hidden').end().children('a').removeClass('selected');
$('.cd-overlay').addClass('is-visible');
}
//隐藏二级导航
function hideSecNav(selected){
selected.removeClass('selected').next('ul').addClass('is-hidden').end().parent('.has-children').parent('ul').removeClass('moves-out');
$('.cd-overlay').removeClass('is-visible');
}
$('.go-back').on('click',
function() {
$(this).parent('ul').addClass('is-hidden').parent('.has-children').parent('ul').removeClass('moves-out');
});
function closeNav() {
$('.cd-nav-trigger').removeClass('nav-is-visible');
$('.cd-main-header').removeClass('nav-is-visible');
$('.cd-primary-nav').removeClass('nav-is-visible');
$('.has-children ul').addClass('is-hidden');
$('.has-children a').removeClass('selected');
$('.moves-out').removeClass('moves-out');
$('.cd-main-content').removeClass('nav-is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
function() {
$('body').removeClass('overflow-hidden');
});
}
function toggleSearch(type) {
if (type == "close") {
$('.cd-search').removeClass('is-visible');
$('.cd-search-trigger').removeClass('search-is-visible');
} else {
$('.cd-search').toggleClass('is-visible');
$('.cd-search-trigger').toggleClass('search-is-visible');
if ($(window).width() > MqL && $('.cd-search').hasClass('is-visible')) $('.cd-search').find('input[type="search"]').focus(); ($('.cd-search').hasClass('is-visible')) ? $('.cd-overlay').addClass('is-visible') : $('.cd-overlay').removeClass('is-visible');
}
}
function checkWindowWidth() {
var e = window,
a = 'inner';
if (! ('innerWidth' in window)) {
a = 'client';
e = document.documentElement || document.body;
}
if (e[a + 'Width'] >= MqL) {
return true;
} else {
return false;
}
}
function moveNavigation() {
var navigation = $('.cd-nav');
var desktop = checkWindowWidth();
if (desktop) {
navigation.detach();
navigation.insertBefore('.cd-header-buttons');
} else {
navigation.detach();
navigation.insertAfter('.cd-main-content');
}
}
});图片素材如下
来源：oschina
链接：https://my.oschina.net/u/4286638/blog/4270230