ウェベン!

スマホ対応メニューは簡単に実装できる!

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を使いこなせれば色々と応用も効きます!!

色々試してみてください!

キーワード: