【jQuery】モーダルウィンドウのメニューによるページ内リンクの際に、リンクのタップでメニューを非表示にする方法

こんにちは、webデザイナー・コーダーのsowです。
みなさんハンバーガーメニュー使ってますか？

今回紹介するTIPSは、
「モーダルウィンドウのメニューによるページ内リンクの際に、リンクのタップでメニューを非表示にする方法」
です。
ちょっとややこしいですが、
LPサイト等でモーダルウィンドウのメニューを設置したいけど、閉じるボタンをタップしないとメニューが消えないという問題を解決する方法です。
実際に僕の案件でも使用したことがあるものを紹介していきます。
DEMOは下記より。

DEMO

この記事の目次

  1. HTML
  2. CSS
  3. jQuery

HTML

メニュー部分のHTMLです。
下記をコピペしてリンク部分のIDを自分のサイトに合わせて書き換えてください。

<div class="sp-navigation">
<div class="sp-nav-header">
<div class="menu-btn" id="js__btn">
<span data-txt-menu="MENU" data-txt-close="CLOSE">
<span class="menu-btn-line"></span>
</span>
</div>
</div>
<div class="menu" id="js__nav">
<ul>
<li><a href="#content_01">コンテンツ 01</a></li>
<li><a href="#content_02">コンテンツ 02</a></li>
<li><a href="#content_03">コンテンツ 03</a></li>
</ul>
</div>
</div>

CSS

メニュー開閉ボタンもCSSで作っていますが、
画像に置き換えてもOKです。

/*開閉用ボタン（ハンバーガーボタン）*/
.menu-btn {
position: fixed;
top: 18px;
right: 3%;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
z-index: 101;
border: solid 1px #333;
-webkit-transition: all 3s ease-in-out;
transition: all .3s ease-in-out;
}
.menu-btn-line {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 1px;
width: 30%;
background: #333;
-webkit-transition: all 3s ease-in-out;
transition: all .3s ease-in-out;
}
.menu-btn-line::before,
.menu-btn-line::after {
content: "";
height: 1px;
width: 100%;
background: #333;
position: absolute;
left: 0;
-webkit-transition: inherit;
transition: inherit;
}
.menu-btn-line::before{
top: -5px;
}
.menu-btn-line::after{
top: 5px;
}

/* 開閉用ボタンがクリックされた時のスタイル */
.open .menu {
-webkit-transition: all .5s;
transition: all .5s;
visibility: visible;
opacity: 1;
}
.open .menu-btn {
border-color: #fff
}
.open .menu-btn-line{
background-color: transparent;
}
.open .menu-btn-line::before,
.open .menu-btn-line::after {
top: 0;
background: #fff
}
.open .menu-btn-line::before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.open .menu-btn-line::after {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}

/*開いたメニュー*/
.menu {
position: fixed;
display: flex;
justify-content: center;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(1,1,1,.9);
-webkit-transition: all .5s;
transition: all .5s;
visibility: hidden;
opacity: 0;
z-index: 100;
}
.menu ul {
transform: translateY(30%);
padding: 0;
list-style-type: none
}
.menu li {
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
}
.menu li a {
display: block;
font-size: 1.4rem;
color: #fff;
text-decoration: none;
-webkit-transition: all .2s;
transition: all .2s;
}
.menu li a:hover {
transform: translateX(5px);
-webkit-transition: all .2s;
transition: all .2s;
}

jQuery

下記CDNを利用してjQueryを読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

動作用のコードは以下です。
念の為コンフリクトしてます。

<script>
jQuery.noConflict();
(function($){

$(function () {
var $body = $('body');
//開閉用ボタンをクリックでクラスの切替え
$('#js__btn').on('click', function () {
$body.toggleClass('open');
});
//メニュー名以外の部分をクリックで閉じる
$('#js__nav').on('click', function () {
$body.removeClass('open');
});
});

}(jQuery));
</script>

以上でハンバーガーメニューを使用してページ内リンクを設定した場合でも、
リンクをクリックするとメニューが閉じて移動出来るようになります。
もちろん他のページへ移動することも可能なので是非使ってみてください。

© GOKAN DESIGN STUDIO