效果图
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-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-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-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-1169px) { .nav-on-left .cd-logo { left:auto; right:5% } }@media only screen and (min-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-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-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-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-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-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-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-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-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-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-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'); } } });
图片素材如下
