以下是 jQuery动画下拉导航菜单代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery动画下拉导航菜单代码</title>
<!---<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">--->
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="cd-morph-dropdown">
<a href="#0" class="nav-trigger">Open Nav<span aria-hidden="true"></span></a>
<nav class="main-nav">
<ul>
<li class="has-dropdown gallery" data-content="about">
<a href="#0">About</a>
</li>
<li class="has-dropdown links" data-content="pricing">
<a href="#0">Pricing</a>
</li>
<li class="has-dropdown button" data-content="contact">
<a href="#0">Contact</a>
</li>
</ul>
</nav>
<div class="morph-dropdown-wrapper">
<div class="dropdown-list">
<ul>
<li id="about" class="dropdown gallery">
<a href="#0" class="label">About</a>
<div class="content">
<ul>
<li>
<a href="#0">
<em>Title here</em>
<span>A brief description here</span>
</a>
</li>
<li>
<a href="#0">
<em>Title here</em>
<span>A brief description here</span>
</a>
</li>
<li>
<a href="#0">
<em>Title here</em>
<span>A brief description here</span>
</a>
</li>
<li>
<a href="#0">
<em>Title here</em>
<span>A brief description here</span>
</a>
</li>
</ul>
</div>
</li>
<li id="pricing" class="dropdown links">
<a href="#0" class="label">Pricing</a>
<div class="content">
<ul>
<li>
<h2>Services</h2>
<ul class="links-list">
<li><a href="#0">Logo Design</a></li>
<li><a href="#0">Branding</a></li>
<li><a href="#0">Web Design</a></li>
<li><a href="#0">iOS</a></li>
<li><a href="#0">Android</a></li>
<li><a href="#0">HTML/CSS/JS</a></li>
<li><a href="#0">Packaging</a></li>
<li><a href="#0">Mobile</a></li>
<li><a href="#0">UI/UX</a></li>
<li><a href="#0">Prototyping</a></li>
</ul>
</li>
<li>
<h2>Projects</h2>
<ul class="links-list">
<li><a href="#0">Logo Design</a></li>
<li><a href="#0">Branding</a></li>
<li><a href="#0">Web Design</a></li>
<li><a href="#0">iOS</a></li>
<li><a href="#0">Android</a></li>
<li><a href="#0">HTML/CSS/JS</a></li>
</ul>
</li>
</ul>
</div>
</li>
<li id="contact" class="dropdown button">
<a href="#0" class="label">Contact</a>
<div class="content">
<ul class="links-list">
<li><a href="#0">Link #1</a></li>
<li><a href="#0">Link #2</a></li>
<li><a href="#0">Link #3</a></li>
<li><a href="#0">Link #4</a></li>
<li><a href="#0">Link #5</a></li>
<li><a href="#0">Link #6</a></li>
</ul>
<a href="#0" class="btn">Get in Touch</a>
</div>
</li>
</ul>
<div class="bg-layer" aria-hidden="true"></div>
</div> <!-- dropdown-list -->
</div> <!-- morph-dropdown-wrapper -->
</header>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/modernizr-custom.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
</body>
</html>
JS代码(main.js):
jQuery(document).ready(function($){
function morphDropdown( element ){
this.element = element;
this.mainNavigation = this.element.find('.main-nav');
this.mainNavigationItems = this.mainNavigation.find('.has-dropdown');
this.dropdownList = this.element.find('.dropdown-list');
this.dropdownWrappers = this.dropdownList.find('.dropdown');
this.dropdownItems = this.dropdownList.find('.content');
this.dropdownBg = this.dropdownList.find('.bg-layer');
this.mq = this.checkMq();
this.bindEvents();
}
morphDropdown.prototype.checkMq = function(){
//check screen sizevar self = this;
return window.getComputedStyle(self.element.get(0),'::before').getPropertyValue('content').replace(/'/g,"").replace(/"/g,"").split(',');
}
;
morphDropdown.prototype.bindEvents = function(){
var self = this;
//hover over an item in the main navigationthis.mainNavigationItems.mouseenter(function(event){
//hover over one of the nav items -> show dropdownself.showDropdown($(this));
}
).mouseleave(function(){
setTimeout(function(){
//if not hovering over a nav item or a dropdown -> hide dropdownif( self.mainNavigation.find('.has-dropdown:hover').length == 0 && self.element.find('.dropdown-list:hover').length == 0 ) self.hideDropdown();
}
,50);
}
);
//hover over the dropdownthis.dropdownList.mouseleave(function(){
setTimeout(function(){
//if not hovering over a dropdown or a nav item -> hide dropdown(self.mainNavigation.find('.has-dropdown:hover').length == 0 && self.element.find('.dropdown-list:hover').length == 0 ) && self.hideDropdown();
}
,50);
}
);
//click on an item in the main navigation -> open a dropdown on a touch devicethis.mainNavigationItems.on('touchstart',function(event){
var selectedDropdown = self.dropdownList.find('#'+$(this).data('content'));
if( !self.element.hasClass('is-dropdown-visible') || !selectedDropdown.hasClass('active') ){
event.preventDefault();
self.showDropdown($(this));
}
}
);
//on small screens,open navigation clicking on the menu iconthis.element.on('click','.nav-trigger',function(event){
event.preventDefault();
self.element.toggleClass('nav-open');
}
);
}
;
morphDropdown.prototype.showDropdown = function(item){
this.mq = this.checkMq();
if( this.mq == 'desktop'){
var self = this;
var selectedDropdown = this.dropdownList.find('#'+item.data('content')),selectedDropdownHeight = selectedDropdown.innerHeight(),selectedDropdownWidth = selectedDropdown.children('.content').innerWidth(),selectedDropdownLeft = item.offset().left + item.innerWidth()/2 - selectedDropdownWidth/2;
//update dropdown position and sizethis.updateDropdown(selectedDropdown,parseInt(selectedDropdownHeight),selectedDropdownWidth,parseInt(selectedDropdownLeft));
//add active class to the proper dropdown itemthis.element.find('.active').removeClass('active');
selectedDropdown.addClass('active').removeClass('move-left move-right').prevAll().addClass('move-left').end().nextAll().addClass('move-right');
item.addClass('active');
//show the dropdown wrapper if not visible yetif( !this.element.hasClass('is-dropdown-visible') ){
setTimeout(function(){
self.element.addClass('is-dropdown-visible');
}
,10);
}
}
}
;
morphDropdown.prototype.updateDropdown = function(dropdownItem,height,width,left){
this.dropdownList.css({
'-moz-transform':'translateX(' + left + 'px)','-webkit-transform':'translateX(' + left + 'px)','-ms-transform':'translateX(' + left + 'px)','-o-transform':'translateX(' + left + 'px)','transform':'translateX(' + left + 'px)','width':width+'px','height':height+'px'}
);
this.dropdownBg.css({
'-moz-transform':'scaleX(' + width + ') scaleY(' + height + ')','-webkit-transform':'scaleX(' + width + ') scaleY(' + height + ')','-ms-transform':'scaleX(' + width + ') scaleY(' + height + ')','-o-transform':'scaleX(' + width + ') scaleY(' + height + ')','transform':'scaleX(' + width + ') scaleY(' + height + ')'}
);
}
;
morphDropdown.prototype.hideDropdown = function(){
this.mq = this.checkMq();
if( this.mq == 'desktop'){
this.element.removeClass('is-dropdown-visible').find('.active').removeClass('active').end().find('.move-left').removeClass('move-left').end().find('.move-right').removeClass('move-right');
}
}
;
morphDropdown.prototype.resetDropdown = function(){
this.mq = this.checkMq();
if( this.mq == 'mobile'){
this.dropdownList.removeAttr('style');
}
}
;
var morphDropdowns = [];
if( $('.cd-morph-dropdown').length > 0 ){
$('.cd-morph-dropdown').each(function(){
//create a morphDropdown object for each .cd-morph-dropdownmorphDropdowns.push(new morphDropdown($(this)));
}
);
var resizing = false;
//on resize,reset dropdown style propertyupdateDropdownPosition();
$(window).on('resize',function(){
if( !resizing ){
resizing = true;
(!window.requestAnimationFrame) ? setTimeout(updateDropdownPosition,300):window.requestAnimationFrame(updateDropdownPosition);
}
}
);
function updateDropdownPosition(){
morphDropdowns.forEach(function(element){
element.resetDropdown();
}
);
resizing = false;
}
;
}
}
);
JS代码(modernizr-custom.js):
/*! modernizr 3.3.1 (Custom Build) | MIT * * https://modernizr.com/download/?-csstransitions-setclasses !*/
!function(e,n,t){
function r(e,n){
return typeof e===n}
function s(){
var e,n,t,s,o,i,a;
for(var l in C)if(C.hasOwnProperty(l)){
if(e=[],n=C[l],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(s=r(n.fn,"function")?n.fn():n.fn,o=0;
o<e.length;
o++)i=e[o],a=i.split("."),1===a.length?Modernizr[a[0]]=s:(!Modernizr[a[0]]||Modernizr[a[0]]instanceof Boolean||(Modernizr[a[0]]=new Boolean(Modernizr[a[0]])),Modernizr[a[0]][a[1]]=s),g.push((s?"":"no-")+a.join("-"))}
}
function o(e){
var n=_.className,t=Modernizr._config.classPrefix||"";
if(S&&(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),S?_.className.baseVal=n:_.className=n)}
function i(){
return"function"!=typeof n.createElement?n.createElement(arguments[0]):S?n.createElementNS.call(n,"http://www.w3.org/2000/svg",arguments[0]):n.createElement.apply(n,arguments)}
function a(e,n){
return!!~(""+e).indexOf(n)}
function l(e){
return e.replace(/([a-z])-([a-z])/g,function(e,n,t){
return n+t.toUpperCase()}
).replace(/^-/,"")}
function f(e,n){
return function(){
return e.apply(n,arguments)}
}
function u(e,n,t){
var s;
for(var o in e)if(e[o]in n)return t===!1?e[o]:(s=n[e[o]],r(s,"function")?f(s,t||n):s);
return!1}
function d(e){
return e.replace(/([A-Z])/g,function(e,n){
return"-"+n.toLowerCase()}
).replace(/^ms-/,"-ms-")}
function p(){
var e=n.body;
return e||(e=i(S?"svg":"body"),e.fake=!0),e}
function c(e,t,r,s){
var o,a,l,f,u="modernizr",d=i("div"),c=p();
if(parseInt(r,10))for(;
r--;
)l=i("div"),l.id=s?s[r]:u+(r+1),d.appendChild(l);
return o=i("style"),o.type="text/css",o.id="s"+u,(c.fake?c:d).appendChild(o),c.appendChild(d),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(n.createTextNode(e)),d.id=u,c.fake&&(c.style.background="",c.style.overflow="hidden",f=_.style.overflow,_.style.overflow="hidden",_.appendChild(c)),a=t(d,e),c.fake?(c.parentNode.removeChild(c),_.style.overflow=f,_.offsetHeight):d.parentNode.removeChild(d),!!a}
function m(n,r){
var s=n.length;
if("CSS"in e&&"supports"in e.CSS){
for(;
s--;
)if(e.CSS.supports(d(n[s]),r))return!0;
return!1}
if("CSSSupportsRule"in e){
for(var o=[];
s--;
)o.push("("+d(n[s])+":"+r+")");
return o=o.join(" or "),c("@supports ("+o+"){
#modernizr{
position:absolute;
}
}
",function(e){
return"absolute"==getComputedStyle(e,null).position}
)}
return t}
function h(e,n,s,o){
function f(){
d&&(delete z.style,delete z.modElem)}
if(o=r(o,"undefined")?!1:o,!r(s,"undefined")){
var u=m(e,s);
if(!r(u,"undefined"))return u}
for(var d,p,c,h,v,y=["modernizr","tspan","samp"];
!z.style&&y.length;
)d=!0,z.modElem=i(y.shift()),z.style=z.modElem.style;
for(c=e.length,p=0;
c>p;
p++)if(h=e[p],v=z.style[h],a(h,"-")&&(h=l(h)),z.style[h]!==t){
if(o||r(s,"undefined"))return f(),"pfx"==n?h:!0;
try{
z.style[h]=s}
catch(g){
}
if(z.style[h]!=v)return f(),"pfx"==n?h:!0}
return f(),!1}
function v(e,n,t,s,o){
var i=e.charAt(0).toUpperCase()+e.slice(1),a=(e+" "+b.join(i+" ")+i).split(" ");
return r(n,"string")||r(n,"undefined")?h(a,n,s,o):(a=(e+" "+E.join(i+" ")+i).split(" "),u(a,n,t))}
function y(e,n,r){
return v(e,t,t,n,r)}
var g=[],C=[],w={
_version:"3.3.1",_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=w,Modernizr=new Modernizr;
var _=n.documentElement,S="svg"===_.nodeName.toLowerCase(),x="Moz O ms Webkit",b=w._config.usePrefixes?x.split(" "):[];
w._cssomPrefixes=b;
var E=w._config.usePrefixes?x.toLowerCase().split(" "):[];
w._domPrefixes=E;
var P={
elem:i("modernizr")}
;
Modernizr._q.push(function(){
delete P.elem}
);
var z={
style:P.elem.style}
;
Modernizr._q.unshift(function(){
delete z.style}
),w.testAllProps=v,w.testAllProps=y,Modernizr.addTest("csstransitions",y("transition","all",!0)),s(),o(g),delete w.addTest,delete w.addAsyncTest;
for(var N=0;
N<Modernizr._q.length;
N++)Modernizr._q[N]();
e.Modernizr=Modernizr}
(window,document);
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{box-sizing:border-box;}
html{font-size:62.5%;}
body{font-size:1.6rem;font-family:"Lato",sans-serif;color:#1A1A1A;background-color:#FFFFFF;}
a{color:#DB6356;text-decoration:none;}
/* -------------------------------- Header-------------------------------- */
.cd-morph-dropdown{position:relative;height:60px;background-color:#FFFFFF;}
.cd-morph-dropdown::before{/* never visible - used in JS to check mq */
content:'mobile';display:none;}
.cd-morph-dropdown .nav-trigger{/* menu icon - visible on small screens only */
position:absolute;top:0;right:0;height:60px;width:60px;/* replace text with icon */
overflow:hidden;text-indent:100%;white-space:nowrap;color:transparent;}
.cd-morph-dropdown .nav-trigger span,.cd-morph-dropdown .nav-trigger span::after,.cd-morph-dropdown .nav-trigger span::before{/* these are the 3 lines of the menu icon */
position:absolute;background-color:#1A1A1A;height:3px;width:26px;}
.cd-morph-dropdown .nav-trigger span{left:50%;top:50%;bottom:auto;right:auto;-webkit-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);-webkit-transition:background-color .3s;transition:background-color .3s;}
.cd-morph-dropdown .nav-trigger span::after,.cd-morph-dropdown .nav-trigger span::before{content:'';left:0;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;}
.cd-morph-dropdown .nav-trigger span::before{-webkit-transform:translateY(-9px);-ms-transform:translateY(-9px);transform:translateY(-9px);}
.cd-morph-dropdown .nav-trigger span::after{-webkit-transform:translateY(9px);-ms-transform:translateY(9px);transform:translateY(9px);}
.cd-morph-dropdown.nav-open .nav-trigger span{background-color:transparent;}
.cd-morph-dropdown.nav-open .nav-trigger span::before{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}
.cd-morph-dropdown.nav-open .nav-trigger span::after{-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);}
.cd-morph-dropdown .main-nav{display:none;}
.cd-morph-dropdown .morph-dropdown-wrapper{display:none;position:absolute;top:60px;left:0;width:100%;padding:1.2em 5%;box-shadow:inset 0 1px 0 #e6e6e6;background-color:#FFFFFF;}
.cd-morph-dropdown.nav-open .morph-dropdown-wrapper{display:block;}
.cd-morph-dropdown .dropdown-list > ul > li{margin-bottom:3.3em;}
.cd-morph-dropdown .label{display:block;font-size:2.2rem;color:#1A1A1A;margin-bottom:.8em;}
.cd-morph-dropdown .content li::after{clear:both;content:"";display:block;}
.cd-morph-dropdown .gallery .content li{margin-bottom:1.4em;}
.cd-morph-dropdown .gallery .content a{display:block;}
.cd-morph-dropdown .gallery .content a::before{/* icon on the left */
content:'';display:inline-block;float:left;height:54px;width:54px;margin-right:.6em;background:red;border-radius:50%;-webkit-transition:background .2s;transition:background .2s;}
.cd-morph-dropdown .gallery .content a span,.cd-morph-dropdown .gallery .content a em{display:block;line-height:1.2;}
.cd-morph-dropdown .gallery .content a em{font-size:1.8rem;padding:.4em 0 .2em;color:#1A1A1A;}
.cd-morph-dropdown .gallery .content a span{font-size:1.4rem;color:#a6a6a6;}
.cd-morph-dropdown .gallery .content a:hover::before{background-color:#1A1A1A;}
.cd-morph-dropdown .gallery li:nth-of-type(1) a::before{background:#f4e58a url(../img/cd-gallery-icons.svg) no-repeat 0 0;}
.cd-morph-dropdown .gallery li:nth-of-type(2) a::before{background:#F4AF6D url(../img/cd-gallery-icons.svg) no-repeat -54px 0;}
.cd-morph-dropdown .gallery li:nth-of-type(3) a::before{background:#DB6356 url(../img/cd-gallery-icons.svg) no-repeat -108px 0;}
.cd-morph-dropdown .gallery li:nth-of-type(4) a::before{background:#8D4645 url(../img/cd-gallery-icons.svg) no-repeat -162px 0;}
.cd-morph-dropdown .links .content > ul > li{margin-top:1em;}
.cd-morph-dropdown .links-list a,.cd-morph-dropdown .btn{display:block;margin-left:14px;font-size:2.2rem;line-height:1.6;}
.cd-morph-dropdown .links-list a:hover,.cd-morph-dropdown .btn:hover{color:#1A1A1A;}
.cd-morph-dropdown .content h2{color:#a6a6a6;text-transform:uppercase;font-weight:bold;font-size:1.3rem;margin:20px 0 10px 14px;}
@media only screen and (min-width:1000px){.cd-morph-dropdown{position:absolute;height:80px;left:0;top:0;width:100%;padding:0;text-align:center;background-color:transparent;}
.cd-morph-dropdown::before{content:'desktop';}
.cd-morph-dropdown .nav-trigger{display:none;}
.cd-morph-dropdown .main-nav{display:inline-block;}
.cd-morph-dropdown .main-nav > ul > li{display:inline-block;float:left;}
.cd-morph-dropdown .main-nav > ul > li > a{display:block;padding:0 1.8em;height:70px;line-height:70px;color:black;font-size:1.8rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-transition:opacity .2s;transition:opacity .2s;}
.cd-morph-dropdown.is-dropdown-visible .main-nav > ul > li > a{/* main navigation hover effect - on hover,reduce opacity of elements not hovered over */
opacity:.6;}
.cd-morph-dropdown.is-dropdown-visible .main-nav > ul > li.active > a{opacity:1;}
.cd-morph-dropdown .morph-dropdown-wrapper{/* dropdown wrapper - used to create the slide up/slide down effect when dropdown is revealed/hidden */
display:block;top:58px;/* overwrite mobile style */
width:auto;padding:0;box-shadow:none;background-color:transparent;/* Force Hardware acceleration */
-webkit-transform:translateZ(0);transform:translateZ(0);will-change:transform;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px);-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;}
.cd-morph-dropdown.is-dropdown-visible .morph-dropdown-wrapper{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}
.cd-morph-dropdown .dropdown-list{position:absolute;top:0;left:0;visibility:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);will-change:transform,width,height;-webkit-transition:visibility .3s;transition:visibility .3s;box-shadow:0 10px 20px rgba(0,0,0,0.08);}
.no-csstransitions .cd-morph-dropdown .dropdown-list{display:none;}
.cd-morph-dropdown .dropdown-list::before{/* dropdown top triangle */
content:'';position:absolute;bottom:100%;left:50%;right:auto;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);height:0;width:0;border:8px solid transparent;border-bottom-color:#FFFFFF;opacity:0;-webkit-transition:opacity .3s;transition:opacity .3s;}
.cd-morph-dropdown .dropdown-list > ul{position:relative;z-index:1;height:100%;width:100%;overflow:hidden;}
.cd-morph-dropdown.is-dropdown-visible .dropdown-list{visibility:visible;-webkit-transition:width .3s,height .3s,-webkit-transform .3s;transition:width .3s,height .3s,-webkit-transform .3s;transition:transform .3s,width .3s,height .3s;transition:transform .3s,width .3s,height .3s,-webkit-transform .3s;}
.cd-morph-dropdown.is-dropdown-visible .dropdown-list::before{opacity:1;}
.cd-morph-dropdown .dropdown{position:absolute;left:0;top:0;opacity:0;visibility:hidden;width:100%;-webkit-transition:opacity .3s,visibility .3s;transition:opacity .3s,visibility .3s;}
.cd-morph-dropdown .dropdown.active{opacity:1;visibility:visible;}
.cd-morph-dropdown .dropdown.move-left .content{-webkit-transform:translateX(-100px);-ms-transform:translateX(-100px);transform:translateX(-100px);}
.cd-morph-dropdown .dropdown.move-right .content{-webkit-transform:translateX(100px);-ms-transform:translateX(100px);transform:translateX(100px);}
.cd-morph-dropdown .label{/* hide the label on bigger devices */
display:none;}
.cd-morph-dropdown .content{padding:2.2em 1.8em;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;text-align:left;}
.cd-morph-dropdown .content > ul::after{clear:both;content:"";display:block;}
.cd-morph-dropdown .content > ul > li{width:48%;float:left;margin-right:4%;margin-top:0;}
.cd-morph-dropdown .content > ul > li:nth-of-type(2n){margin-right:0;}
.cd-morph-dropdown .gallery .content{/* you need to set a width for the .content elements because they have a position absolute */
width:510px;padding-bottom:.8em;}
.cd-morph-dropdown .gallery .content li{margin-bottom:1.8em;}
.cd-morph-dropdown .links .content > ul > li{margin-top:0;}
.cd-morph-dropdown .links .content,.cd-morph-dropdown .button .content{width:390px;}
.cd-morph-dropdown .links-list a{font-size:1.6rem;margin-left:0;}
.cd-morph-dropdown .btn{display:block;width:100%;height:60px;margin:1.5em 0 0;font-size:1.8rem;text-align:center;color:#FFFFFF;line-height:60px;background:#DB6356;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.cd-morph-dropdown .btn:hover{background:#1A1A1A;color:#FFFFFF;}
.cd-morph-dropdown .content h2{font-size:1.8rem;text-transform:none;font-weight:normal;color:#1A1A1A;margin:0 0 .6em;}
.cd-morph-dropdown .bg-layer{/* morph dropdown background */
position:absolute;top:0;left:0;height:1px;width:1px;background:#FFFFFF;opacity:0;-webkit-transition:opacity .3s;transition:opacity .3s;-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-transform:translateZ(0);transform:translateZ(0);will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.cd-morph-dropdown.is-dropdown-visible .bg-layer{opacity:1;-webkit-transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,-webkit-transform .3s;transition:transform .3s,opacity .3s;transition:transform .3s,opacity .3s,-webkit-transform .3s;}
}
/* --------------------------------Main site content-------------------------------- */
.cd-main-content{min-height:100vh;background-color:#548c7e;}
@media only screen and (min-width:1000px){.cd-main-content{padding-top:80px;}
}
分享到QQ
分享到微博
微信扫一扫
