header.main-header
ul.menu
li.menu__item(data-sub="product"): a(href="#") Product
li.menu__item(data-sub="developer"): a(href="#") Developer
li.menu__item(data-sub="company"): a(href="#") Company
.dropdown-holder
.dropdown__arrow
.dropdown__bg
.dropdown__bg-bottom
.dropdown__wrap
.dropdown-menu#product(data-sub="product")
.dropdown-menu__content
.top-section
.col-2
ul
li
a(href="")
h3 Payment
p Lorem ipsum dolor sit amet, consectetur adipisicing elit.
li
a(href="")
h3 Connect
p consectetur adipisicing elit nesciunt! Assumenda, adipisci.
li
a(href="")
h3 Atlas
p ipsum dolor sit amet, consectetur adipisicing elit. .
ul
li
a(href="")
h3 Subscription
p Lorem ipsum dolor sit amet, consectetur
li
a(href="")
h3 Relay
p amet, consectetur adipisicing elit. Nisi, sequi!
.bottom-section
ul
li: a(href="") Payment
li: a(href="") Connect
li: a(href="") Atlas
li: a(href="") Connect
li: a(href="") Atlas
.dropdown-menu#developer(data-sub="developer")
.dropdown-menu__content
.top-section
.col-2
div
h2.menu-title Front End
ul
li: a(href="") Payment
li: a(href="") Connect
li: a(href="") Atlas
div
h2.menu-title Back End
ul
li: a(href="") Payment
li: a(href="") Connect
li: a(href="") Atlas
.bottom-section.info
p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit totam officia molestias
.dropdown-menu(data-sub="company")
.dropdown-menu__content
.top-section
ul
li: a(href="") Payment
li: a(href="") Connect
li: a(href="") Atlas
.bottom-section
ul
li: a(href="") Payment
li: a(href="") Connect
li: a(href="") Atlas@import 'https://fonts.googleapis.com/css?family=Karla';
*{
box-sizing: border-box;
}
body{
min-height: 100vh;
background: linear-gradient(15deg, #25ddf5, #53f);
font-family: karla;
color: #666;
font-size: 18px;
font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6{
color: #444;
}
header{
position: relative;
padding: 20px 0 0;
transform-style: preserve3d;
perspective: 3000px;
}
.menu{
list-style: none;
margin: 0;
padding-left: 0;
display: flex;
justify-content: center;
a{
padding: 20px 20px;
display: block;
text-decoration: none;
color: white;
}
&__item{
position: relative;
&:hover > .sub-menu-shadow{
display: block;
}
}
.sub-menu-shadow{
position: absolute;
display: none;
}
}
.dropdown{
&-holder{
position: absolute;
width: 100%;
left: 0;
top: 100%;
}
&__bg, &__arrow{
position: absolute;
}
&__arrow{
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: transparent transparent white;
top: -20px;
opacity: 0;
transition: .20s ease;
pointer-events: none;
}
&__bg{
width: 450px;
height: 400px;
background-color: white;
opacity: 0;
transition: .25s ease;
border-radius: 5px;
overflow: hidden;
z-index: -1;
&-bottom{
background-color: #fafafa;
position: absolute;
width: 100%;
left: 0;
top: 300px;
height: 700px;
transition: .3s ease;
}
}
&__wrap{
overflow: hidden;
position: absolute;
transition: .25s ease;
z-index: 1;
.top-section,.bottom-section{
padding: 20px;
}
}
&-menu{
&__content{
position: absolute;
opacity: 0;
transition: .25s ease;
min-width: 200px;
ul{
list-style: none;
padding-left: 0;
margin: 0;
}
a{
color: inherit;
text-decoration: none;
display: block;
padding: 5px 0;
&:hover{ color: #333 }
}
}
&.active{
.dropdown-menu__content{
opacity: 1;
}
}
}
}
#product .dropdown-menu__content{
width: 640px;
}
#developer .dropdown-menu__content{
width: 400px;
}
.col-2{
display: flex;
>ul,>div{
flex: 1 0 150px;
}
}
#product{
.col-2{
li{
display: block;
padding: 20px 20px 10px;
h3{
font-size: 18px;
margin: 0 0 10px;
color: turquoise;
}
p{
color: #999;
margin: 0;
}
}
}
}
.menu-title{
margin: 0 0 10px;
font-size: 18px;
color: #2196F3
}
.info{
line-height: 1.7;
}var menuItems = [].slice.call( document.querySelectorAll( '.menu__item' ) ),
menuSubs = [].slice.call( document.querySelectorAll( '.dropdown-menu') ),
selectedMenu = undefined,
subBg = document.querySelector( '.dropdown__bg' ),
subBgBtm = document.querySelector( '.dropdown__bg-bottom' ),
subArr = document.querySelector( '.dropdown__arrow' ),
subCnt = document.querySelector( '.dropdown__wrap' ),
header = document.querySelector( '.main-header' ),
closeDropdownTimeout,
startCloseTimeout = function (){
closeDropdownTimeout = setTimeout( () => closeDropdown() , 50 );
},
stopCloseTimeout = function () {
clearTimeout( closeDropdownTimeout );
},
openDropdown = function (el) {
//- get menu ID
var menuId = el.getAttribute( 'data-sub' );
//- get related sub menu
var menuSub = document.querySelector( '.dropdown-menu[data-sub="'+menuId+'"]' );
//- get menu sub content
var menuSubCnt = menuSub.querySelector( '.dropdown-menu__content' )
//- get bottom section of current sub
var menuSubBtm = menuSubCnt.querySelector('.bottom-section').getBoundingClientRect();
//- get height of top section
var menuSubTop = menuSubCnt.querySelector('.top-section').getBoundingClientRect();
//- get menu position
var menuMeta = el.getBoundingClientRect();
//- get sub menu position
var subMeta = menuSubCnt.getBoundingClientRect();
//- set selected menu
selectedMenu = menuId;
//- Remove active Menu
menuItems.forEach( el => el.classList.remove( 'active' ) );
//- Set current menu to active
el.classList.add( 'active' );
//- Remove active sub menu
menuSubs.forEach( el => el.classList.remove( 'active' ) );
//- Set current menu to active
menuSub.classList.add( 'active' );
//- Set dropdown menu background style to match current submenu style
subBg.style.opacity = 1;
subBg.style.left = menuMeta.left - ( (subMeta.width / 2) - menuMeta.width / 2 ) + 'px';
subBg.style.width = subMeta.width+'px';
subBg.style.height = subMeta.height+'px';
//- Set dropdown menu bottom section background position
subBgBtm.style.top = menuSubTop.height+'px';
console.log( menuSubBtm );
//- Set Arrow position
subArr.style.opacity = 1;
subArr.style.left = menuMeta.left + menuMeta.width/2 - 10 + 'px';
//- Set sub menu style
subCnt.style.opacity = 1;
subCnt.style.left = menuMeta.left - ( (subMeta.width / 2) - menuMeta.width / 2 ) + 'px';
subCnt.style.width = subMeta.width+'px';
subCnt.style.height = subMeta.height+'px';
//- Set current sub menu style
menuSub.style.opacity = 1;
header.classList.add('dropdown-active');
},
closeDropdown = function () {
//- Remove active class from all menu items
menuItems.forEach( el => el.classList.remove('active') );
//- Remove active class from all sub menus
menuSubs.forEach ( el => {
el.classList.remove( 'active' );
el.style.opacity = 0;
} );
//- set sub menu background opacity
subBg.style.opacity = 0;
//- set arrow opacity
subArr.style.opacity = 0;
// unset selected menu
selectedMenu = undefined;
header.classList.remove('dropdown-active');
};
//- Binding mouse event to each menu items
menuItems.forEach( el => {
//- mouse enter event
el.addEventListener( 'mouseenter', function() {
stopCloseTimeout();
openDropdown( this );
}, false );
//- mouse leave event
el.addEventListener( 'mouseleave', () => startCloseTimeout(), false);
} );
//- Binding mouse event to each sub menus
menuSubs.forEach( el => {
el.addEventListener( 'mouseenter', () => stopCloseTimeout(), false );
el.addEventListener( 'mouseleave', () => startCloseTimeout(), false );
} );
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.