<nav class="nav">
<div class="nav__bar">
<ul class="nav__dropdown">
<li class="nav__dropdown-item">
<a href="#">Menu1</a>
<ul class="nav__dropdown-detail">
<li><a href="#" class="nav__dropdown-detail-item">Menu1-1</a></li>
<li><a href="#" class="nav__dropdown-detail-item">Menu1-2</a></li>
<li><a href="#" class="nav__dropdown-detail-item">Menu1-3</a></li>
</ul>
</li>
<li class="nav__dropdown-item">
<a href="#">Menu2</a>
<ul class="nav__dropdown-detail">
<li><a href="#" class="nav__dropdown-detail-item">Menu2-1</a></li>
<li><a href="#" class="nav__dropdown-detail-item">Menu2-2</a></li>
<li><a href="#" class="nav__dropdown-detail-item">Menu2-3</a></li>
</ul>
</li>
<li class="nav__dropdown-item">
<a href="#">Menu3</a>
<ul class="nav__dropdown-detail">
<li><a href="#" class="nav__dropdown-detail-item">Menu3-1</a></li>
<li><a href="#" class="nav__dropdown-detail-item">Menu3-2</a></li>
<li><a href="#" class="nav__dropdown-detail-item">Menu3-3</a></li>
</ul>
</li>
<li class="nav__dropdown-item">
<a href="#">Menu4</a>
<ul class="nav__dropdown-detail">
<li><a href="#" class="nav__dropdown-detail-item">Menu4-1</a></li>
<li><a href="#" class="nav__dropdown-detail-item">Menu4-2</a></li>
<li><a href="#" class="nav__dropdown-detail-item">Menu4-3</a></li>
</ul>
</li>
</ul>
</div>
</nav>
.nav__bar {
background: #333;
color: #fff;
padding: 4px 12px;
}
.nav__dropdown {
display: flex;
}
.nav__dropdown > li {
position: relative;
width: 25%;
}
.nav__dropdown-item > a {
display: block;
text-align: center;
padding: 16px;
color: #fff;
}
.nav__dropdown-detail {
position: absolute;
display: none;
left: 4px;
right: 4px;
top: 100%;
padding: 0 12px;
background: #fff;
overflow: hidden;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
z-index: 1;
transition: height 0.3s;
}
.nav__dropdown-detail.is-hover {
display: block;
height: 0;
}
.nav__dropdown-detail > li {
border-bottom: 1px dotted #333;
}
.nav__dropdown-detail > li:last-child {
border-bottom: none;
}
.nav__dropdown-detail-item {
display: block;
padding: 8px 0;
}
.nav {
&__bar {
background: $color_main;
color: $color_opposite;
padding: $space_xs $space_md;
}
&__dropdown {
display: flex;
& > li {
position: relative;
width: 25%;
}
&-item > a {
display: block;
text-align: center;
padding: $space_lg;
color: $color_opposite;
}
&-detail {
position: absolute;
display: none;
left: $space_xs;
right: $space_xs;
top: 100%;
padding: 0 $space_md;
background: $color_opposite;
overflow: hidden;
box-shadow: $shadow_4;
z-index: 1;
transition: height $speed_fast;
&.is-hover {
display: block;
height: 0;
}
& > li {
border-bottom: 1px dotted $color_main;
&:last-child {
border-bottom: none;
}
}
&-item {
display: block;
padding: $space_sm 0;
}
}
}
}
(function() {
const dropdownItems = document.querySelectorAll('.nav__dropdown-item');
if(!dropdownItems) {return;}
const detailItems = document.querySelectorAll('.nav__dropdown-detail');
dropdownItems.forEach(item => {
item.addEventListener('mouseenter', () => {
detailOpen(item);
});
item.addEventListener('mouseleave', () => {
detailClose(item);
});
});
transitionSet();
function detailOpen(item) {
const detail = item.querySelector('.nav__dropdown-detail');
detail.classList.add('is-hover');
detail.dataset.openItem = 'open';
detail.style.height = `${detail.scrollHeight}px`;
}
function detailClose(item) {
const detail = item.querySelector('.nav__dropdown-detail');
detail.dataset.openItem = 'close';
detail.style.height = '';
}
function transitionSet() {
detailItems.forEach(detail => {
detail.addEventListener('transitionend', () => {
if(detail.dataset.openItem == 'close') {
detail.classList.remove('is-hover');
}
});
});
}
}());