ページ内リンクをクリックするとハンバーガーメニューを閉じるようにしたい

Question

JSを使わずにアニメーションしながら展開するドロワーメニュー(スライドメニュー)の実装方法
参考（https://theorthodoxworks.com/web-design/drawer-menu-in-css-checkbox/）
を使用させていただきハンバーガーメニューを作成しました。

ハンバーガーメニュー内のリンクにはページ内リンクが含まれており、
ページ内リンクをクリックすると、
ハンバーガーメニューが閉じるようにしたいです。

今のままですとページ内リンクをクリックすると
ハンバーガーメニューがでたままになります。

こちらのサイトの投稿や色々調べてJQueryなども試してみたのですが、
うまくいかず、困っております。

方法は、CSSでもJQueryでも大丈夫なので
対応策のご教授をお願い致します。

以下HTMLとCSSの記述です。

HTML

<input type="checkbox" class="check" id="checked">

    <label class="menu-btn" for="checked">
        <span class="bar top"></span>
        <span class="bar middle"></span>
        <span class="bar bottom"></span>
        <span class="menu-btn__text">MENU</span>
    </label>

    <label class="close-menu" for="checked"></label>
    <nav class="drawer-menu">
        <ul>
            <img src="images/logo.png">
            <li><a href="#about">About</a></li>
            <li><a href="#work">Works</a></li>
            <li><a href="schedule.html">Schedule</a></li>
            <li><a href="plofile.html">Plofile</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
        <ul class="icon">
            <li><a href="#"><img src="images/icon_twitter.png" alt="Twitter"></a></li>
            <li><a href="#"><img src="images/icon_instagram.png" alt="Instagram"></a></li>
            <li><a href="#"><img src="images/icon_line.png" alt="LINE"></a></li>
        </ul>

    </nav>

CSS

/* common */
body {
  margin: 0;
  padding: 0;
  background: rgb(255, 254, 254);
}

ul {
margin: 0;
padding: 0;
list-style: none;
}

/* drawer menu */
.drawer-menu {
  box-sizing: border-box;
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  padding: 120px 0;
  background: #222;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  -webkit-transform-origin: right center;
  -ms-transform-origin: right center;
  transform-origin: right center;
  -webkit-transform: perspective(500px) rotateY(-90deg);
  transform: perspective(500px) rotateY(-90deg);
  opacity: 0;
}

.drawer-menu li {
  text-align: center;
}

.drawer-menu li a {
  display: block;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  color: #fff;
  -webkit-transition: all .8s;
  transition: all .8s;
}

.drawer-menu li a:hover {
  color: #1a1e24;
  background: #fff;
}

/* checkbox */
.check {
  display: none;
}

/* menu button - label tag */
.menu-btn {
  position: fixed;
  display: block;
  top: 40px;
  right: 40px;
  display: block;
  width: 40px;
  height: 40px;
  font-size: 10px;
  text-align: center;
  cursor: pointer;
  z-index: 3;
}

.bar {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 40px;
  height: 1px;
  background: rgb(0, 0, 0);
  -webkit-transition: all .5s;
  transition: all .5s;
  -webkit-transform-origin: left top;
  -ms-transform-origin: left top;
  transform-origin: left top;
}

.bar.middle {
  top: 15px;
  opacity: 1;
}

.bar.bottom {
  top: 30px;
  -webkit-transform-origin: left bottom;
  -ms-transform-origin: left bottom;
  transform-origin: left bottom;
}

.menu-btn__text {
  position: absolute;
  bottom: -15px;
  left: 0;
  right: 0;
  margin: auto;
  color: #fff;
  -webkit-transition: all .5s;
  transition: all .5s;
  display: block;
  visibility: visible;
  opacity: 1;
}

.menu-btn:hover .bar {
  background: #999;
}

.menu-btn:hover .menu-btn__text {
  color: #999;
}

.close-menu {
  position: fixed;
  top: 0;
  right: 300px;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,0);
  cursor: url(http://theorthodoxworks.com/demo/images/cross.svg),auto;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: .3s;
  transition-duration: .3s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  visibility: hidden;
  opacity: 0;
}

/* checked */
.check:checked ~ .drawer-menu {
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  opacity: 1;
  z-index: 2;
}

.check:checked ~ .contents {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  -webkit-transform: translateX(-300px);
  -ms-transform: translateX(-300px);
  transform: translateX(-300px);
}

.check:checked ~ .menu-btn .menu-btn__text {
  visibility: hidden;
  opacity: 0;
}

.check:checked ~ .menu-btn .bar.top {
  width: 56px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.check:checked ~ .menu-btn .bar.middle {
  opacity: 0;
}

.check:checked ~ .menu-btn .bar.bottom {
  width: 56px;
  top: 40px;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.check:checked ~ .close-menu {
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
  background: rgba(0,0,0,.5);
  visibility: visible;
  opacity: 1;
  z-index: 3;
}

Answer 1

頻出の質問です。

[ハンバーガーメニュー ページ内リンク] の検索結果： 10000件

それらに書かれているとおり、a[href="#"] のクリックイベント内で、ハンバーガーアイコンをクリックするように記述すれば大丈夫だと思います。

Comments

[MICHELLE]

Lhankor_Mhy様がコメントしてくださったとおりに、

$('a[href^="#"]').on('click', function() {
$('.menu-btn').click(); // .menuをクリックした時と同じ処理
return false; //a要素のリンク先移動防ぐ
});

こちらの記述を行ったところ、無事閉じるようになりました。
ありがとうございました！！

[Lhankor_Mhy]

ご解決されて何よりです。
ただ、return false すると、ページ内リンクが動作しなくないですか？

[MICHELLE]

今のところ不具合はなくページ内リンクは動作しております！