<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/amdouglas/pen/XjQbxm?limit=all&page=56&q=nav" />
<style class="cp-pen-styles">html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-webkit-font-smoothing:subpixel-antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-overflow-scrolling:touch;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;touch-action:manipulation;font:normal normal 400 16px/1.2 'Fira Sans',Roboto,-apple-system,Arial,Helmet,Freesans,sans-serif}*,:before,:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;touch-action:manipulation;margin:0;padding:0;border:0;font:inherit}article,footer,header,main,nav,section,video{display:block}html,body{height:100%}a{-webkit-text-decoration-skip:objects;text-decoration:none}button,input,textarea{-webkit-appearance:none;-webkit-border-radius:0;border-radius:0;background:0 0}button,img,video{-webkit-touch-callout:none}button,a,img,video{-webkit-user-select:none;-moz-user-select:none}button,a{color:inherit;cursor:pointer}textarea{resize:none}ul,ol,dl,li{list-style:none}[disabled]{opacity:.6;cursor:not-allowed}[hidden],video::-webkit-media-controls,video::-webkit-media-controls-play-button,video::-webkit-media-controls-volume-slider,video::-webkit-media-controls-mute-button,video::-webkit-media-controls-timeline,video::-webkit-media-controls-current-time-display{display:none}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{background:#07071c;-webkit-border-radius:4px;border-radius:4px}::-webkit-scrollbar-track{background-color:transparent;background:rgba(0,0,0,0)}::selection{background:#fff;color:#07071c}::-moz-selection{background:#fff;color:#07071c}
a {
color: #DB6356;
text-decoration: none;
}
.morph-dropdown {
position: relative;
height: 60px;
background-color: #fff;
}
.morph-dropdown::before {
content: 'mobile';
display: none;
}
.morph-dropdown .nav-trigger {
position: absolute;
top: 0;
right: 0;
height: 60px;
width: 60px;
overflow: hidden;
text-indent: 102%;
white-space: nowrap;
color: transparent;
}
.morph-dropdown .nav-trigger span, .morph-dropdown .nav-trigger span::after, .morph-dropdown .nav-trigger span::before {
position: absolute;
background-color: #1A1A1A;
height: 3px;
width: 26px;
}
.morph-dropdown .nav-trigger span {
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%);
-webkit-transition: .2s cubic-bezier(.4,0,.2,1) background-color;
transition: .2s cubic-bezier(.4,0,.2,1) background-color;
}
.morph-dropdown .nav-trigger span::after, .morph-dropdown .nav-trigger span::before {
content: '';
left: 0;
-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);
-webkit-transition-duration:.3s;
transition-timing-function:cubic-bezier(.4,0,.2,1);
transition-duration:.3s;
-webkit-transition-property:-webkit-transform;
transition-property:-webkit-transform;
transition-property:transform;
transition-property:-webkit-transform,transform;
}
.morph-dropdown .nav-trigger span::before {
-webkit-transform: translateY(-9px);
-moz-transform: translateY(-9px);
-ms-transform: translateY(-9px);
-o-transform: translateY(-9px);
transform: translateY(-9px);
}
.morph-dropdown .nav-trigger span::after {
-webkit-transform: translateY(9px);
-moz-transform: translateY(9px);
-ms-transform: translateY(9px);
-o-transform: translateY(9px);
transform: translateY(9px);
}
.morph-dropdown.nav-open .nav-trigger span {
background-color: transparent;
background-color:rgba(0,0,0,0);
}
.morph-dropdown.nav-open .nav-trigger span::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.morph-dropdown.nav-open .nav-trigger span::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.morph-dropdown .main-nav {
display: none;
}
.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;
}
.morph-dropdown.nav-open .morph-dropdown-wrapper {
display: block;
}
.morph-dropdown .dropdown-list > ul > li {
margin-bottom: 3.3em;
}
.morph-dropdown .label {
display: block;
font-size: 21px;
color: #1A1A1A;
margin-bottom: .8em;
}
.morph-dropdown .content li::after {
clear: both;
content: "";
display: block;
}
.morph-dropdown .gallery .content li {
margin-bottom: 1.4em;
}
.morph-dropdown .gallery .content a {
display: block;
}
.morph-dropdown .gallery .content a::before {
content: '';
display: inline-block;
float: left;
height: 54px;
width: 54px;
margin-right: .6em;
background: red;
border-radius: 50%;
-webkit-transition: .2s cubic-bezier(.4,0,.2,1) background;
transition: .2s cubic-bezier(.4,0,.2,1) background;
}
.morph-dropdown .gallery .content a span, .morph-dropdown .gallery .content a strong {
display: block;
line-height: 1.2;
}
.morph-dropdown .gallery .content a strong {
font-size: 18px;
font-weight: 700;
padding: .4em 0 .2em;
color: #1A1A1A;
}
.morph-dropdown .gallery .content a span {
font-size: 14px;
color: #a6a6a6;
}
.morph-dropdown .gallery .content a:hover::before {
background-color: #1A1A1A;
}
.morph-dropdown .gallery li:nth-of-type(1) a::before {
background: #f4e58a url(../img/cd-gallery-icons.svg) no-repeat 0 0;
}
.morph-dropdown .gallery li:nth-of-type(2) a::before {
background: #F4AF6D url(../img/cd-gallery-icons.svg) no-repeat -54px 0;
}
.morph-dropdown .gallery li:nth-of-type(3) a::before {
background: #DB6356 url(../img/cd-gallery-icons.svg) no-repeat -108px 0;
}
.morph-dropdown .gallery li:nth-of-type(4) a::before {
background: #8D4645 url(../img/cd-gallery-icons.svg) no-repeat -162px 0;
}
.morph-dropdown .links .content > ul > li {
margin-top: 1em;
}
.morph-dropdown .links-list a,
.morph-dropdown .btn {
display: block;
margin-left: 14px;
font-size: 18px;
line-height: 1.6;
}
.morph-dropdown .links-list a:hover,
.morph-dropdown .btn:hover {
color: #1A1A1A;
}
.morph-dropdown .content h2 {
color: #a6a6a6;
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
margin: 20px 0 10px 14px;
}
@media only screen and (min-width: 768px) {
.morph-dropdown::before {
content: 'desktop';
}
.morph-dropdown {
position: absolute;
left: 0;
top: 0;
bottom:0;
min-height:100%;
min-height:100vh;
width:140px;
-webkit-perspective:2000px;
perspective:2000px;
padding: 0;
text-align: center;
background-color: transparent;
}
.morph-dropdown .nav-trigger {
display: none;
}
.morph-dropdown .main-nav {
display:block;
position:absolute;
left:0;
top:50%;
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-ms-transform:translateY(-50%);
-o-transform:translateY(-50%);
transform:translateY(-50%);
}
.morph-dropdown .main-nav > ul > li {
display: block;
float: none;
}
.morph-dropdown .main-nav > ul > li > a {
display: block;
padding: 0 1.8em;
height: 70px;
height: 15vh;
line-height: 70px;
line-height:15vh;
color: #fff;
font-size: 18px;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: opacity .2s;
transition: opacity .2s;
}
.morph-dropdown.is-dropdown-visible .main-nav > ul > li > a {
opacity: .6;
}
.morph-dropdown.is-dropdown-visible .main-nav > ul > li.active > a {
opacity: 1;
}
.morph-dropdown .morph-dropdown-wrapper {
display: block;
top: 0;
width: auto;
padding: 0;
box-shadow: none;
background-color: transparent;
-webkit-transform:matrix3d(1,0,0.00,0,0.00,1,0.05,0,0,-0.05,1,0,0,0,0,1);
transform:matrix3d(1,0,0.00,0,0.00,1,0.05,0,0,-0.05,1,0,0,0,0,1);
-webkit-perspective:2000px;
perspective:2000px;
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s, -webkit-transform .3s;
will-change: transform;
}
.morph-dropdown.is-dropdown-visible .morph-dropdown-wrapper {
-webkit-transform: matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0,0,0,0,1);
transform:matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0,0,0,0,1);
}
.morph-dropdown .dropdown-list {
position: absolute;
top: 0;
left:124px;
visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition: .3s cubic-bezier(.4,0,.2,1) visibility;
transition: .3s cubic-bezier(.4,0,.2,1) visibility;
-webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
will-change: transform, width, height;
}
.morph-dropdown .dropdown-list::before {
content: '';
position: absolute;
top: 50%;
left: -16px;
right: auto;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
height: 0;
width: 0;
border: 8px solid transparent;
border-right-color: #FFFFFF;
opacity: 0;
-webkit-transition: .3s cubic-bezier(.4,0,.2,1) opacity;
transition: .3s cubic-bezier(.4,0,.2,1) opacity;
}
.morph-dropdown .dropdown-list > ul {
position: relative;
z-index: 1;
height: 100%;
width: 100%;
overflow: hidden;
}
.morph-dropdown.is-dropdown-visible .dropdown-list {
visibility: visible;
-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);
-webkit-transition-duration:.3s;
transition-timing-function:cubic-bezier(.4,0,.2,1);
transition-duration:.3s;
-webkit-transition-property:width,height,-webkit-transform;
transition-property:width,height,-webkit-transform;
transition-property:width,height,transform;
transition-property:width,height,-webkit-transform,transform;
}
.morph-dropdown.is-dropdown-visible .dropdown-list::before {
opacity: 1;
}
.morph-dropdown .dropdown {
position: absolute;
left: 0;
top: 0;
opacity: 0;
visibility: hidden;
width: 100%;
-webkit-transition: .3s cubic-bezier opacity, .3s cubic-bezier(.4,0,.2,1) visibility;
transition: .3s cubic-bezier(.4,0,.2,1) opacity, .3s cubic-bezier(.4,0,.2,1) visibility;
}
.morph-dropdown .dropdown.active {
opacity: 1;
visibility: visible;
}
.morph-dropdown .dropdown.move-down .content {
-webkit-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
}
.morph-dropdown .dropdown.move-up .content {
-webkit-transform: translateY(-100px);
-ms-transform: translateY(-100px);
transform: translateY(-100px);
}
.morph-dropdown .label {
display: none;
}
.morph-dropdown .content {
padding: 2.2em 1.8em;
text-align: left;
-webkit-transition-property:-webkit-transform;
transition-property:transform;
transition-property:-webkit-transform,transform;
-webkit-transition-duration:.3s;
-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);
transition-duration:.3s;
transition-timing-function:cubic-bezier(.4,0,.2,1);
}
.morph-dropdown .content > ul::after {
clear: both;
content: '';
display: block;
}
.morph-dropdown .content > ul > li {
width: 48%;
float: left;
margin-right: 4%;
margin-top: 0;
}
.morph-dropdown .content > ul > li:nth-of-type(2n) {
margin-right: 0;
}
.morph-dropdown .gallery .content {
width: 510px;
padding-bottom: .8em;
}
.morph-dropdown .gallery .content li {
margin-bottom: 1.8em;
}
.morph-dropdown .links .content > ul > li {
margin-top: 0;
}
.morph-dropdown .links .content,
.morph-dropdown .button .content {
width: 390px;
}
.morph-dropdown .links-list a {
font-size: 14px;
margin-left: 0;
}
.morph-dropdown .btn {
display: block;
width: 100%;
height: 60px;
margin: 1.5em 0 0;
font-size: 14px;
text-align: center;
color: #FFFFFF;
line-height: 60px;
background: #DB6356;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: grayscale;
}
.morph-dropdown .btn:hover {
background: #1A1A1A;
color: #FFFFFF;
}
.morph-dropdown .content h2 {
font-size: 18px;
text-transform: none;
font-weight: normal;
color: #1A1A1A;
margin: 0 0 .6em;
}
.morph-dropdown .bg-layer {
position: absolute;
top: 0;
left: 0;
height: 1px;
width: 1px;
background: #fff;
opacity: 0;
-webkit-transition: .3s cubic-bezier(.4,0,.2,1) opacity;
transition: .3s cubic-bezier(.4,0,.2,1) opacity;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
will-change: transform;
}
.morph-dropdown.is-dropdown-visible .bg-layer {
opacity: 1;
-webkit-transition-property:opacity,-webkit-transform;
transition-property:opacity,transform;
transition-property:opacity,-webkit-transform,transform;
-webkit-transition-duration:.3s;
-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);
transition-duration:.3s;
transition-timing-function:cubic-bezier(.4,0,.2,1);
}
}
.main-content {
min-height: 100vh;
background-color: #548c7e;
}
</style></head><body>
<header class="morph-dropdown">
<a href="#0" class="nav-trigger">Open Nav<span class="nav-trigger-bar" aria-hidden="true"></span></a>
<nav class="main-nav">
<ul>
<li class="has-dropdown gallery" data-content="about">
<a href="#0" tabindex="1">About</a>
</li>
<li class="has-dropdown links" data-content="pricing">
<a href="#0" tabindex="6">Pricing</a>
</li>
<li class="has-dropdown button" data-content="contact">
<a href="#0" tabindex="23">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" tabindex="2">
<strong>Title here</strong>
<span>A brief description here</span>
</a>
</li>
<li>
<a href="#0" tabindex="3">
<strong>Title here</strong>
<span>A brief description here</span>
</a>
</li>
<li>
<a href="#0" tabindex="4">
<strong>Title here</strong>
<span>A brief description here</span>
</a>
</li>
<li>
<a href="#0" tabindex="5">
<strong>Title here</strong>
<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" tabindex="7">Logo Design</a></li>
<li><a href="#0" tabindex="8">Branding</a></li>
<li><a href="#0" tabindex="9">Web Design</a></li>
<li><a href="#0" tabindex="10">iOS</a></li>
<li><a href="#0" tabindex="11">Android</a></li>
<li><a href="#0" tabindex="12">HTML/CSS/JS</a></li>
<li><a href="#0" tabindex="13">Packaging</a></li>
<li><a href="#0" tabindex="14">Mobile</a></li>
<li><a href="#0" tabindex="15">UI/UX</a></li>
<li><a href="#0" tabindex="16">Prototyping</a></li>
</ul>
</li>
<li>
<h2>Projects</h2>
<ul class="links-list">
<li><a href="#0" tabindex="17">Logo Design</a></li>
<li><a href="#0" tabindex="18">Branding</a></li>
<li><a href="#0" tabindex="19">Web Design</a></li>
<li><a href="#0" tabindex="20">iOS</a></li>
<li><a href="#0" tabindex="21">Android</a></li>
<li><a href="#0" tabindex="22">HTML/CSS/JS</a></li>
</ul>
</li>
</ul>
</div>
</li>
<li id="contact" class="dropdown gallery">
<a href="#0" class="label">Contact</a>
<div class="content">
<ul>
<li>
<a href="#0" tabindex="24">
<strong>Title here</strong>
<span>A brief description here</span>
</a>
</li>
<li>
<a href="#0" tabindex="25">
<strong>Title here</strong>
<span>A brief description here</span>
</a>
</li>
<li>
<a href="#0" tabindex="26">
<strong>Title here</strong>
<span>A brief description here</span>
</a>
</li>
<li>
<a href="#0" tabindex="27">
<strong>Title here</strong>
<span>A brief description here</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
<div class="bg-layer" aria-hidden="true"></div>
</div> <!-- dropdown-list -->
</div> <!-- morph-dropdown-wrapper -->
</header>
<main class="main-content">
</main>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >;(function(win,doc){
if(!win.requestAnimationFrame){
win.requestAnimationFrame = (function(){
return win.webkitRequestAnimationFrame
|| win.mozRequestAnimationFrame
|| win.oRequestAnimationFrame
|| win.msRequestAnimationFrame
|| function(callback){return win.setTimeout(callback,1000/60)};
})();
}
if(!win.cancelAnimationFrame){
win.cancelAnimationFrame = (function(){
return win.webkitCancelRequestAnimationFrame
|| win.mozCancelAnimationFrame
|| win.oCancelAnimationFrame
|| win.msCancelAnimationFrame
|| function(id){return win.cancelTimeout(id)};
})();
}
var root_element = doc.querySelector('.morph-dropdown');
var main_nav = root_element.querySelector('.main-nav');
var main_nav_items = main_nav.querySelectorAll('.has-dropdown');
var ddl = root_element.querySelector('.dropdown-list');
var ddl_wrapper = ddl.querySelector('.dropdown');
var ddl_items = ddl.querySelectorAll('.content');
var ddl_bg = ddl.querySelector('.bg-layer');
var mq = checkMq();
var vTransform = getProp(['transform','webkitTransform','mozTransform','msTransform','oTransform']);
var resizing = false;
for(var i = 0; i < main_nav_items.length; ++i){
main_nav_items[i].addEventListener('mouseenter',ddlMouseEnter,false);
main_nav_items[i].addEventListener('mouseleave',ddlMouseLeave,false);
main_nav_items[i].addEventListener('touchstart',ddlTouch,false);
}
(doc.body||doc.getElementsByTagName('body')[0]).addEventListener('click',menuClick,false);
doc.addEventListener('keyup',ddlKeyup,false);
ddl.addEventListener('mouseleave',ddlMouseLeave,false);
win.addEventListener('resize',switchNavigationTypes,false);
win.addEventListener('load',loadCSS,false);
resetDropdown();
function checkMq(){
return win.getComputedStyle(root_element,'::before').getPropertyValue('content').replace(/'/g,'').replace(/"/g,'').split(', ')[0];
}
function ddlMouseLeave(){
(main_nav.querySelectorAll('.has-dropdown:hover').length === 0 &&
root_element.querySelectorAll('.dropdown-list:hover').length === 0) &&
delay(hideDropdown());
}
function ddlTouch(e){
if(!('ontouchstart' in win)) return;
var selectedDropdown = ddl.querySelector('#'+e.target.data('content'));
if( !root_element.classList.contains('is-dropdown-visible') || !selectedDropdown.classList.contains('active')){
e.preventDefault();
ddlMouseEnter(e);
}
}
function menuClick(e){
if(typeof e === 'undefined') return;
var evt = (e.target || this);
var selector = (evt.tagName.toLowerCase());
if(selector&&!(root_element.querySelector(selector))){
return ddlMouseLeave();
}
if(evt.classList.contains('nav-trigger')||evt.classList.contains('nav-trigger-bar')){
typeof e !== 'undefined' && e.preventDefault();
root_element.classList.toggle('nav-open');
}
}
function ddlKeyup(e){
var key = e.key || e.which || e.keyCode;
if(typeof key === 'undefined') return;
if(key === 'Tab' || key === 9){
if(doc.activeElement.parentNode.classList.contains('has-dropdown')){
return ddlMouseEnter({'target':doc.activeElement.parentNode});
}
else if(doc.activeElement.getAttribute('tabindex')){
return;
}
//else{
//return ddlMouseLeave();
//}
}
}
function ddlMouseEnter(e){
mq = checkMq();
if(mq!=='desktop') return;
var item = (e.target || this);
var this_ddl = ddl.querySelector('#'+item.getAttribute('data-content'));
var this_ddl_height = this_ddl.clientHeight;
var this_ddl_width = this_ddl.querySelector('.content').clientWidth;
var this_ddl_height = this_ddl.querySelector('.content').clientHeight;
var this_ddl_top = getOffsetTop(item) + (item.clientHeight)/2 - this_ddl_height/2;
var actives = root_element.querySelectorAll('.active');
updateDropdown(this_ddl_height,this_ddl_width,this_ddl_top);
for(var i = 0; i < actives.length; ++i) actives[i].classList.remove('active');
item.classList.add('active');
this_ddl.classList.add('active');
this_ddl.classList.remove('move-down');
this_ddl.classList.remove('move-up');
if(this_ddl.previousElementSibling) this_ddl.previousElementSibling.classList.add('move-down');
if(this_ddl.nextElementSibling) this_ddl.nextElementSibling.classList.add('move-up');
if(!root_element.classList.contains('is-dropdown-visible')){
win.setTimeout(function(){
root_element.classList.add('is-dropdown-visible');
}, 10);
}
}
function updateDropdown(height,width,top){
ddl.style.width = width+'px';
ddl.style.height = height+'px';
//if(supportsTransforms){
ddl.style[vTransform] = 'matrix(1,0.00,0.00,1,0,'+top+')';
ddl_bg.style[vTransform] = 'matrix('+width+',0.00,0.00,'+height+',0,0)';
//} else {
//ddl.style.top = top+'px';
//ddl_bg.style.width = width+'px';
//ddl_bg.style.height = height+'px';
}
function hideDropdown(){
mq = checkMq();
if(mq!=='desktop')return;
root_element.classList.remove('is-dropdown-visible');
var actives = root_element.querySelectorAll('.active');
var move_lefts = root_element.querySelectorAll('.move-down');
var move_rights = root_element.querySelectorAll('.move-up');
for(var i = 0; i < actives.length; ++i) actives[i].classList.remove('active');
for(var j = 0; j < move_lefts.length; ++j) move_lefts[j].classList.remove('move-down');
for(var k = 0; k < move_rights.length; ++k) move_rights[k].classList.remove('move-up');
}
function resetDropdown(){
resizing = false;
mq = checkMq();
if(mq!=='mobile') return;
ddl.removeAttribute('style');
}
function getHeight(el){
return parseInt(win.getComputedStyle(el).height.slice(0,-2));
}
function getWidth(el){
return parseInt(win.getComputedStyle(el).width.slice(0,-2));
}
function getOffsetTop(el){
return el.getBoundingClientRect().top;
}
function getProp(props){
for(var j = 0; j<props.length; j++)
if(typeof doc.body.style[props[j]] !== 'undefined')
return props[j];
return '';
}
function rebounce(f){
var scheduled, context, args;
return function(){
context = this;
args = [];
for(var i = 0; i < arguments.length; ++i) args[i] = arguments[i];
!!scheduled && win.cancelAnimationFrame(scheduled);
scheduled = win.requestAnimationFrame(function(){
f.apply(context, args);
scheduled = null;
});
}
}
function delay(f){
var scheduled, context, args;
return function(){
context = this;
args = [];
for(var i = 0; i < arguments.length; ++i) args[i] = arguments[i];
!!scheduled && window.cancelTimeout(scheduled);
scheduled = window.setTimeout(function(){
f.apply(context, args);
scheduled = null;
},50);
}
}
function switchNavigationTypes(){
if(!!resizing) return;
resizing = true;
return rebounce(resetDropdown());
}
function loadCSS(){
var css = doc.createElement('link');
css.href='https://fonts.googleapis.com/css?family=Fira+Sans:400,700';
css.rel='stylesheet';
(doc.head||doc.getElementsByTagName('head')[0]).appendChild(css);
}
})(window,window.document);
//# sourceURL=pen.js
</script>
</body></html>
