こんにちは、ryohei（@ityryohei）です！
オーバーレイメニューとは
オーバーレイは「覆う」や「重ねる」といった意味を持つ単語で、何かの表面に他の要素を重ねて表示する場合などに使われる用語です。
オーバーレイメニューというのは、画面上の表示の上に重ねる形で表示されるメニューのことで、最近では多くのWebサイトに取り入れられている手法です。
本項目ではjQueryを使ったシンプルなオーバーレイメニューの実装方法をご紹介したいと思います。
以下のデモと同じ内容を実装していきます。デモページで右上のハンバーガーアイコンをクリックするとメニューが表示されます。
オーバーレイメニューの実装
HTML
以下はハンバーガーアイコンとオーバーレイメニューのHTMLです。
<div class="overlayMenu">
<div class="overlayMenuInner">
<div class="overlayMenuHeader">Into the Program</div>
<div class="overlayMenuItem">
<ul>
<li><a href="#">Menu Item 001</a></li>
<li><a href="#">Menu Item 002</a></li>
<li><a href="#">Menu Item 003</a></li>
<li><a href="#">Menu Item 004</a></li>
<li><a href="#">Menu Item 005</a></li>
<li><a href="#">Menu Item 006</a></li>
<li><a href="#">Menu Item 007</a></li>
<li><a href="#">Menu Item 008</a></li>
<li><a href="#">Menu Item 009</a></li>
<li><a href="#">Menu Item 010</a></li>
<li><a href="#">Menu Item 011</a></li>
<li><a href="#">Menu Item 012</a></li>
<li><a href="#">Menu Item 013</a></li>
<li><a href="#">Menu Item 014</a></li>
<li><a href="#">Menu Item 015</a></li>
</ul>
</div>
</div>
</div>
<div class="overlayMenuBtn">
<span></span>
<span></span>
<span></span>
</div>
JS
以下のスクリプトは、ハンバーガーアイコンがクリックされた際にオーバーレイメニューにopenクラスが追加され、表示状態となります。またオーバーレイメニューが表示されている状態でハンバーガーアイコンがクリックされるとopenクラスが削除されてオーバーレイメニューを非表示にします。openクラスは表示、非表示のフラグに使用しているだけなので、スタイル等は指定しておりません。
$(function(){
$('.overlayMenuBtn').on('click', function(){
var $overlay = $('.overlayMenu');
var openClass = 'open';
if( !$overlay.hasClass(openClass) ){
$('.overlayMenuBtn span:nth-child(1)').css({'transform':'rotate(-45deg)', 'top':'10px'});
$('.overlayMenuBtn span:nth-child(2)').css({'opacity':'0'});
$('.overlayMenuBtn span:nth-child(3)').css({'transform':'rotate(45deg)', 'top':'8px', 'border': '1px solid #C3A572'});
$overlay.addClass(openClass);
$('body').css( 'overflow', 'hidden');
$overlay.fadeIn('slow');
} else {
$('.overlayMenuBtn span:nth-child(1)').css({'transform':'rotate(0)', 'top':'0px'});
$('.overlayMenuBtn span:nth-child(2)').css({'opacity':'1'});
$('.overlayMenuBtn span:nth-child(3)').css({'transform':'rotate(0)', 'top':'20px', 'border': '1px solid #999'});
$overlay.removeClass(openClass);
$('body').css( 'overflow', 'auto');
$overlay.fadeOut('slow');
}
});
});
CSS
CSSは参考程度に… 好きなようにデザインしましょう！
.overlayMenuBtn {
position: absolute;
top: 30px;
right: 4%;
height: 50px;
cursor: pointer;
z-index: 100001;
}
.overlayMenuBtn span {
position: relative;
display: block;
width: 40px;
border: 1px solid #999;
transition: .5s;
}
.overlayMenuBtn span:nth-child(1) { top: 0; }
.overlayMenuBtn span:nth-child(2) { top: 10px; }
.overlayMenuBtn span:nth-child(3) { top: 20px; }
.overlayMenu {
display: none;
position: fixed;
width: 100%;
height: 100vh;
overflow: auto;
background-color: rgba(255, 255, 255, 0.9);
z-index: 100000;
}
.overlayMenuInner {
padding: 10px 4% 40px 4%;
}
.overlayMenuHeader {
width: 100%;
height: 60px;
line-height: 60px;
color: #C3A572;
font-size: 32px;
}
.overlayMenuItem ul {
margin: 20px 0 40px 0;
padding: 0;
list-style-type: none;
}
.overlayMenuItem ul li {
border-top: 1px solid #ccc;
}
.overlayMenuItem ul li:last-child {
border-bottom: 1px solid #ccc;
}
.overlayMenuItem ul li a {
display: block;
width: 96%;
padding: 20px 0 20px 4%;
color: #009170;
text-decoration: none;
transition: .5s;
}
.overlayMenuItem ul li a:hover { background-color: #009170; }
.overlayMenuItem ul li a:hover { color: #fff; }
Copy & Paste
コピペ用に。以下のコードでオーバーレイメニューが簡単に実装できます。レスポンシブサイトで使用される場合は、ハンバーガーアイコンの表示／非表示をメディアクエリ等で調整するといいかもしれません。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>【DEMO】オーバーレイメニュー｜Into the Program</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
$('.overlayMenuBtn').on('click', function(){
var $overlay = $('.overlayMenu');
var openClass = 'open';
if( !$overlay.hasClass(openClass) ){
$('.overlayMenuBtn span:nth-child(1)').css({'transform':'rotate(-45deg)', 'top':'10px'});
$('.overlayMenuBtn span:nth-child(2)').css({'opacity':'0'});
$('.overlayMenuBtn span:nth-child(3)').css({'transform':'rotate(45deg)', 'top':'8px', 'border': '1px solid #C3A572'});
$overlay.addClass(openClass);
$('body').css( 'overflow', 'hidden');
$overlay.fadeIn('slow');
} else {
$('.overlayMenuBtn span:nth-child(1)').css({'transform':'rotate(0)', 'top':'0px'});
$('.overlayMenuBtn span:nth-child(2)').css({'opacity':'1'});
$('.overlayMenuBtn span:nth-child(3)').css({'transform':'rotate(0)', 'top':'20px', 'border': '1px solid #999'});
$overlay.removeClass(openClass);
$('body').css( 'overflow', 'auto');
$overlay.fadeOut('slow');
}
});
});
</script>
<style>
body {
position: relative;
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
background-image: url(//into-the-program.com/assets/images/front-image.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
padding: 20px;
text-align: center;
color: #fff;
border: 1px solid #fff;
background-color: rgba(195,165,114, 0.2);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
header {
position: relative;
width: 100%;
height: 80px;
background-color: rgba(255, 255, 255, 0.3);
}
.overlayMenuBtn {
position: absolute;
top: 30px;
right: 4%;
height: 50px;
cursor: pointer;
z-index: 100001;
}
.overlayMenuBtn span {
position: relative;
display: block;
width: 40px;
border: 1px solid #999;
transition: .5s;
}
.overlayMenuBtn span:nth-child(1) { top: 0; }
.overlayMenuBtn span:nth-child(2) { top: 10px; }
.overlayMenuBtn span:nth-child(3) { top: 20px; }
.overlayMenu {
display: none;
position: fixed;
width: 100%;
height: 100vh;
overflow: auto;
background-color: rgba(255, 255, 255, 0.9);
z-index: 100000;
}
.overlayMenuInner {
padding: 10px 4% 40px 4%;
}
.overlayMenuHeader {
width: 100%;
height: 60px;
line-height: 60px;
color: #C3A572;
font-size: 32px;
}
.overlayMenuItem ul {
margin: 20px 0 40px 0;
padding: 0;
list-style-type: none;
}
.overlayMenuItem ul li {
border-top: 1px solid #ccc;
}
.overlayMenuItem ul li:last-child {
border-bottom: 1px solid #ccc;
}
.overlayMenuItem ul li a {
display: block;
width: 96%;
padding: 20px 0 20px 4%;
color: #009170;
text-decoration: none;
transition: .5s;
}
.overlayMenuItem ul li a:hover { background-color: #009170; }
.overlayMenuItem ul li a:hover { color: #fff; }
</style>
</head>
<body>
<div class="overlayMenu">
<div class="overlayMenuInner">
<div class="overlayMenuHeader">Into the Program</div>
<div class="overlayMenuItem">
<ul>
<li><a href="#">Menu Item 001</a></li>
<li><a href="#">Menu Item 002</a></li>
<li><a href="#">Menu Item 003</a></li>
<li><a href="#">Menu Item 004</a></li>
<li><a href="#">Menu Item 005</a></li>
<li><a href="#">Menu Item 006</a></li>
<li><a href="#">Menu Item 007</a></li>
<li><a href="#">Menu Item 008</a></li>
<li><a href="#">Menu Item 009</a></li>
<li><a href="#">Menu Item 010</a></li>
<li><a href="#">Menu Item 011</a></li>
<li><a href="#">Menu Item 012</a></li>
<li><a href="#">Menu Item 013</a></li>
<li><a href="#">Menu Item 014</a></li>
<li><a href="#">Menu Item 015</a></li>
</ul>
</div>
</div>
</div>
<header>
<div class="overlayMenuBtn">
<span></span>
<span></span>
<span></span>
</div>
</header>
<h1>Overlay Menu</h1>
</body>
</html>
以上、オーバーレイメニューのご紹介でした！最後まで読んでいただきありがとうございました！
