|
|
|
|
<!doctype html>
|
|
|
|
|
<html lang="en" transformed="google;v=3">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<title><!--@TITLE@--></title>
|
|
|
|
|
<meta name="keywords" content="<!--@KEYWORDS@-->">
|
|
|
|
|
<meta name="description" content="<!--@DESCRIPTION@-->">
|
|
|
|
|
<link rel="canonical" href="<!--@CANONICAL@-->">
|
|
|
|
|
<meta content="width=device-width,minimum-scale=1,initial-scale=1" name="viewport">
|
|
|
|
|
<!--@OG:IMAGE@-->
|
|
|
|
|
<link rel="shortcut icon" href="//data.chinahighlights.com/favicon.ico">
|
|
|
|
|
<!--@MAIN-CSS@-->
|
|
|
|
|
<!--@ADDON-CSS@-->
|
|
|
|
|
<!-- Google Tag Manager -->
|
|
|
|
|
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
|
|
|
|
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
|
|
|
|
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
|
|
|
|
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
|
|
|
|
})(window,document,'script','dataLayer','GTM-T75N4LL');</script>
|
|
|
|
|
<!-- End Google Tag Manager -->
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<!-- Google Tag Manager (noscript) -->
|
|
|
|
|
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T75N4LL"
|
|
|
|
|
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
|
|
|
|
<!-- End Google Tag Manager (noscript) -->
|
|
|
|
|
|
|
|
|
|
<!--头部导航-->
|
|
|
|
|
<header class="headerbar flex justify-start items-center top-0 left-0 right-0 pl2 pr4 pt2 md-pt0" id="header">
|
|
|
|
|
<div role=button tabindex=0>
|
|
|
|
|
<a href="/"> <img src="https://www.chinahighlights.com/pic/guide/info-template-top-logo.png" width="98px"
|
|
|
|
|
height="53px" alt="chinahighlights logo" class="chinahighlightslogo"></a>
|
|
|
|
|
<div class="topnavitailor">
|
|
|
|
|
<a href="/tour/create-my-trip.htm" class="infocustomize">CREATE MY TRIP <i aria-hidden="true"
|
|
|
|
|
class="fa fa-caret-right toptailorarrow"></i></a>
|
|
|
|
|
<i class="fa fa-bars navimenu topnaviarrowdown action--open"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
<!--总-->
|
|
|
|
|
|
|
|
|
|
<nav id="ml-menu" class="menu">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<button class="action action--close" aria-label="Close Menu"><span class="icon icon--cross"></span></button>
|
|
|
|
|
<div class="menu__wrap">
|
|
|
|
|
<ul data-menu="main" class="menu__level" tabindex="-1" role="menu" aria-label="All">
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link" href="/">Home</a></li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link" data-submenu="submenu-1" aria-owns="submenu-1"
|
|
|
|
|
href="/tour/">China Tours</a></li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link" data-submenu="submenu-2" aria-owns="submenu-2"
|
|
|
|
|
href="#">Destinations</a></li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link" data-submenu="submenu-3" aria-owns="submenu-3"
|
|
|
|
|
href="#">Travel Guide</a></li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link" data-submenu="submenu-4" aria-owns="submenu-4"
|
|
|
|
|
href="#">Chinese Culture</a></li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link" href="/china-trains/">Trains</a></li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link" href="/daytrip/">Day Tours</a></li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link" data-submenu="submenu-7" aria-owns="submenu-7"
|
|
|
|
|
href="#">Asia Tours</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
<!-- China Tours -->
|
|
|
|
|
<ul data-menu="submenu-1" id="submenu-1" class="menu__level" tabindex="-1" role="menu" aria-label="China-Tours">
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link" href="/tour/">China Tours</a></li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link" href="/tour/top-china-tours/">Top 10 Tours</a>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link" href="/tour/family-tours/">Family Tours</a>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link" href="/tour/year.htm">China Tours 2020</a></li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link" href="/tour/china-panda-tours/">Panda Tours</a>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link" href="/greatwall/hiking.htm">Great Wall
|
|
|
|
|
Hiking</a></li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link" href="/tour/china-nature-tours/">Nature
|
|
|
|
|
Tours</a></li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link" href="/tour/silk-road-tours/">Silk Road
|
|
|
|
|
Tours</a></li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link" href="/tour/expats-tours.htm">China Expats
|
|
|
|
|
Tours</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
<!-- Destinations -->
|
|
|
|
|
<ul data-menu="submenu-2" id="submenu-2" class="menu__level" tabindex="-1" role="menu"
|
|
|
|
|
aria-label="Destinations">
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link" href="/citytour/">Destinations</a></li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link" href="/beijing/tours.htm">Beijing</a></li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link" href="/shanghai/tours.htm">Shanghai</a></li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link" href="/guilin/tours.htm">Guilin</a></li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link" href="/zhangjiajie/tours.htm">Zhangjiajie</a>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link" href="/yunnan/tours.htm">Yunnan</a></li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link" href="/huangshantours.htm">Huangshan</a></li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link" href="/xian/tours.htm">Xi'an</a></li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link" href="/chengdu/tours.htm">Chengdu</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
<!-- Travel Guide -->
|
|
|
|
|
<ul data-menu="submenu-3" id="submenu-3" class="menu__level" tabindex="-1" role="menu"
|
|
|
|
|
aria-label="Travel-Guide">
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link" href="/travelguide/">Travel Guide</a></li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link" href="/map/">China Maps</a></li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link" href="/travelguide/article/">China Tour
|
|
|
|
|
Planning</a></li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link"
|
|
|
|
|
href="/travelguide/top-highlights-of-china.htm">Best of China</a>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link" href="/travelguide/visa-application/">China
|
|
|
|
|
Visas</a></li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link"
|
|
|
|
|
href="/travelguide/china-travel-city-guide.htm">China Area
|
|
|
|
|
Guide</a></li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link" href="/travelguide/china-attraction-guide.htm">China
|
|
|
|
|
Top Attractions</a></li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link" href="/weather/">China Weather</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
<!-- Culture -->
|
|
|
|
|
<ul data-menu="submenu-4" id="submenu-4" class="menu__level" tabindex="-1" role="menu" aria-label="Culture">
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link" href="/travelguide/culture/">Culture</a></li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link" href="/travelguide/chinese-zodiac/">Chinese
|
|
|
|
|
Zodiac</a></li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link" href="/travelguide/chinese-food/">Chinese
|
|
|
|
|
Food</a></li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link" href="/travelguide/culture/china-history.htm">China
|
|
|
|
|
History</a></li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link" href="/travelguide/religion.htm">Chinese
|
|
|
|
|
Religions</a></li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link" href="/festivals/">Chinese Festivals</a></li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link"
|
|
|
|
|
href="/travelguide/special-report/chinese-new-year/">Chinese New
|
|
|
|
|
Year</a></li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link" href="/travelguide/kungfu/">Kung Fu</a></li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link" href="/travelguide/chinese-tea/">Chinese
|
|
|
|
|
Tea</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Asia Tours -->
|
|
|
|
|
<ul data-menu="submenu-7" id="submenu-7" class="menu__level" tabindex="-1" role="menu" aria-label="Asia-Tours">
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link" href="/tour/asia-tours/">Asia Tours</a>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link"
|
|
|
|
|
href="https://www.asiahighlights.com/thailand/tours/?utm_source=chinahighlights&utm_medium=referral&utm_campaign=asiatours">Thailand</a>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link"
|
|
|
|
|
href="https://www.asiahighlights.com/vietnam/tours/?utm_source=chinahighlights&utm_medium=referral&utm_campaign=asiatours">Vietnam</a>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link"
|
|
|
|
|
href="https://www.asiahighlights.com/india/tours/?utm_source=chinahighlights&utm_medium=referral&utm_campaign=asiatours">India</a>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link"
|
|
|
|
|
href="https://www.asiahighlights.com/japan/tours/?utm_source=chinahighlights&utm_medium=referral&utm_campaign=asiatours">Japan</a>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link"
|
|
|
|
|
href="https://www.asiahighlights.com/myanmar/tours/?utm_source=chinahighlights&utm_medium=referral&utm_campaign=asiatours">Myanmar</a>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="menu__item" role="menuitem"><a class="menu__link"
|
|
|
|
|
href="https://www.asiahighlights.com/tours/?utm_source=chinahighlights&utm_medium=referral&utm_campaign=asiatours">Top
|
|
|
|
|
Asia Tours</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</nav>
|
|
|
|
|
|
|
|
|
|
<!--@TOP-BANNER@-->
|
|
|
|
|
<!--@TOP-VIDEO@-->
|
|
|
|
|
|
|
|
|
|
<!--@HEAD_1@-->
|
|
|
|
|
<div id="main_content_mobile">
|
|
|
|
|
<!--@CUSTOM-CONENT@-->
|
|
|
|
|
|
|
|
|
|
<!--@Match-Content-GOOGLE@-->
|
|
|
|
|
|
|
|
|
|
<!--@ARTICLENEXT@-->
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<footer>
|
|
|
|
|
<div class="infotailor">
|
|
|
|
|
<span class="infotailorword">We are here to help you...<br> start planning your tailor-made China tour with 1-1 help from our travel advisors.
|
|
|
|
|
<span class="infotailormade"><a href="https://www.chinahighlights.com/tour/create-my-trip.htm">Create Your Trip <i
|
|
|
|
|
aria-hidden="true" class="fa fa-caret-right"></i></a></span>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="infobottom">
|
|
|
|
|
<div class="bottomwechat">
|
|
|
|
|
<p><img src="https://data.chinahighlights.com/pic/guide/info-template-qr-code.jpg" alt=xxx width=100px
|
|
|
|
|
height=100px></p>
|
|
|
|
|
<span class="wechattitle">Contact us via WeChat</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="bottommedia">
|
|
|
|
|
<span class="followtitle">Follow Us</span>
|
|
|
|
|
<ul>
|
|
|
|
|
<li><a href="https://www.facebook.com/Chinahighlights" rel="nofollow" title="Follow us on Facebook"
|
|
|
|
|
class="fb" target="_blank">
|
|
|
|
|
<i class="fa fa-facebook"></i>Facebook
|
|
|
|
|
|
|
|
|
|
</a></li>
|
|
|
|
|
<li><a href="https://twitter.com/Chinahighlights" rel="nofollow" title="Share us on Twitter" class="tw"
|
|
|
|
|
target="_blank"> <i class="fa fa-twitter"></i>Twitter </a></li>
|
|
|
|
|
<li><a href="https://www.instagram.com/chinahighlights/" rel="nofollow" title="Follow us on Instagram"
|
|
|
|
|
class="linkin" target="_blank">
|
|
|
|
|
<i class="fa fa-instagram" aria-hidden="true"></i>
|
|
|
|
|
Instagram </a></li>
|
|
|
|
|
<li><i class="fab fa-weixin" aria-hidden="true"></i></li>
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="bottomlinks">
|
|
|
|
|
<span class="followtitle"><a href="/aboutus/" rel="nofollow">About Us</a></span>
|
|
|
|
|
<ul>
|
|
|
|
|
|
|
|
|
|
<li><a href="/contactus/" rel="nofollow">Contact Us</a></li>
|
|
|
|
|
<li><a href="/privacy.htm" rel="nofollow">Privavy</a></li>
|
|
|
|
|
<li><a href="/aboutus/terms.htm" rel="nofollow">Terms</a></li>
|
|
|
|
|
<li><a href="/partner/" rel="nofollow">Partner</a></li>
|
|
|
|
|
<li><a href="/aboutus/jobs-volunteer.htm" rel="nofollow">Work for Us</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="featureon">
|
|
|
|
|
<span class="followtitle">Featured on</span>
|
|
|
|
|
<img src=https://data.chinahighlights.com/pic/guide/info-template-feature-on.png alt=xxx
|
|
|
|
|
class="img-responsive" width=436px height=250px>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bottomlogo">
|
|
|
|
|
© 1998-2020 China Highlights <br>— Discovery Your Way!
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</footer>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>/* memu js https://data.chinahighlights.com/js/mobile-menu.js */
|
|
|
|
|
(function(window){function classReg(className){return new RegExp("(^|\\s+)"+className+"(\\s+|$)")}var hasClass,addClass,removeClass;if("classList" in document.documentElement){hasClass=function(elem,c){return elem.classList.contains(c)};addClass=function(elem,c){elem.classList.add(c)};removeClass=function(elem,c){elem.classList.remove(c)}}else{hasClass=function(elem,c){return classReg(c).test(elem.className)};addClass=function(elem,c){if(!hasClass(elem,c)){elem.className=elem.className+" "+c}};removeClass=function(elem,c){elem.className=elem.className.replace(classReg(c)," ")}}function toggleClass(elem,c){var fn=hasClass(elem,c)?removeClass:addClass;fn(elem,c)}var classie={hasClass:hasClass,addClass:addClass,removeClass:removeClass,toggleClass:toggleClass,has:hasClass,add:addClass,remove:removeClass,toggle:toggleClass};if(typeof define==="function"&&define.amd){define(classie)}else{if(typeof exports==="object"){module.exports=classie}else{window.classie=classie}}})(window);
|
|
|
|
|
!function(e,n,t){function r(e,n){return typeof e===n}function o(){var e,n,t,o,i,s,a;for(var f in C){if(C.hasOwnProperty(f)){if(e=[],n=C[f],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length)){for(t=0;t<n.options.aliases.length;t++){e.push(n.options.aliases[t].toLowerCase())}}for(o=r(n.fn,"function")?n.fn():n.fn,i=0;i<e.length;i++){s=e[i],a=s.split("."),1===a.length?Modernizr[a[0]]=o:(!Modernizr[a[0]]||Modernizr[a[0]] instanceof Boolean||(Modernizr[a[0]]=new Boolean(Modernizr[a[0]])),Modernizr[a[0]][a[1]]=o),g.push((o?"":"no-")+a.join("-"))}}}}function i(e){var n=w.className,t=Modernizr._config.classPrefix||"";if(x&&(n=n.baseVal),Modernizr._config.enableJSClass){var r=new RegExp("(^|\\s)"+t+"no-js(\\s|$)");n=n.replace(r,"$1"+t+"js$2")}Modernizr._config.enableClasses&&(n+=" "+t+e.join(" "+t),x?w.className.baseVal=n:w.className=n)}function s(e){return e.replace(/([a-z])-([a-z])/g,function(e,n,t){return n+t.toUpperCase()}).replace(/^-/,"")}function a(e,n){return !!~(""+e).indexOf(n)}function f(){return"function"!=typeof n.createElement?n.createElement(arguments[0]):x?n.createElementNS.call(n,"http://www.w3.org/2000/svg",arguments[0]):n.createElement.apply(n,arguments)}function l(e,n){return function(){return e.apply(n,arguments)}}function u(e,n,t){var o;for(var i in e){if(e[i] in n){return t===!1?e[i]:(o=n[e[i]],r(o,"function")?l(o,t||n):o)}}return !1}function p(e){return e.replace(/([A-Z])/g,function(e,n){return"-"+n.toLowerCase()}).replace(/^ms-/,"-ms-")}function d(){var e=n.body;return e||(e=f(x?"svg":"body"),e.fake=!0),e}function c(e,t,r,o){var i,s,a,l,u="modernizr",p=f("div"),c=d();if(parseInt(r,10)){for(;r--;){a=f("div"),a.id=o?o[r]:u+(r+1),p.appendChild(a)}}return i=f("style"),i.type="text/css",i.id="s"+u,(c.fake?c:p).appendChild(i),c.appendChild(p),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(n.createTextNode(e)),p.id=u,c.fake&&(c.style.background="",c.style.overflow="hidden",l=w.style.overflow,w.style.overflow="hidden",w.appendChild(c)),s=t(p,e),c.fake?(c.parentNode.removeChild(c),w.style.overflow=l,w.offsetHeight):p.parentNode.removeChild(p),!!s}function m(n,r){var o=n.length;if("CSS" in e&&"supports" in e.CSS){for(;o--;){if(e.CSS.supports(p(n[o]),r)){return !0}}return !1}if("CSSSupportsRule" in e){for(var i=[];o--;){i.push("("+p(n[o])+":"+r+")")}return i=i.join(" or "),c("@supports ("+i+") { #modernizr { position: absolute; } }",function(e){return"absolute"==getComputedStyle(e,null).position})}return t}function v(e,n,o,i){function l(){p&&(delete z.style,delete z.modElem)}if(i=r(i,"undefined")?!1:i,!r(o,"undefined")){var u=m(e,o);if(!r(u,"undefined")){return u}}for(var p,d,c,v,h,y=["modernizr","tspan"];!z.style;){p=!0,z.modElem=f(y.shift()),z.style=z.modElem.style}for(c=e.length,d=0;c>d;d++){if(v=e[d],h=z.style[v],a(v,"-")&&(v=s(v)),z.style[v]!==t){if(i||r(o,"undefined")){return l(),"pfx"==n?v:!0}try{z.style[v]=o}catch(g){}if(z.style[v]!=h){return l(),"pfx"==n?v:!0}}}return l(),!1}function h(e,n,t,o,i){var s=e.charAt(0).toUpperCase()+e.slice(1),a=(e+" "+b.join(s+" ")+s).split(" ");return r(n,"string")||r(n,"undefined")?v(a,n,o,i):(a=(e+" "+N.join(s+" ")+s).split(" "),u(a,n,t))}function y(e,n,r){return h(e,t,t,n,r)}var g=[],C=[],_={_version:"3.2.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var t=this;setTimeout(function(){n(t[e])},0)},addTest:function(e,n,t){C.push({name:e,fn:n,options:t})},addAsyncTest:function(e){C.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=_,Modernizr=new Modernizr;var w=n.documentElement,x="svg"===w.nodeName.toLowerCase(),S="Moz O ms Webkit",b=_._config.usePrefixes?S.split(" "):[];
|
|
|
|
|
_._cssomPrefixes=b;var E=function(n){var r,o=prefixes.length,i=e.CSSRule;if("undefined"==typeof i){return t}if(!n){return !1}if(n=n.replace(/^@/,""),r=n.replace(/-/g,"_").toUpperCase()+"_RULE",r in i){return"@"+n}for(var s=0;o>s;s++){var a=prefixes[s],f=a.toUpperCase()+"_"+r;if(f in i){return"@-"+a.toLowerCase()+"-"+n}}return !1};_.atRule=E;var N=_._config.usePrefixes?S.toLowerCase().split(" "):[];_._domPrefixes=N;var P={elem:f("modernizr")};Modernizr._q.push(function(){delete P.elem});var z={style:P.elem.style};Modernizr._q.unshift(function(){delete z.style}),_.testAllProps=h;_.prefixed=function(e,n,t){return 0===e.indexOf("@")?E(e):(-1!=e.indexOf("-")&&(e=s(e)),n?h(e,n,t):h(e,"pfx"))};_.testAllProps=y,Modernizr.addTest("cssanimations",y("animationName","a",!0)),o(),i(g),delete _.addTest,delete _.addAsyncTest;for(var T=0;T<Modernizr._q.length;T++){Modernizr._q[T]()}e.Modernizr=Modernizr}(window,document);(function(window){var support={animations:Modernizr.cssanimations},animEndEventNames={"WebkitAnimation":"webkitAnimationEnd","OAnimation":"oAnimationEnd","msAnimation":"MSAnimationEnd","animation":"animationend"},animEndEventName=animEndEventNames[Modernizr.prefixed("animation")],onEndAnimation=function(el,callback){var onEndCallbackFn=function(ev){if(support.animations){if(ev.target!=this){return}this.removeEventListener(animEndEventName,onEndCallbackFn)}if(callback&&typeof callback==="function"){callback.call()}};if(support.animations){el.addEventListener(animEndEventName,onEndCallbackFn)}else{onEndCallbackFn()}};function extend(a,b){for(var key in b){if(b.hasOwnProperty(key)){a[key]=b[key]}}return a}function MLMenu(el,options){this.el=el;this.options=extend({},this.options);extend(this.options,options);this.menus=[].slice.call(this.el.querySelectorAll(".menu__level"));this.current_menu=0;var current_menu;this.menus.forEach(function(menuEl,pos){var items=menuEl.querySelectorAll(".menu__item");items.forEach(function(itemEl,iPos){var currentLink=itemEl.querySelector(".menu__link--current");if(currentLink){current_menu=pos}})});if(current_menu){this.current_menu=current_menu}this._init()}MLMenu.prototype.options={breadcrumbsCtrl:true,initialBreadcrumb:"all",backCtrl:true,itemsDelayInterval:60,direction:"r2l",onItemClick:function(ev,itemName){return false}};MLMenu.prototype._init=function(){this.menusArr=[];this.breadCrumbs=false;var self=this;var submenus=[];this.menus.forEach(function(menuEl,pos){var menu={menuEl:menuEl,menuItems:[].slice.call(menuEl.querySelectorAll(".menu__item"))};self.menusArr.push(menu);if(pos===self.current_menu){classie.add(menuEl,"menu__level--current")}var menu_x=menuEl.getAttribute("data-menu");var links=menuEl.querySelectorAll(".menu__link");links.forEach(function(linkEl,lPos){var submenu=linkEl.getAttribute("data-submenu");if(submenu){var pushMe={"menu":submenu,"name":linkEl.innerHTML};if(submenus[pos]){submenus[pos].push(pushMe)}else{submenus[pos]=[];submenus[pos].push(pushMe)}}})});this.menus.forEach(function(menuEl,pos){var menu_x=menuEl.getAttribute("data-menu");submenus.forEach(function(subMenuEl,menu_root){subMenuEl.forEach(function(subMenuItem,subPos){if(subMenuItem.menu==menu_x){self.menusArr[pos].backIdx=menu_root;self.menusArr[pos].name=subMenuItem.name}})})});if(self.options.breadcrumbsCtrl){this.breadcrumbsCtrl=document.createElement("nav");this.breadcrumbsCtrl.className="menu__breadcrumbs";this.breadcrumbsCtrl.setAttribute("aria-label","You are here");this.el.insertBefore(this.breadcrumbsCtrl,this.el.firstChild);this._addBreadcrumb(0);if(self.menusArr[self.current_menu].backIdx!=0&&self.current_menu!=0){this._crawlCrumbs(self.menusArr[self.current_menu].backIdx,self.menusArr);this.breadCrumbs=true}if(self.current_menu!=0){this._addBreadcrumb(self.current_menu);this.breadCrumbs=true}}if(this.options.backCtrl){this.backCtrl=document.createElement("button");if(this.breadCrumbs){this.backCtrl.className="menu__back"}else{this.backCtrl.className="menu__back menu__back--hidden"}this.backCtrl.setAttribute("aria-label","Go back");this.backCtrl.innerHTML='<span class="icon icon--
|
|
|
|
|
}this.isAnimating=true;this.menusArr[this.menus.indexOf(subMenuEl)].backIdx=this.current_menu;this.menusArr[this.menus.indexOf(subMenuEl)].name=subMenuName;this._menuOut(clickPosition);this._menuIn(subMenuEl,clickPosition)};MLMenu.prototype._back=function(){if(this.isAnimating){return false}this.isAnimating=true;this._menuOut();var backMenu=this.menusArr[this.menusArr[this.current_menu].backIdx].menuEl;this._menuIn(backMenu);if(this.options.breadcrumbsCtrl){this.breadcrumbsCtrl.removeChild(this.breadcrumbsCtrl.lastElementChild)}};MLMenu.prototype._menuOut=function(clickPosition){var self=this,currentMenu=this.menusArr[this.current_menu].menuEl,isBackNavigation=typeof clickPosition=="undefined"?true:false;this.menusArr[this.current_menu].menuItems.forEach(function(item,pos){item.style.WebkitAnimationDelay=item.style.animationDelay=isBackNavigation?parseInt(pos*self.options.itemsDelayInterval)+"ms":parseInt(Math.abs(clickPosition-pos)*self.options.itemsDelayInterval)+"ms"});if(this.options.direction==="r2l"){classie.add(currentMenu,!isBackNavigation?"animate-outToLeft":"animate-outToRight")}else{classie.add(currentMenu,isBackNavigation?"animate-outToLeft":"animate-outToRight")}};MLMenu.prototype._menuIn=function(nextMenuEl,clickPosition){var self=this,currentMenu=this.menusArr[this.current_menu].menuEl,isBackNavigation=typeof clickPosition=="undefined"?true:false,nextMenuIdx=this.menus.indexOf(nextMenuEl),nextMenu=this.menusArr[nextMenuIdx],nextMenuEl=nextMenu.menuEl,nextMenuItems=nextMenu.menuItems,nextMenuItemsTotal=nextMenuItems.length;nextMenuItems.forEach(function(item,pos){item.style.WebkitAnimationDelay=item.style.animationDelay=isBackNavigation?parseInt(pos*self.options.itemsDelayInterval)+"ms":parseInt(Math.abs(clickPosition-pos)*self.options.itemsDelayInterval)+"ms";var farthestIdx=clickPosition<=nextMenuItemsTotal/2||isBackNavigation?nextMenuItemsTotal-1:0;if(pos===farthestIdx){onEndAnimation(item,function(){if(self.options.direction==="r2l"){classie.remove(currentMenu,!isBackNavigation?"animate-outToLeft":"animate-outToRight");classie.remove(nextMenuEl,!isBackNavigation?"animate-inFromRight":"animate-inFromLeft")}else{classie.remove(currentMenu,isBackNavigation?"animate-outToLeft":"animate-outToRight");classie.remove(nextMenuEl,isBackNavigation?"animate-inFromRight":"animate-inFromLeft")}classie.remove(currentMenu,"menu__level--current");classie.add(nextMenuEl,"menu__level--current");self.current_menu=nextMenuIdx;if(!isBackNavigation){if(self.options.backCtrl){classie.remove(self.backCtrl,"menu__back--hidden")}self._addBreadcrumb(nextMenuIdx)}else{if(self.current_menu===0&&self.options.backCtrl){classie.add(self.backCtrl,"menu__back--hidden")}}self.isAnimating=false;nextMenuEl.focus()})}});if(this.options.direction==="r2l"){classie.add(nextMenuEl,!isBackNavigation?"animate-inFromRight":"animate-inFromLeft")}else{classie.add(nextMenuEl,isBackNavigation?"animate-inFromRight":"animate-inFromLeft")}};MLMenu.prototype._addBreadcrumb=function(idx){if(!this.options.breadcrumbsCtrl){return false}var bc=document.createElement("a");bc.href="#";bc.innerHTML=idx?this.menusArr[idx].name:this.options.initialBreadcrumb;this.breadcrumbsCtrl.appendChild(bc);var self=this;bc.addEventListener("click",function(ev){ev.preventDefault();if(!bc.nextSibling||self.isAnimating){return false}self.isAnimating=true;self._menuOut();var nextMenu=self.menusArr[idx].menuEl;self._menuIn(nextMenu);var siblingNode;while(siblingNode=bc.nextSibling){self.breadcrumbsCtrl.removeChild(siblingNode)}})};MLMenu.prototype._crawlCrumbs=function(currentMenu,menuArray){if(menuArray[currentMenu].backIdx!=0){this._crawlCrumbs(menuArray[currentMenu].backIdx,menuArray)}this._addBreadcrumb(currentMenu)};window.MLMenu=MLMenu})(window);(function(){var menuEl=document.getElementById("ml-menu"),mlmenu=new MLMenu(menuEl,{backCtrl:true,});var openMenuCtrl=document.querySelector(".action--open"),closeMenuCtrl=document.querySelector(".action--close");openMenuCtrl.addEventListener("click",openMenu);closeMenuCtrl.addEventListener("click",closeMenu);function openMenu(){
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<!--@PRODUCT-JS@-->
|
|
|
|
|
<!--@ADDON-JS@-->
|
|
|
|
|
<!--@IN-ARTICLE-GOOGLE@-->
|
|
|
|
|
<!--@ADDTHIS-WIDGET@-->
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
