【jQuery】超絶簡単！モーダルメニューの実装方法【初心者向け】

最近のWebサイトはアクセス解析を見ると７割近くがスマホからのアクセスです。
そしてスマホのメニューは3本ラインのハンバーガーメニューが主流ですが、
そのメニューの種類は横からメニューがスライドインするタイプ、上部からメニューが下がってくるタイプ、画面全体を覆うモーダルタイプと様々です。

今回はその中から、画面全体を覆うモーダルタイプのメニューを簡単に実装できる方法をCODE PENから紹介します。
個人的にはこのタイプが一番分かりやすくて好きです。

この記事の目次

  1. CODE PEN
  2. HTML
  3. CSS
  4. jQuery
  5. カスタマイズ

CODE PEN

See the Pen
Full Screen Hamburger Menu 01 by webopixel (@webopixel)
on CodePen.

HTML

<div id="nav-toggle">
<div>
<span></span>
<span></span>
<span></span>
</div>
</div>

<div id="gloval-nav">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Works</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div><!-- /#gloval-nav -->

<div id="container">
<h1>Full Screen Hamburger Menu 01</h1>
</div>

CSS

参考のCODE PENではSCSSで書かれていますが、
CSSに変換しました。

body {
font-size: 14px;
font-family: "Roboto", serif;
background: #eee;
}

h1 {
text-align: center;
padding-top: 60px;
}

#nav-toggle {
position: fixed;
top: 25px;
right: 25px;
height: 32px;
cursor: pointer;
}
#nav-toggle > div {
position: relative;
width: 36px;
}
#nav-toggle span {
width: 100%;
height: 1px;
left: 0;
display: block;
background: #333;
position: absolute;
transition: transform 0.3s ease-in-out, top 0.2s ease;
}
#nav-toggle span:nth-child(1) {
top: 0;
}
#nav-toggle span:nth-child(2) {
top: 14px;
}
#nav-toggle span:nth-child(3) {
top: 28px;
}
#nav-toggle:hover span:nth-child(1) {
top: 4px;
}
#nav-toggle:hover span:nth-child(3) {
top: 23px;
}

.open #nav-toggle span {
background: #fff;
}
.open #nav-toggle span:nth-child(1) {
top: 15px;
transform: rotate(45deg);
}
.open #nav-toggle span:nth-child(2) {
top: 15px;
width: 0;
left: 50%;
}
.open #nav-toggle span:nth-child(3) {
top: 15px;
transform: rotate(-45deg);
}

/* z-index */
#nav-toggle {
z-index: 1000;
}

#container {
z-index: 900;
}

#gloval-nav {
background: #000;
color: #fff;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 990;
text-align: center;
display: flex;
visibility: hidden;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 29px;
opacity: 0;
transition: opacity 0.3s ease, visibility 0.3s ease;
}

#gloval-nav a {
display: block;
color: #fff;
text-decoration: none;
padding: 10px 0;
transition: color 0.3s ease;
}
#gloval-nav a:hover {
color: #666;
}
#gloval-nav ul {
list-style: none;
}
#gloval-nav ul li {
opacity: 0;
transform: translateX(200px);
transition: transform 0.3s ease, opacity 0.1s ease;
}
#gloval-nav ul li:nth-child(2) {
transition-delay: 0.15s;
}
#gloval-nav ul li:nth-child(3) {
transition-delay: 0.3s;
}
#gloval-nav ul li:nth-child(4) {
transition-delay: 0.45s;
}
#gloval-nav ul li:nth-child(5) {
transition-delay: 0.6s;
}
#gloval-nav ul li:nth-child(6) {
transition-delay: 0.75s;
}
#gloval-nav ul li:nth-child(7) {
transition-delay: 0.9s;
}

/* open */
.open {
overflow: hidden;
}
.open #gloval-nav {
visibility: visible;
opacity: 1;
}
.open #gloval-nav li {
opacity: 1;
transform: translateX(0);
transition: transform 1s ease, opacity 0.9s ease;
}

jQuery

jqueryを読み込みます。

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

bodyタグの閉じタグ直前に書くか、外部jsファイルに記述します。

(function($) {
$(function () {
$('#nav-toggle').on('click', function() {
$('body').toggleClass('open');
});
});
})(jQuery);

カスタマイズ

3本ラインの配置を変更する

32〜40行目のtop:の値を変更することでラインの間隔を変更できます。

ホバー時のアニメーション

ホバー時のアニメーションは41〜46行目を編集します。
アニメーションがいらなければ削除してしまってOKです。

メニューオープン時のアニメーション

横から各メニューがスライドする量は109行目のtranslateX(200px)を変更します。
スライドの速度は142行目のtransform 1sの部分を変更します。
透過割合を0〜100%にする時間はopacity 0.9sの部分を変更します。

transition: transform 1s ease, opacity 0.9s ease;

© GOKAN DESIGN STUDIO