水平导航-三级导航-切换流畅

程序员文章站 2022-03-10 08:37:42

效果图 index.html index

效果图

水平导航-三级导航-切换流畅

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 &amp; hats</a></li>
                                <li><a href="#">gifts</a></li>
                                <li><a href="#">scarves &amp; snoods</a></li>
                            </ul>
                        </li>
                        <li class="has-children">
                            <a href="#0">caps &amp; hats</a>
                            <ul class="is-hidden">
                                <li class="go-back"><a href="#0">accessories</a></li>
                                <li class="see-all"><a href="#">all caps &amp; 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 &amp; 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');
        }
    }
});

图片素材如下

水平导航-三级导航-切换流畅

上一篇：电器类电商网站分类大菜单，配色超舒服~

下一篇：互联网公司常用水平导航（二级导航）

水平导航-三级导航-切换流畅

【CSS】纯CSS实现三级导航（模板）_html/css_WEB-ITnose

vue使用vuex实现首页导航切换不同路由的方法

Android实现简单底部导航栏 Android仿微信滑动切换效果

Android实现简单底部导航栏 Android仿微信滑动切换效果

Axure怎么设计一个左侧二级导航切换效果?

vue使用vuex实现首页导航切换不同路由的方法

纯CSS3单页切换导航菜单界面设计的简单实现

Axure怎么给网页设计左侧三级导航菜单栏?

js实现导航栏中英文切换效果

layui水平导航条三级