以下是 jQuery 3D响应式菜单导航特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="gb2312">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<title>jQuery 3D响应式菜单导航特效</title>
</head>
<body>
<a href="#cd-nav" class="cd-nav-trigger">
Menu<span><!-- used to create the menu icon --></span>
</a> <!-- .cd-nav-trigger -->
<main>
<section class="cd-section index cd-selected">
<div class="cd-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, quod dicta aliquid nemo repellendus distinctio minus dolor aperiam suscipit, ea enim accusantium, deleniti qui sequi sint nihil modi amet eligendi, quidem animi error labore voluptatibus sed. Qui magnam labore, iusto nostrum. Praesentium non, impedit accusantium consequatur officia architecto, mollitia placeat aperiam tenetur pariatur voluptatibus corrupti vitae deserunt! Nostrum non mollitia deserunt ipsam. Sunt quaerat natus cupiditate iure ipsa voluptatibus recusandae ratione vitae amet distinctio, voluptas, minus vero expedita ea fugit similique sit cumque ad id facere? Ab quas, odio neque quis ratione. Natus labore sit esse, porro placeat eum hic.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At magnam, nam placeat voluptatem officiis natus dicta necessitatibus ut. Minima, maxime, in recusandae aperiam fugit sed asperiores eum quasi voluptate officia rem culpa qui praesentium voluptatem eos necessitatibus repellat, ullam voluptas delectus distinctio animi. Reiciendis voluptas, doloremque accusantium delectus deleniti dicta id sunt quo omnis eum quidem, odio ex nesciunt explicabo provident rem fugiat, fugit sequi minima animi laudantium cum? Blanditiis possimus eaque facere in nulla quibusdam a quo recusandae aspernatur alias mollitia fugiat commodi itaque dolore, nihil sunt rerum necessitatibus aut, eum tempora numquam obcaecati sit vitae? Asperiores in magnam aliquam, temporibus iure placeat rerum consectetur quis rem facilis, doloribus laudantium dolorum ipsam voluptatibus officia non repellat corrupti harum, eius totam voluptates vero beatae omnis aliquid sequi! Perferendis nihil tenetur eos minima maiores iure quas incidunt reiciendis sequi quidem quis deserunt distinctio tempora aliquid vero dolore, voluptas molestiae exercitationem nobis natus ut corporis! Voluptatibus, adipisci accusamus omnis laboriosam libero totam illum quia perferendis quaerat molestias odio, architecto soluta mollitia dolore asperiores quidem quo incidunt cupiditate voluptates beatae. Amet facilis voluptates quibusdam. Reprehenderit consectetur autem iusto velit aspernatur quidem esse, nostrum officia nisi molestiae dolorem alias, praesentium harum voluptate ut fugiat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa sapiente quod nemo corporis obcaecati maiores animi, doloribus fugit porro deserunt voluptatem unde possimus alias nostrum delectus nisi, laudantium accusamus enim vel molestias velit. Blanditiis eaque impedit necessitatibus dolorum, magnam consectetur est et nam quibusdam ipsum omnis reiciendis ratione odio vitae quo cumque quia autem! Ab omnis ut libero commodi! Ad voluptates sunt accusamus iusto voluptatem, ex distinctio tenetur quia laborum!
</p>
</div>
</section> <!-- .cd-section -->
</main>
<nav class="cd-nav-container" id="cd-nav">
<header>
<h3>Navigation</h3>
<a href="#0" class="cd-close-nav">Close</a>
</header>
<ul class="cd-nav">
<li class="cd-selected" data-menu="index">
<a href="#">
<span>
<svg class="nc-icon outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64"><g transform="translate(0, 0)"> <polyline data-cap="butt" fill="none" stroke="#9e85d0" stroke-width="2" stroke-miterlimit="10" points="10,24.9 10,60 26,60 26,44 38,44 38,60 54,60 54,24.9 " stroke-linejoin="square" stroke-linecap="butt"></polyline> <polyline data-color="color-2" fill="none" stroke="#9e85d0" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" points=" 4,30 32,6 60,30 " stroke-linejoin="square"></polyline> <rect data-color="color-2" x="26" y="24" fill="none" stroke="#9e85d0" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" width="12" height="10" stroke-linejoin="square"></rect> </g></svg>
</span>
<em>Intro</em>
</a>
</li>
<li data-menu="projects">
<a href="#">
<span>
<svg class="nc-icon outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64"> <g transform="translate(0, 0)"> <polyline data-color="color-2" fill="none" stroke="#9e85d0" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" points=" 22,12 22,4 42,4 42,12 " stroke-linejoin="square"></polyline> <line fill="none" stroke="#9e85d0" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="44" y1="44" x2="20" y2="44" stroke-linejoin="square"></line> <polyline fill="none" stroke="#9e85d0" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" points="12,44 2,44 2,12 62,12 62,44 52,44 " stroke-linejoin="square"></polyline> <polyline fill="none" stroke="#9e85d0" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" points="58,44 58,60 6,60 6,44 " stroke-linejoin="square"></polyline> <rect data-color="color-2" x="22" y="22" fill="none" stroke="#9e85d0" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" width="20" height="10" stroke-linejoin="square"></rect> <rect data-color="color-2" x="12" y="40" fill="none" stroke="#9e85d0" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" width="8" height="8" stroke-linejoin="square"></rect> <rect data-color="color-2" x="44" y="40" fill="none" stroke="#9e85d0" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" width="8" height="8" stroke-linejoin="square"></rect> </g> </svg>
</span>
<em>Projects</em>
</a>
</li>
<li data-menu="about">
<a href="#">
<span>
<svg class="nc-icon outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64"> <g transform="translate(0, 0)"> <polyline data-color="color-2" fill="none" stroke="#9e85d0" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" points=" 38,16 62,16 62,58 2,58 2,16 26,16 " stroke-linejoin="square"></polyline> <path fill="none" stroke="#9e85d0" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M38,20H26V8 c0-3.3,2.7-6,6-6h0c3.3,0,6,2.7,6,6V20z" stroke-linejoin="square"></path> <path fill="none" stroke="#9e85d0" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M20,38L20,38 c-2.2,0-4-1.8-4-4v-2c0-2.2,1.8-4,4-4h0c2.2,0,4,1.8,4,4v2C24,36.2,22.2,38,20,38z" stroke-linejoin="square"></path> <line fill="none" stroke="#9e85d0" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="38" y1="36" x2="54" y2="36" stroke-linejoin="square"></line> <line fill="none" stroke="#9e85d0" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="38" y1="44" x2="48" y2="44" stroke-linejoin="square"></line> <path fill="none" stroke="#9e85d0" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M30,48H10v0 c0-3.3,2.7-6,6-6h8C27.3,42,30,44.7,30,48L30,48z" stroke-linejoin="square"></path> <line fill="none" stroke="#9e85d0" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="32" y1="12" x2="32" y2="10" stroke-linejoin="square"></line> </g> </svg>
</span>
<em>About</em>
</a>
</li>
<li data-menu="services">
<a href="#">
<span>
<svg class="nc-icon outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64"><g transform="translate(0, 0)"> <line data-cap="butt" data-color="color-2" fill="none" stroke="#9e85d0" stroke-width="2" stroke-miterlimit="10" x1="46" y1="56" x2="58" y2="44" stroke-linejoin="square" stroke-linecap="butt"></line> <line data-cap="butt" data-color="color-2" fill="none" stroke="#9e85d0" stroke-width="2" stroke-miterlimit="10" x1="24" y1="10" x2="12" y2="22" stroke-linejoin="square" stroke-linecap="butt"></line> <polyline data-color="color-2" fill="none" stroke="#9e85d0" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" points=" 19,29 6,16 18,4 31,17 " stroke-linejoin="square"></polyline> <polyline data-color="color-2" fill="none" stroke="#9e85d0" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" points=" 45,31 58,44 60,58 46,56 33,43 " stroke-linejoin="square"></polyline> <rect x="21.1" y="2.7" transform="matrix(0.7071 0.7071 -0.7071 0.7071 31 -12.8406)" fill="none" stroke="#9e85d0" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" width="19.8" height="56.6" stroke-linejoin="square"></rect> <line fill="none" stroke="#9e85d0" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="24" y1="24" x2="30" y2="30" stroke-linejoin="square"></line> <line fill="none" stroke="#9e85d0" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="18" y1="30" x2="22" y2="34" stroke-linejoin="square"></line> <line fill="none" stroke="#9e85d0" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="36" y1="12" x2="42" y2="18" stroke-linejoin="square"></line> <line fill="none" stroke="#9e85d0" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="30" y1="18" x2="34" y2="22" stroke-linejoin="square"></line> <line fill="none" stroke="#9e85d0" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="12" y1="36" x2="18" y2="42" stroke-linejoin="square"></line> </g></svg>
</span>
<em>Services</em>
</a>
</li>
<li data-menu="careers">
<a href="#">
<span>
<svg class="nc-icon outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64"> <g transform="translate(0, 0)"> <polyline data-cap="butt" data-color="color-2" fill="none" stroke="#9e85d0" stroke-width="2" stroke-miterlimit="10" points="24,40 28,48 36,48 40,40 " stroke-linejoin="square" stroke-linecap="butt"></polyline> <line data-cap="butt" data-color="color-2" fill="none" stroke="#9e85d0" stroke-width="2" stroke-miterlimit="10" x1="24" y1="62" x2="28" y2="48" stroke-linejoin="square" stroke-linecap="butt"></line> <line data-cap="butt" data-color="color-2" fill="none" stroke="#9e85d0" stroke-width="2" stroke-miterlimit="10" x1="36" y1="48" x2="40" y2="62" stroke-linejoin="square" stroke-linecap="butt"></line> <path data-cap="butt" fill="none" stroke="#9e85d0" stroke-width="2" stroke-miterlimit="10" d="M39.7,40H40c12.2,0,22,9.8,22,22v0H2 v0c0-12.2,9.8-22,22-22h0.3" stroke-linejoin="square" stroke-linecap="butt"></path> <path data-cap="butt" fill="none" stroke="#9e85d0" stroke-width="2" stroke-miterlimit="10" d="M47.9,27.5C47.2,35.7,40.3,42,32,42 h0c-8.3,0-15.2-6.4-15.9-14.5" stroke-linejoin="square" stroke-linecap="butt"></path> <path fill="none" stroke="#9e85d0" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M16,18c0-8.8,7.2-16,16-16 h0c8.8,0,16,7.2,16,16" stroke-linejoin="square"></path> <path data-color="color-2" fill="none" stroke="#9e85d0" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M12.1,18 c0,0.3-0.1,0.7-0.1,1c0,6.1,4.9,11,11,11c3.7,0,7-1.9,9-4.7c2,2.8,5.3,4.7,9,4.7c6.1,0,11-4.9,11-11c0-0.3,0-0.7-0.1-1H12.1z" stroke-linejoin="square"></path> </g> </svg>
</span>
<em>Careers</em>
</a>
</li>
<li data-menu="contact">
<a href="#">
<span>
<svg class="nc-icon outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64"><g transform="translate(0, 0)"> <polyline data-cap="butt" data-color="color-2" fill="none" stroke="#9e85d0" stroke-width="2" stroke-miterlimit="10" points="10,18 32,36 54,18 " stroke-linejoin="square" stroke-linecap="butt"></polyline> <rect x="2" y="10" fill="none" stroke="#9e85d0" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" width="60" height="44" stroke-linejoin="square"></rect> <line data-cap="butt" data-color="color-2" fill="none" stroke="#9e85d0" stroke-width="2" stroke-miterlimit="10" x1="10" y1="44" x2="18" y2="34" stroke-linejoin="square" stroke-linecap="butt"></line> <line data-cap="butt" data-color="color-2" fill="none" stroke="#9e85d0" stroke-width="2" stroke-miterlimit="10" x1="54" y1="44" x2="46" y2="34" stroke-linejoin="square" stroke-linecap="butt"></line> </g></svg>
</span>
<em>Contact</em>
</a>
</li>
</ul> <!-- .cd-3d-nav -->
</nav>
<div class="cd-overlay"><!-- shadow layer visible when navigation is visible --></div>
<script src="js/jquery-2.1.1.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
</body>
</html>
JS代码(main.js):
jQuery(document).ready(function($){
//open navigation clicking the menu icon$('.cd-nav-trigger').on('click',function(event){
event.preventDefault();
toggleNav(true);
}
);
//close the navigation$('.cd-close-nav,.cd-overlay').on('click',function(event){
event.preventDefault();
toggleNav(false);
}
);
//select a new section$('.cd-nav li').on('click',function(event){
event.preventDefault();
var target = $(this),//detect which section user has chosensectionTarget = target.data('menu');
if( !target.hasClass('cd-selected') ){
//if user has selected a section different from the one alredy visible//update the navigation -> assign the .cd-selected class to the selected itemtarget.addClass('cd-selected').siblings('.cd-selected').removeClass('cd-selected');
//load the new sectionloadNewContent(sectionTarget);
}
else{
// otherwise close navigationtoggleNav(false);
}
}
);
function toggleNav(bool){
$('.cd-nav-container,.cd-overlay').toggleClass('is-visible',bool);
$('main').toggleClass('scale-down',bool);
}
function loadNewContent(newSection){
//create a new section element and insert it into the DOMvar section = $('<section class="cd-section '+newSection+'"></section>').appendTo($('main'));
//load the new content from the proper html filesection.load(newSection+'.html .cd-section > *',function(event){
//add the .cd-selected to the new section element -> it will cover the old onesection.addClass('cd-selected').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
//close navigationtoggleNav(false);
}
);
section.prev('.cd-selected').removeClass('cd-selected');
}
);
$('main').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
//once the navigation is closed,remove the old section from the DOMsection.prev('.cd-section').remove();
}
);
if( $('.no-csstransitions').length > 0 ){
//if browser doesn't support transitions - don't wait but close navigation and remove old itemtoggleNav(false);
section.prev('.cd-section').remove();
}
}
}
);
CSS代码(reset.css):
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License:none (public domain)*/
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;}
/* HTML5 display-role reset for older browsers */
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;}
CSS代码(style.css):
/* --------------------------------Primary style-------------------------------- */
*,*::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:"Open Sans",sans-serif;color:#9e87ce;background-color:#403438;}
svg{max-width:100%;}
a{text-decoration:none;}
/* --------------------------------Main Components-------------------------------- */
.cd-nav-trigger{/* hamburger icon */
position:fixed;z-index:3;top:12px;right:5%;height:44px;width:44px;/* image replacement */
overflow:hidden;text-indent:100%;white-space:nowrap;-webkit-transition:-webkit-transform 0.2s;-moz-transition:-moz-transform 0.2s;transition:transform 0.2s;}
.cd-nav-trigger span{/* icon created in CSS */
position:absolute;left:50%;top:50%;bottom:auto;right:auto;-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);width:32px;height:3px;background-color:black;}
.cd-nav-trigger span::before,.cd-nav-trigger span:after{/* upper and lower lines of the menu icon */
content:'';position:absolute;top:0;right:0;width:100%;height:100%;background-color:inherit;/* Force Hardware Acceleration in WebKit */
-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:-webkit-transform 0.2s,width 0.2s;-moz-transition:-moz-transform 0.2s,width 0.2s;transition:transform 0.2s,width 0.2s;}
.cd-nav-trigger span::before{-webkit-transform-origin:right top;-moz-transform-origin:right top;-ms-transform-origin:right top;-o-transform-origin:right top;transform-origin:right top;-webkit-transform:translateY(-10px);-moz-transform:translateY(-10px);-ms-transform:translateY(-10px);-o-transform:translateY(-10px);transform:translateY(-10px);}
.cd-nav-trigger span::after{-webkit-transform-origin:right bottom;-moz-transform-origin:right bottom;-ms-transform-origin:right bottom;-o-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:translateY(10px);-moz-transform:translateY(10px);-ms-transform:translateY(10px);-o-transform:translateY(10px);transform:translateY(10px);}
.no-touch .cd-nav-trigger:hover{/* rotate trigger on hover */
-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);}
.no-touch .cd-nav-trigger:hover span::after,.no-touch .cd-nav-trigger:hover span::before{/* animate arrow --> from hamburger to arrow */
width:50%;}
.no-touch .cd-nav-trigger:hover span::before{-webkit-transform:translateX(1px) translateY(1px) rotate(45deg);-moz-transform:translateX(1px) translateY(1px) rotate(45deg);-ms-transform:translateX(1px) translateY(1px) rotate(45deg);-o-transform:translateX(1px) translateY(1px) rotate(45deg);transform:translateX(1px) translateY(1px) rotate(45deg);}
.no-touch .cd-nav-trigger:hover span::after{-webkit-transform:translateX(1px) translateY(-1px) rotate(-45deg);-moz-transform:translateX(1px) translateY(-1px) rotate(-45deg);-ms-transform:translateX(1px) translateY(-1px) rotate(-45deg);-o-transform:translateX(1px) translateY(-1px) rotate(-45deg);transform:translateX(1px) translateY(-1px) rotate(-45deg);}
@media only screen and (min-width:1024px){.cd-nav-trigger{top:38px;}
}
/* --------------------------------xnavigation-------------------------------- */
.cd-nav-container{position:fixed;z-index:4;top:0;right:0;width:80%;height:100%;overflow-y:auto;background-color:#ffffff;/* Force Hardware Acceleration in WebKit */
-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:translateX(100%);-moz-transform:translateX(100%);-ms-transform:translateX(100%);-o-transform:translateX(100%);transform:translateX(100%);-webkit-transition:-webkit-transform 0.4s 0s,box-shadow 0s 0.4s;-moz-transition:-moz-transform 0.4s 0s,box-shadow 0s 0.4s;transition:transform 0.4s 0s,box-shadow 0s 0.4s;}
.cd-nav-container.is-visible{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0);-webkit-overflow-scrolling:touch;box-shadow:-4px 0 30px rgba(0,0,0,0.2);-webkit-transition:-webkit-transform 0.4s 0s,box-shadow 0s 0s;-moz-transition:-moz-transform 0.4s 0s,box-shadow 0s 0s;transition:transform 0.4s 0s,box-shadow 0s 0s;}
.cd-nav-container header{padding:1.5em 0 0 6.25%;height:68px;position:relative;}
.cd-nav-container h3{font-size:1.6rem;font-weight:bold;font-family:"Lora",serif;text-transform:uppercase;color:#5c4b51;}
@media only screen and (min-width:700px){.cd-nav-container{width:70%;}
.cd-nav-container header{height:116px;padding-top:3em;}
}
.cd-close-nav{/* 'X' close icon */
position:absolute;height:44px;width:44px;/* set the right position value so that it overlaps the .cd-nav-trigger*/
right:6.25%;top:50%;bottom:auto;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);/* image replacement */
overflow:hidden;text-indent:100%;white-space:nowrap;-webkit-transition:opacity 0.2s;-moz-transition:opacity 0.2s;transition:opacity 0.2s;}
.cd-close-nav::after,.cd-close-nav::before{/* lines of 'X' icon */
content:'';position:absolute;height:3px;width:32px;left:50%;top:50%;background-color:#5c4b51;-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.cd-close-nav::after{-webkit-transform:translateX(-50%) translateY(-50%) rotate(45deg);-moz-transform:translateX(-50%) translateY(-50%) rotate(45deg);-ms-transform:translateX(-50%) translateY(-50%) rotate(45deg);-o-transform:translateX(-50%) translateY(-50%) rotate(45deg);transform:translateX(-50%) translateY(-50%) rotate(45deg);}
.cd-close-nav::before{-webkit-transform:translateX(-50%) translateY(-50%) rotate(-45deg);-moz-transform:translateX(-50%) translateY(-50%) rotate(-45deg);-ms-transform:translateX(-50%) translateY(-50%) rotate(-45deg);-o-transform:translateX(-50%) translateY(-50%) rotate(-45deg);transform:translateX(-50%) translateY(-50%) rotate(-45deg);}
.no-touch .cd-close-nav:hover{opacity:.8;}
@media only screen and (min-width:700px){.cd-close-nav{right:7.14%;}
}
.cd-nav{background-color:#f2f2f2;}
.cd-nav::after{clear:both;content:"";display:table;}
.cd-nav li{width:50%;float:left;/* 68px is the navigation header height and the menu items will be allocated in 3 rows */
height:calc((100vh - 68px)/3);min-height:120px;border:1px solid #ffffff;border-top:none;border-left:none;}
.cd-nav li:nth-of-type(2n){border-right-width:0;}
.cd-nav a{position:relative;display:block;width:100%;height:100%;text-align:center;-webkit-transition:background-color 0.2s;-moz-transition:background-color 0.2s;transition:background-color 0.2s;}
.no-touch .cd-nav a:hover svg{-webkit-animation:cd-shock 0.3s;-moz-animation:cd-shock 0.3s;animation:cd-shock 0.3s;}
.no-touch .cd-nav li a:hover span *,.cd-nav li.cd-selected a span *{/* on hover or if selected - change text and icon color*/
stroke:#ffffff;}
.no-touch .cd-nav li a:hover em,.cd-nav li.cd-selected a em{/* on hover or if selected - change text and icon color*/
color:#ffffff;}
.no-touch .cd-nav li:first-of-type a:hover,.cd-nav li.cd-selected:first-of-type a{/* on hover or if selected - change background color*/
background-color:#9e87ce;}
.no-touch .cd-nav li:nth-of-type(2) a:hover,.cd-nav li.cd-selected:nth-of-type(2) a{/* on hover or if selected - change background color*/
background-color:#5c4b51;}
.no-touch .cd-nav li:nth-of-type(3) a:hover,.cd-nav li.cd-selected:nth-of-type(3) a{/* on hover or if selected - change background color*/
background-color:#e0cf75;}
.no-touch .cd-nav li:nth-of-type(4) a:hover,.cd-nav li.cd-selected:nth-of-type(4) a{/* on hover or if selected - change background color*/
background-color:#f5b65a;}
.no-touch .cd-nav li:nth-of-type(5) a:hover,.cd-nav li.cd-selected:nth-of-type(5) a{/* on hover or if selected - change background color*/
background-color:#f25f5c;}
.no-touch .cd-nav li:nth-of-type(6) a:hover,.cd-nav li.cd-selected:nth-of-type(6) a{/* on hover or if selected - change background color*/
background-color:#8abeb2;}
.cd-nav span,.cd-nav em{position:absolute;}
.cd-nav span{top:calc(50% - 48px);left:50%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%);height:48px;width:48px;}
.cd-nav span *{-webkit-transition:stroke 0.2s;-moz-transition:stroke 0.2s;transition:stroke 0.2s;}
.cd-nav em{width:100%;left:0;top:calc(50% + 15px);color:#5c4b51;-webkit-transition:color 0.2s;-moz-transition:color 0.2s;transition:color 0.2s;-webkit-backface-visibility:hidden;backface-visibility:hidden;}
@media only screen and (min-width:700px){.cd-nav li{/* 116px is the navigation header height and the menu items will be allocated in 3 rows */
height:calc((100vh - 116px)/3);min-height:200px;}
.cd-nav span{height:64px;width:64px;top:calc(50% - 56px);}
.cd-nav em{font-size:2.2rem;font-weight:300;top:calc(50% + 21px);}
}
@media only screen and (min-width:1024px){.cd-nav li{width:33.33%;float:left;/* 116px is the navigation header height and the menu items will be allocated in 2 rows */
height:calc((100vh - 116px)/2);min-height:250px;}
.cd-nav li:nth-of-type(2n){border-right-width:1px;}
.cd-nav li:nth-of-type(3n){border-right-width:0;}
.cd-nav em{font-size:2.5rem;}
}
@-webkit-keyframes cd-shock{0%{-webkit-transform:rotate(0);}
30%{-webkit-transform:rotate(10deg);}
60%{-webkit-transform:rotate(-10deg);}
100%{-webkit-transform:rotate(0);}
}
@-moz-keyframes cd-shock{0%{-moz-transform:rotate(0);}
30%{-moz-transform:rotate(10deg);}
60%{-moz-transform:rotate(-10deg);}
100%{-moz-transform:rotate(0);}
}
@keyframes cd-shock{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);}
30%{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-ms-transform:rotate(10deg);-o-transform:rotate(10deg);transform:rotate(10deg);}
60%{-webkit-transform:rotate(-10deg);-moz-transform:rotate(-10deg);-ms-transform:rotate(-10deg);-o-transform:rotate(-10deg);transform:rotate(-10deg);}
100%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);}
}
/* --------------------------------xshadow layer-------------------------------- */
.cd-overlay{/* shadow layer visible when navigation is open */
position:fixed;height:100%;width:100%;top:0;left:0;cursor:pointer;background-color:rgba(0,0,0,0.35);visibility:hidden;opacity:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:opacity 0.4s 0s,visibility 0s 0.4s;-moz-transition:opacity 0.4s 0s,visibility 0s 0.4s;transition:opacity 0.4s 0s,visibility 0s 0.4s;}
.cd-overlay.is-visible{opacity:1;visibility:visible;-webkit-transition:opacity 0.4s 0s,visibility 0s 0s;-moz-transition:opacity 0.4s 0s,visibility 0s 0s;transition:opacity 0.4s 0s,visibility 0s 0s;}
/* --------------------------------xcontent-------------------------------- */
main{position:relative;height:100vh;overflow-x:hidden;-webkit-transition:-webkit-transform 0.4s;-moz-transition:-moz-transform 0.4s;transition:transform 0.4s;box-shadow:0 0 30px #241d20;}
main.scale-down{-webkit-transform:scale(0.9);-moz-transform:scale(0.9);-ms-transform:scale(0.9);-o-transform:scale(0.9);transform:scale(0.9);}
.cd-section{position:absolute;z-index:1;top:0;left:0;height:100%;width:100%;overflow-y:auto;-webkit-transform:translateX(100%);-moz-transform:translateX(100%);-ms-transform:translateX(100%);-o-transform:translateX(100%);transform:translateX(100%);-webkit-transition:-webkit-transform 0s 0.4s;-moz-transition:-moz-transform 0s 0.4s;transition:transform 0s 0.4s;}
.cd-section.cd-selected{position:relative;z-index:2;-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0);-webkit-transition:-webkit-transform 0.4s 0s;-moz-transition:-moz-transform 0.4s 0s;transition:transform 0.4s 0s;-webkit-overflow-scrolling:touch;}
.cd-section header{height:100vh;background:#9e87ce;position:relative;}
.cd-section.projects header{background-color:#5c4b51;}
.cd-section.about header{background-color:#e0cf75;}
.cd-section.services header{background-color:#f5b65a;}
.cd-section.careers header{background-color:#f25f5c;}
.cd-section.contact header{background-color:#8abeb2;}
@media only screen and (min-width:700px){.cd-section{/* not 100vh to fix a small bug --> border visible otherwise */
header:102vh;}
}
.cd-title{position:relative;top:48%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);color:#ffffff;text-align:center;}
.cd-title > *{text-shadow:0 1px 2px rgba(0,0,0,0.05);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.cd-title h2{font-size:2.8rem;margin-bottom:.8em;}
.cd-title a{display:inline-block;padding:1.2em 1.6em;border-radius:50em;border:2px solid rgba(255,255,255,0.5);font-weight:700;color:#ffffff;font-family:"Lora",serif;}
.no-touch .cd-title a:hover{border-color:#ffffff;}
.cd-title span{vertical-align:middle;display:inline-block;}
@media only screen and (min-width:700px){.cd-title h2{font-size:5rem;font-weight:300;margin-bottom:.6em;}
}
.cd-content{background-color:#ffffff;padding:4em 0;}
.cd-content p{width:90%;max-width:800px;margin:2em auto;line-height:2;color:#78626a;}
.no-js main,.no-js .cd-section{height:auto;overflow:visible;}
.no-js .cd-section{position:static;-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0);}
.no-js .cd-nav-container{width:100%;position:static;-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0);height:auto;overflow:visible;}
.no-js .cd-close-nav{display:none;}
.no-js .cd-nav li{width:50%;float:left;}
@media only screen and (min-width:700px){.no-js .cd-nav li{width:33.3%;float:left;}
.no-js .cd-nav li:nth-of-type(2n) a{border-right-width:1px;}
}
@media only screen and (min-width:1024px){.no-js .cd-nav li{width:16.66%;float:left;}
.no-js .cd-nav li:nth-of-type(3n) a{border-right-width:1px solid #e0cf75;}
}
分享到QQ
分享到微博
微信扫一扫
