$('.header-menu-btn').on('click',function(){
$(this).toggleClass('is-open');
$('.nav').toggleClass('is-open');
$('.overlay').fadeToggle();
});
$(".js-accordion").on('accordion', function() {
console.log($(this));
if( $(this).hasClass('is-open') ) {
$(this).removeClass('is-open');
}
});
$('.js-accordion').on('click',function(){
if( $(this).hasClass('is-open') ) {
$(this).removeClass('is-open');
}else {
$(this).addClass('is-open');
$(".js-accordion").not($(this)).trigger('accordion');
}
});
<div class="overlay"></div>
<header class="header" role="banner" itemscope="itemscope" itemtype="http://schema.org/WPHeader">
<div class="header-top">
<h1 class="header-logo">Responsive Menu</h1>
<span class="header-menu-btn is-sp"></span>
</div>
<nav class="nav" role="navigation" itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement" class="is-open">
<ul class="nav-parent cf">
<li itemprop="name" class="nav-html"><a href="#" itemprop="URL">HTML</a></li>
<li itemprop="name" class="nav-css"><a href="#" itemprop="URL">CSS</a></li>
<li itemprop="name" class="nav-js"><a href="#" itemprop="URL">JavaScript</a></li>
<li itemprop="name" class="nav-cms js-accordion">
<a href="#" itemprop="URL">CMS</a>
<div class="l-megaMenu">
<div class="megaMenu">
<p class="megaMenu-heading">主なCMS</p>
<ul class="nav-children megaMenu-body">
<li><a href="#">
<img src="https://unsplash.it/300/200?random" class="is-pc">
<p class="megaMenu-title">WordPress</p>
</a></li>
<li><a href="#">
<img src="https://unsplash.it/300/200?random" class="is-pc">
<p class="megaMenu-title">Movabletype</p>
</a></li>
<li><a href="#">
<img src="https://unsplash.it/300/200?random" class="is-pc">
<p class="megaMenu-title">concrete5</p>
</a></li>
</ul>
</div>
</div>
</li>
<li itemprop="name" class="nav-gulp js-accordion">
<a href="#" itemprop="URL">Gulp</a>
<div class="l-megaMenu">
<div class="megaMenu">
<p class="megaMenu-heading">プラグイン</p>
<ul class="nav-children megaMenu-body">
<li><a href="#">
<img src="https://unsplash.it/300/200?random" class="is-pc">
<p class="megaMenu-title">gulp-sass</p>
</a></li>
<li><a href="#">
<img src="https://unsplash.it/300/200?random" class="is-pc">
<p class="megaMenu-title">gulp-sass</p>
</a></li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
</header>
a {
color: #000;
}
@media screen and (max-width: 768px) {
.is-pc {
display: none;
}
.overlay {
background: rgba(0, 0, 0, 0.8);
display: none;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 10;
}
}
.header {
@media screen and (max-width: 768px) {
&-top {
height: 50px;
overflow: hidden;
background: #fff;
position: relative;
z-index: 1000;
}
&-logo {
float: left;
margin: 15px 0 0 15px;
}
&-menu-btn {
float: right;
height: 30px;
background: transparent;
border-top: 1px solid;
border-bottom: 1px solid;
position: relative;
display: block;
width: 50px;
margin: 15px 15px 0 0;
cursor: pointer;
color: inherit;
font-size: 0;
transition: height 0.35s 0.35s,
border-color 0.35s 0.35s;
&:before,
&:after {
display: block;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
transform-origin: 50% 50%;
left: 50%;
width: 100%;
height: 1px;
background: currentColor;
content: "";
transition: transform 0.35s;
}
&.is-open {
border-color: transparent;
transition: all 0.35s 0s;
&:before {
transform: translate(-50%, -50%) rotate(45deg);
transition-delay: 0.5s;
}
&:after {
transform: translate(-50%, -50%) rotate(-45deg);
transition-delay: 0.5s;
}
}
}
}
}
.nav {
@media screen and (max-width: 768px) {
position: relative;
z-index: 100;
background: #ddd;
opacity: 0;
visibility: hidden;
margin-top: -100%;
transition: 0.1s opacity,
0.1s visibility,
0.1s margin;
&.is-open {
opacity: 1;
visibility: visible;
margin-top: 0;
transition: 0.5s opacity,
0.5s visibility,
0.5s margin;
}
&-parent {
> li {
border-top: 1px solid #ddd;
}
}
&-children {
background: #fff;
opacity: 0;
visibility: hidden;
max-height: 0;
transition: 0.1s opacity,
0.5s visibility,
0.1s max-height;
> li {
}
.js-accordion.is-open & {
opacity: 1;
visibility: visible;
max-height: 200px;
transition: 0.5s opacity,
0.5s visibility,
0.5s max-height;
}
}
}
@media screen and (min-width: 769px) {
}
}