シンプルなスマホのメニュー実装方法。応用が効くのが嬉しい！
2020年9月から 「全てのWEBサイトをモバイルファーストインデックス（MFI）へ移行していく 」と、googleから発表がありました。
スマホ対応が当たり前になっていくなかで、
コーディングも複雑になってきています。
そんななか、簡単にシンプルなコードで実装できるスマホ対応のメニューを見つけました！
いろいろ応用もでき、ヘビロテ中です。
目次
ほとんどCSSで実装できます！
ボタンをクリックしたときに、<body>にclassを追加するコードを書く
↓
そのクラス有り無しでCSSのスタイルを変える
ことで、ほとんどCSSで実装でき、自由度が高く応用がかなり効く初心者にも扱いやすいコードです！
まずはデモから。
スマホメニューのデモページ
このメニューがほとんどCSSでできていると知ったときの感動といったら。
まずはHTMLでボタンとメニューをつくる
ポイントは、メインコンテンツ部分とメニュー部分を
それぞれ独立させてコーディングしてあげることです。
①メニュー表示時に、コンテンツ部分を薄暗く覆う部分
CSSで領域をつくるので、空の<div>を置いてあげます。
これは絶対必要ではないのですが、あると使いやすくなります。
②スライドして現れるメニュー
実際に表示させたいメニューを<li>タグで記述します。
③メニューの表示・非表示を切り替えるボタン
CSSで三本線のハンバーガーメニューを作ります。
まずは簡単に始めたい人は、画像で代用してもOKです！
大事なのはid=”js__sideMenuBtn”をつけてあげることです。
④メインコンテンツ部分
ページの内容を記述する部分です。
全体を<div class=”wrapper”>で囲ってあげます。
<body id="top" class="toppage">
<!-- ①メニュー表示時メインコンテンツを覆う -->
<div class="overlay" id="js__overlay"></div>
<!-- ②メニュー -->
<nav class="side-menu">
<ul class="side-menu__ul">
<li><a href="">HOME</a></li>
<li><a href="">メニュータイトル1</a></li>
<li><a href="/voice">メニュータイトル2</a></li>
<li class="side-menu__li">
<h2>メニュータイトル3</h2>
<ul class="side-menu__ul--child">
<li><a href="">サブメニュータイトル1</a></li>
<li><a href="">サブメニュータイトル2</a></li>
</ul>
</li>
<li><a href="">メニュータイトル4</a></li>
</ul>
</nav>
<!-- ③メニューの表示・非表示を切り替えるボタン -->
<div class="side-menu-btn" id="js__sideMenuBtn">
<div class="ellipsis-v">
<span class="point top"></span>
<span class="point mid"></span>
<span class="point bot"></span>
</div>
</div>
<!-- ④メインコンテンツ -->
<div class="wrapper">
<main>
<div class="content">【スマホメニュー】右上のボタンを押してね</div>
<div class="content">コンテンツ02</div>
<div class="content">コンテンツ03</div>
<div class="content">コンテンツ04</div>
<div class="content">コンテンツ05</div>
</main>
<footer>
<div class="copyright"><p>©2020 oji-chan.net</p></div>
</footer>
</div>
</body>jQueryで「ボタンを押したらclassを追加する」コードを書く
idがjs__sideMenuBtnのボタンをクリックしたら、bodyにside-openというclassが追加されます。
idがjs__overlayのコンテンツを覆った部分をクリックすると bodyのside-openが削除されます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
jQuery(function($){
var $body = $('body');
$('#js__sideMenuBtn').on('click', function () {
$body.toggleClass('side-open');
$('#js__overlay').on('click', function () {
$body.removeClass('side-open');
});
});
});
</script>CSSでメニューのデザイン・出現方法を指定する
CSSで実際の仕組みを作っていきます。
メインコンテンツをずらし【A】、その空白にメニューをずらす【C】ことでメニューを表示させるという仕組みです。
【A】 メインコンテンツ部分（HTMLの④）のスタイル
メニューボタンを押したとき（＝bodyのクラスにside-openが追加されたとき）に左に300pxずらします。
【B】 メインコンテンツを覆う部分（HTMLの①）のスタイル
最初は透明・非表示に設定しておき、メニューボタンを押したときに黒半透明・表示に変更します。
【C】 実際に表示されるメニュー （HTMLの②） のスタイル
最初は右に300pxずらしておき、メニューボタンを押したときにずらしを0pxにします。
【D】 メニューの表示・非表示を切り替えるボタン（HTMLの③）のスタイル
このボタンを押すとメニューが表示され、ボタンが「×」に変わります。もう一度押すと、メニューが非表示となりボタンも元に戻ります。
/* 【A】メニュー表示時にメインコンテンツをX軸方向にずらす */
.wrapper {
position: relative;
width: 100%;
height: 100%;
transition: all .5s ease;
z-index: 2;
background: #fff;
}
.side-open .wrapper,
.side-open .overlay {
transform: translate3d(-300px, 0, 0);
}
/* 【B】メニュー表示時にメインコンテンツを覆う部分 */
.overlay {
visibility: hidden;
position: fixed;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background: rgba(0,0,0,0);
transition: all .5s ease;
z-index: 3;
}
.side-open .overlay {
visibility: visible;
cursor: pointer;
background: rgba(0,0,0,.7);
transition: all .5s ease;
}
/* 【C】メニューのデザイン */
.side-menu {
position: fixed;
top: 0;
right: -300px;
width: 300px;
height: 100%;
padding-top: 150px;
text-align: left;
background: #34512c;
z-index: 1;
transition: all .5s ease;
}
.side-open .side-menu{
right: 0;
transition: all .5s ease;
}
.side-menu__ul {
width: 100%;
height: 90%;
display: block;
}
@media screen and (max-width:767.9px) {
.side-menu__ul {
overflow-x: hidden;
overflow-y: scroll;
}
}
.side-menu__ul--child {
display: none;
font-size: 1.0rem;
}
.active .side-menu__ul--child {
display: block;
}
.side-menu__ul--child li a {
display: block;
padding: 8px 0 8px 32px;
font-size: 1.2rem;
color: #ccc;
}
.side-menu__ul > li > a,
.side-menu__ul > li h2 {
display: block;
padding: 10px 0 10px 20px;
color: #fff;
}
.side-menu__ul h2 {
cursor: pointer;
-webkit-transition: all .5s;
transition: all .5s;
}
.side-menu__ul > li > h2:after {
content: ' +';
color: #ffd800;
padding-left: 0.5em;
}
.side-menu__ul > li.active h2:after {
content: ' -';
}
.side-menu__ul > li > h2:hover,
.side-menu__ul > li a:hover {
background: #f26964;
color: #fff;
}
/* 【D】メニューの表示・非表示を切り替えるボタンのデザイン */
.side-menu-btn {
position: fixed;
top: 11px;
right: 6px;
width: 38px;
height: 38px;
padding: 5px;
cursor: pointer;
z-index: 4;
background: rgba(255, 255, 255, 0.9);
}
.side-open .side-menu-btn{
background: none;
}
.ellipsis-v {
position: relative;
display: block;
cursor: pointer;
width: 28px;
height: 28px;
}
.ellipsis-v .point {
position: absolute;
left: 0;
right: 0;
display: block;
width: 100%;
height: 4px;
margin: auto;
background: #333;
transition: all .3s;
}
.ellipsis-v .point.top {
top: 0;
}
.ellipsis-v .point.mid {
top: 0;
bottom: 0;
}
.ellipsis-v .point.bot {
bottom: 0;
}
.side-menu-btn:hover .top {
transform: translateY(-2px);
}
.side-menu-btn:hover .bot {
transform: translateY(2px);
}
.side-open .side-menu-btn:hover .top,
.side-open .top {
width: 38px;
height: 1px;
background: #fff;
transform-origin: left top;
transform: rotate(45deg);
}
.side-open .mid {
opacity: 0;
}
.side-open .side-menu-btn:hover .bot,
.side-open .bot {
width: 38px;
height: 1px;
background: #fff;
transform-origin: left bottom;
transform: rotate(-45deg);
}
.side-open .side-menu-btn:hover .bot,
.side-open .side-menu-btn:hover .top {
background: #ccc;
}こちらのサイトを参考にさせていただきました。
【jQuery】プラグインを使わずに、簡単にサイドからスライドして現れるメニューを実装する(ほぼCSS)
まだスマホ対応できていないサイトは今から始めよう！
私がスマホ対応するときに最初につまずいたのが、グローバルメニューでした。
これを使えばメニューの問題は解決！
classを追加するという簡単なjQueryなので、
CSSを使いこなせれば色々と応用も効きます！！
色々試してみてください！
