実現したいこと
【jQuery・ハンバーガーメニュー】 閉じるボタン(X)を、元のハンバーガーボタン(三本線)に戻したいです
状況の説明
jQueryでハンバーガーメニューを実装しています。
スマホナビが開いている状況で、リンクをクリックすると、
- スマホナビが閉じて
- リンク先のセクションにスムーススクロールされます
ここまでは良いのですが、閉じるボタン(X)が、元のハンバーガーボタン(三本線)に戻らない問題を解決できません。
アドバイス頂けましたら幸いです。よろしくお願いいたします。
//◆ハンバーガーメニュー◆
$('.js-hamburger').on('click',function() {
if ($('.js-hamburger').hasClass('is-open')) {
$('.js-drawer-menu').fadeOut();
$(this).removeClass('is-open');
} else {
$('.js-drawer-menu').fadeIn();
$(this).addClass('is-open');
}
});
//spナビのリンクをクリックしたら
$('.sp-nav__item').on('click',function() {
$('.js-drawer-menu').fadeOut();
$('js-hamburger').removeClass('is-open');
});
<header class="header">
<div class="header__inner">
<h1 class="header__logo">
<a href="index.html" class="logo">
<img src="images/CodeUps.png" alt="ロゴ画像">
</a>
</h1>
<!-- ハンバーガーボタン -->
<button class="header__hamburger hamburger js-hamburger">
<span></span>
<span></span>
<span></span>
</button>
<!-- SPナビ -->
<div class="header__sp-nav js-drawer-menu">
<ul class="sp-nav__items">
<li class="sp-nav__item"><a href="index.html">トップ</a></li>
<li class="sp-nav__item"><a href="#news">お知らせ</a></li>
<li class="sp-nav__item"><a href="#content">業務内容</a></li>
<li class="sp-nav__item"><a href="#works">品質</a></li>
<li class="sp-nav__item"><a href="#overview">制作者の想い</a></li>
<li class="sp-nav__item"><a href="#blog">ブログ</a></li>
<li class="sp-nav__item"><a href="#contact">お問い合わせ</a></li>
</ul>
</div>
<!-- PCナビ -->
<div class="header__pc-nav">
<ul class="pc-nav__items">
<li class="pc-nav__item"><a href="#news">お知らせ</a></li>
<li class="pc-nav__item"><a href="#content">業務内容</a></li>
<li class="pc-nav__item"><a href="#works">品質</a></li>
<li class="pc-nav__item"><a href="#overview">制作者の想い</a></li>
<li class="pc-nav__item"><a href="#blog">ブログ</a></li>
<li class="pc-nav__item pc-nav__item--white"><a href="#contact">お問い合わせ</a></li>
</ul>
</div>
</div><!-- /.header__inner -->
</header>
.hamburger {
z-index: 9999;
@include mq(md) {
display: none;
}
}
.hamburger span {
position: relative;
display: block;
height: rem(2);
width: rem(22);
background: #fff;
transition: ease .3s;
}
.hamburger span:nth-child(1) {
top: 0;
}
.hamburger span:nth-child(2) {
margin: 4px 0;
}
.hamburger span:nth-child(3) {
top: 0;
}
//ハンバーガーメニューを開いたときにXボタンを表示
.hamburger.is-open span:nth-child(1) {
top: 5px;
transform: rotate(45deg);
}
.hamburger.is-open span:nth-child(2) {
transform: translateY(-50%);
opacity: 0;
}
.hamburger.is-open span:nth-child(3) {
top: -7px;
transform: rotate(-45deg);
}