デバイスによって変わるレスポンシブメニューの作り方

今回はWebサイト上でレスポンシブに変化するメニューについて解説します。各デバイスの横幅に合わせて表示が変化するレスポンシブ対応には、メニューのレスポンシブ表示も含まれます。

メニューをレスポンシブ対応させるメリット
ハンバーガーメニューの実装方法
フリックスクロールメニューの実装方法
ボトムメニューの実装方法

今回は以下のポイントに絞って、レスポンシブなメニューについて解説します。

メニューをレスポンシブ対応させるメリットを抑えた上で、各レスポンシブメニューの実装方法を確認しましょう。

1 メニューをレスポンシブ対応させるメリットは？
2 レスポンシブメニュー①ハンバーガーメニュー
3 レスポンシブメニュー②フリックスクロールメニュー
4 レスポンシブメニュー③ボトムメニュー
5 まとめ

メニューをレスポンシブ対応させるメリットは？

PC表示では横一直線に表示されることが多いグローバルメニューは、タブレットやスマートフォンで表示する時はユーザーにとって使いやすいメニューに変化することが求められます。

ではユーザーにとって使いやすいメニューとは、一体どんなものでしょう。具体的には以下の3点が当てはまるメニューが、ユーザーにとって使いやすいメニューであると言われています。

一目見て「メニューである」と分かるデザイン性
ユーザーが見つけやすく分かりやすい位置指定
スマートフォンやタブレットでタップしやすい

レスポンシブメニュー①ハンバーガーメニュー

別名ドロワーメニューとも言われるハンバーガーメニューは、レスポンシブなメニューの中でも圧倒的に使われている割合が多いメニューです。

三本線で表示されるボタンをタップすれば、上下左右の何処かからメニューが引き出されたり、折りたたまれたメニューが表示されたりとさまざまな表示方法があるメニューでもあるため、デザイン性や遊び心のあるメニューとも言えます。最近ではレスポンシブ対応としてだけではなく、PC表示でもハンバーガーメニューを使用するWebサイトも増えてきました。

ハンバーガーメニューの特徴

レスポンシブメニューの王道とも言えるため、レスポンシブ表示に慣れたユーザーにはすぐメニューであると認識されやすい。
一方で三本線のみで表示されるため、初見のユーザーにはメニューとして認識されにくい。そのため、三本線の上下にメニュー等と記載する必要がある。
コーディングがシンプルで実装しやすい。
ユーザーがタップすることでメニューを表示するため、必要な時のみ表示することでスペースを取らなくて済む。

ハンバーガーメニューの実装方法

ハンバーガーメニューの実装方法はHTMLとCSS、HTML・CSS・Javascript(JQuery)を組み合わせたものの2パターンに分けることができます。今回はそれぞれをまとめてご紹介します。

HTML・CSSだけでの実装

HTMLを組む

<header>
    <div class="hamburger-menu">
    <!--   ボタンが押されたかどうかをチェックボックスで判断する -->
        <input type="checkbox" id="menu-btn-check">
  <!--     ハンバーガーボタン -->
        <label for="menu-btn-check" class="menu-btn"><span></span></label>
        <!--メニュー-->
        <div class="menu-content">
            <ul>
                <li>
                    <a href="#">menu1</a>
                </li>
                <li>
                    <a href="#">メmenu2</a>
                </li>
                <li>
                    <a href="#">menu3</a>
                </li>
            </ul>
        </div>
        <!--メニュー　end-->
    </div>
</header>

<ul>

<li>

</li>

<li>

<a href="#">メmenu2</a>

</li>

<li>

</li>

</ul>

</div>

</div>

</header>

ハンバーガーボタンを実装する

/* =================
ハンバーガーボタンの実装
================= */

.menu-btn {
  position: fixed;
  top: 10px;
  right: 10px;
  display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  z-index: 90;
  background-color: black;
}
.menu-btn:hover {
  cursor: pointer;
}
/* 三本線の実装 */
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
  content: "";
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background-color: #ffffff;
  position: absolute;
}
.menu-btn span:before {
  bottom: 8px;
}
.menu-btn span:after {
  top: 8px;
}
/* チェックボックスを非表示にする */
#menu-btn-check {
  display: none;
}

#menu-btn-check:checked ~ .menu-btn span {
  background-color: rgba(
    255,
    255,
    255,
    0
  ); /*メニューオープン時は真ん中の線を透明にする*/
}

/* メニューを開いている時はハンバーガーボタンが×になる */
#menu-btn-check:checked ~ .menu-btn span::before {
  bottom: 0;
  transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
  top: 0;
  transform: rotate(-45deg);
}

/* =================

ハンバーガーボタンの実装

================= */

.menu-btn {

position: fixed;

top: 10px;

right: 10px;

display: flex;

height: 60px;

width: 60px;

justify-content: center;

align-items: center;

z-index: 90;

background-color: black;

}

.menu-btn:hover {

cursor: pointer;

}

/* 三本線の実装 */

.menu-btn span,

.menu-btn span:before,

.menu-btn span:after {

content: "";

display: block;

height: 3px;

width: 25px;

border-radius: 3px;

background-color: #ffffff;

position: absolute;

}

.menu-btn span:before {

bottom: 8px;

}

.menu-btn span:after {

top: 8px;

}

/* チェックボックスを非表示にする */

#menu-btn-check {

display: none;

}

#menu-btn-check:checked ~ .menu-btn span {

background-color: rgba(

255,

); /*メニューオープン時は真ん中の線を透明にする*/

}

/* メニューを開いている時はハンバーガーボタンが×になる */

#menu-btn-check:checked ~ .menu-btn span::before {

bottom: 0;

transform: rotate(45deg);

}

#menu-btn-check:checked ~ .menu-btn span::after {

top: 0;

transform: rotate(-45deg);

}

メニューの表示・非表示を指定する

/* =================
メニュー部分の実装
================= */

.menu-content {
  width: 80%;
  height: 100%;
  position: fixed;
  top: 0;
   /* メニューを外に出しておく */
  left: 100%;　

  z-index: 80;
  background-color: black;
  transition: all 0.5s; /*アニメーションを滑らかにする*/
}
.menu-content ul {
  padding: 70px 10px 0;
}
.menu-content ul li {
  border-bottom: solid 1px #ffffff;
  list-style: none;
}
.menu-content ul li a {
  display: block;
  width: 100%;
  font-size: 15px;
  box-sizing: border-box;
  color: #ffffff;
  text-decoration: none;
  padding: 9px 15px 10px 0;
  position: relative;
}

#menu-btn-check:checked ~ .menu-content {
  left: 30%; /*メニューを画面内へ動かす*/
}

/* =================

メニュー部分の実装

================= */

.menu-content {

width: 80%;

height: 100%;

position: fixed;

top: 0;

/* メニューを外に出しておく */

left: 100%;　

z-index: 80;

background-color: black;

transition: all 0.5s; /*アニメーションを滑らかにする*/

}

.menu-content ul {

padding: 70px 10px 0;

}

.menu-content ul li {

border-bottom: solid 1px #ffffff;

list-style: none;

}

.menu-content ul li a {

display: block;

width: 100%;

font-size: 15px;

box-sizing: border-box;

color: #ffffff;

text-decoration: none;

padding: 9px 15px 10px 0;

position: relative;

}

#menu-btn-check:checked ~ .menu-content {

left: 30%; /*メニューを画面内へ動かす*/

}

実際にこのコードを組んだプレビューが以下になります。

HTML・CSSで実装したハンバーガーボタンプレビュー

HTML・CSS・Javascript(JQuery)での実装

HTMLを組む

<div id="navArea">

  <nav>
    <div class="inner">
      <ul>
        <li><a href="#">menu1</a></li>
        <li><a href="#">menu2</a></li>
        <li><a href="#">menu3</a></li>
      </ul>
    </div>
  </nav>
<!-- ハンバーガーボタンをspanで表示する -->
  <div class="toggle_btn">
    <span></span>
    <span></span>
    <span></span>
  </div>
<!-- メニューを開いている時だけ背景の色が変化する -->
  <div id="mask"></div>

</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>

<nav>

<ul>

</ul>

</div>

</nav>

</div>

</div>

ハンバーガーボタンの実装(CSS)

/*============
.toggle_btn（ハンバーガーボタン実装）
=============*/
.toggle_btn {
  display: block;
  position: fixed;
  top: 30px;
  left: 30px;
  width: 30px;
  height: 30px;
  transition: all .5s;
  cursor: pointer;
  z-index: 3;
}
.open .toggle_btn {
  left: 330px;
}
/* 三本線 */
.toggle_btn span {
  display: block;
  position: absolute;
  left: 0;
  width: 30px;
  height: 2px;
  background-color: #333;
  border-radius: 4px;
  transition: all .5s;
}
.toggle_btn span:nth-child(1) {
  top: 4px;
}
.toggle_btn span:nth-child(2) {
  top: 14px;
}
.toggle_btn span:nth-child(3) {
  bottom: 4px;
}
.open .toggle_btn span {
  background-color: #fff;
}
.open .toggle_btn {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
.open .toggle_btn span:nth-child(1), .open .toggle_btn span:nth-child(3) {
  width: 16px;
}
.open .toggle_btn span:nth-child(1) {
  -webkit-transform: translate(-1px,4px) rotate(-45deg);
  transform: translate(-1px,4px) rotate(-45deg);
}
.open .toggle_btn span:nth-child(3) {
  -webkit-transform: translate(-1px,-4px) rotate(45deg);
  transform: translate(-1px,-4px) rotate(45deg);
}
@media screen and (max-width: 767px) {
  .open .toggle_btn {
    left: 250px;
  }
}

/*============

.toggle_btn（ハンバーガーボタン実装）

=============*/

.toggle_btn {

display: block;

position: fixed;

top: 30px;

left: 30px;

width: 30px;

height: 30px;

transition: all .5s;

cursor: pointer;

z-index: 3;

}

.open .toggle_btn {

left: 330px;

}

/* 三本線 */

.toggle_btn span {

display: block;

position: absolute;

left: 0;

width: 30px;

height: 2px;

background-color: #333;

border-radius: 4px;

transition: all .5s;

}

.toggle_btn span:nth-child(1) {

top: 4px;

}

.toggle_btn span:nth-child(2) {

top: 14px;

}

.toggle_btn span:nth-child(3) {

bottom: 4px;

}

.open .toggle_btn span {

background-color: #fff;

}

.open .toggle_btn {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

.open .toggle_btn span:nth-child(1), .open .toggle_btn span:nth-child(3) {

width: 16px;

}

.open .toggle_btn span:nth-child(1) {

-webkit-transform: translate(-1px,4px) rotate(-45deg);

transform: translate(-1px,4px) rotate(-45deg);

}

.open .toggle_btn span:nth-child(3) {

-webkit-transform: translate(-1px,-4px) rotate(45deg);

transform: translate(-1px,-4px) rotate(45deg);

}

@media screen and (max-width: 767px) {

.open .toggle_btn {

left: 250px;

}

メニューの開閉時の表示設定(CSS)

/*============
nav（メニュー）
=============*/
nav {
  display: block;
  position: fixed;
  top: 0;
  left: -300px;
  bottom: 0;
  width: 300px;
  background: #ffffff;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: all .5s;
  z-index: 3;
  opacity: 0;
}
.open nav {
  left: 0;
  opacity: 1;
}
nav .inner {
  padding: 25px;
}
nav .inner ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav .inner ul li {
  position: relative;
  margin: 0;
  border-bottom: 1px solid #333;
}
nav .inner ul li a {
  display: block;
  color: #333;
  font-size: 14px;
  padding: 1em;
  text-decoration: none;
  transition-duration: 0.2s;
}
nav .inner ul li a:hover {
  background: #e4e4e4;
}
@media screen and (max-width: 767px) {
  nav {
    left: -220px;
    width: 220px;
  }
}

/*============

nav（メニュー）

=============*/

nav {

display: block;

position: fixed;

top: 0;

left: -300px;

bottom: 0;

width: 300px;

background: #ffffff;

overflow-x: hidden;

overflow-y: auto;

-webkit-overflow-scrolling: touch;

transition: all .5s;

z-index: 3;

opacity: 0;

}

.open nav {

left: 0;

opacity: 1;

}

nav .inner {

padding: 25px;

}

nav .inner ul {

list-style: none;

margin: 0;

padding: 0;

}

nav .inner ul li {

position: relative;

margin: 0;

border-bottom: 1px solid #333;

}

nav .inner ul li a {

display: block;

color: #333;

font-size: 14px;

padding: 1em;

text-decoration: none;

transition-duration: 0.2s;

}

nav .inner ul li a:hover {

background: #e4e4e4;

}

@media screen and (max-width: 767px) {

nav {

left: -220px;

width: 220px;

}

ボタンを押したらメニューが開閉する(JQuery)

(function($) {
  var $body   = $('body');
  var $btn   = $('.toggle_btn');
  var $mask  = $('#mask');
  var open   = 'open'; // class
  // メニューの開閉
  $btn.on( 'click', function() {
    if ( ! $body.hasClass( open ) ) {
      $body.addClass( open );
    } else {
      $body.removeClass( open );
    }
  });
  // 背景の除去
  $mask.on('click', function() {
    $body.removeClass( open );
  });
} )(jQuery);

(function($) {

var $body = $('body');

var $btn = $('.toggle_btn');

var $mask = $('#mask');

var open = 'open'; // class

// メニューの開閉

$btn.on( 'click', function() {

if ( ! $body.hasClass( open ) ) {

$body.addClass( open );

} else {

$body.removeClass( open );

}

});

// 背景の除去

$mask.on('click', function() {

$body.removeClass( open );

});

} )(jQuery);

実際にコーディングしたもののプレビューは以下です。

HTML・CSS・Javascript(JQuery)のハンバーガーボタン実装プレビュー

実装をおすすめするシーン

ハンバーガーメニューはレスポンシブデザインとして非常に多くのサイトで実装されているため、特にこだわりがない場合にはハンバーガーメニューでレスポンシブ対応をするのが無難です。

メニューをヘッダーやフッターで固定表示せず、できるだけコンテンツを表示するスペースを増やしたい時
機能面を優先してレスポンシブ対応をしたい時
メニュー項目数が一覧として表示するには多い時

レスポンシブメニュー②フリックスクロールメニュー

フリックスクロールメニューは横スクロールすることでメニューの全体を表示できるメニューです。メディア系のWebサイト等で主に使われる、カテゴリーが多いWebサイト等に推奨される形式でもあります。

フリックスクロールメニューの特徴

メニューが多い時でもユーザーが見やすい
ヘッダーの高さを下げられるため、一覧としてコンテンツを見やすい
一覧性には欠け、隠れている部分のメニューが認識されにくい
ユーザーが一目でメニューであると分かりやすい
画像と合わせずテキストだけの表示でも何のページか分かりやすい

フリックスクロールメニューの実装方法

フリックスクロールメニューはHTMLとCSSのみだけで実装できます。

HTMLを組む

<div class="nav-wrap">
  <div class="scroll-nav">
    <ul>
      <li><a href="#">menu1</a></li>
      <li><a href="#">menu2</a></li>
      <li><a href="#">menu3</a></li>
      <li><a href="#">menu4</a></li>
      <li><a href="#">menu5</a></li>
      <li><a href="#">menu6</a></li>
      <li><a href="#">menu7</a></li>
    </ul>
  </div>
  </div>

<ul>

</ul>

</div>

CSSで横にスクロールできるメニューを実装する

	.nav-wrap {
  position: relative;
}
.scroll-nav {
  width: 100%;
  background: #555;
  /* メニューの背景色 */
  overflow-x: auto;
  /* 慣性スクロール */
  -webkit-overflow-scrolling: touch;

}
.scroll-nav ul {
  max-width: 1060px; /* メニューの最大幅 */
  min-width: 770px; /* メニューの最小幅 */
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
  list-style: none;
  padding-right: 25px; /* 右側の固定分余白を空ける */
}
.scroll-nav ul li {
  float: left;
  width: 110px; /* メニューの個別の幅 */
  text-align: center;
}
.scroll-nav ul li:hover {
  background: #222; /* マウスホバー時の背景色 */
}
.scroll-nav ul li a {
  display: inline-block;
  color: #fff; /* メニューの文字色 */
  text-decoration: none;
}
/* スクロールバーを非表示にする */
::-webkit-scrollbar {
  display: none;
}

.nav-wrap {

position: relative;

}

.scroll-nav {

width: 100%;

background: #555;

/* メニューの背景色 */

overflow-x: auto;

/* 慣性スクロール */

-webkit-overflow-scrolling: touch;

}

.scroll-nav ul {

max-width: 1060px; /* メニューの最大幅 */

min-width: 770px; /* メニューの最小幅 */

height: 40px;

line-height: 40px;

margin: 0 auto;

list-style: none;

padding-right: 25px; /* 右側の固定分余白を空ける */

}

.scroll-nav ul li {

float: left;

width: 110px; /* メニューの個別の幅 */

text-align: center;

}

.scroll-nav ul li:hover {

background: #222; /* マウスホバー時の背景色 */

}

.scroll-nav ul li a {

display: inline-block;

color: #fff; /* メニューの文字色 */

text-decoration: none;

}

/* スクロールバーを非表示にする */

::-webkit-scrollbar {

display: none;

}

このコードで実装したフリックスクロールメニューのプレビューは以下から確認できます。

HTML・CSSだけで実装したフリックスクロールメニュープレビュー

実装をおすすめするシーン

フリックスクロールメニューとハンバーガーメニューのどちらを実装するか迷った際には、メニューの項目数の多さで判断することがおすすめです。そのため、記事カテゴリーなどで表示したい項目が多くなりがちな、メディア系のWebサイトを制作する時に実装を検討するのがおすすめです。

ブログやNewsのカテゴリをスマートフォンやタブレットでも分かりやすく表示したい時
第二階層のページメニューとは別に強調したい項目がある時
ブログのような投稿要素のある項目の新着表示を目立たせたい時

レスポンシブメニュー③ボトムメニュー

ボトムメニューはヘッダーに固定されるハンバーガーメニューや、フリックスクロールメニューとは異なり画面の一番下に固定表示されるメニューです。これはPC表示では使われることが少なく、スマートフォンやタブレット等のレスポンシブデザインが求められるデバイスで表示されることがほとんどです。

ボトムメニューを実装しているセントレア空港のWebサイトでは、以下の画像のように5つの項目が固定表示されています。

ボトムメニューの特徴

アイコンとテキストを合わせて表示することで分かりやすさUP
片手で操作するユーザーにとって使いやすい
メニュー項目数を絞って実装すれば押される確率も上がりやすい
ユーザーにアクションを求めやすい

ボトムメニューの実装方法

HTMLを組む

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V" crossorigin="anonymous">
<div>
<ul class="menu">
  <li>
    <a href="#"><i class="fas fa-home"></i><br>
      <span class="iconname">ホーム</span></a>
  </li>
  <li>
    <a href="#"><i class="fab fa-html5"></i><br>
      <span class="iconname">HTML5</span></a>
  </li>
  <li>
    <a href="#"><i class="fab fa-css3-alt"></i><br>
      <span class="iconname">CSS3</span></a>
  </li>
  <li>
    <a href="#"><i class="fab fa-js-square"></i><br>
      <span class="iconname">Javascript</span></a>
  </li>
</ul>
</div>

<div>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

<span class="iconname">Javascript</span></a>

</li>

</ul>

</div>

CSSを書く

.div {
  height: 600px;
}

.menu {
  position: fixed;
  left: 0;
 /*  ページの一番下に固定する */
  bottom: 0;
  background: blue;
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
align-items: center;
}
.menu li {
  display: table;
  table-layout: fixed;
  width: 100%;
  padding: 5px;
  list-style: none;
  text-align: center;

}
.menu a {
  text-decoration: none;
  color: white;
}
.menu a span {
  display: block;
  font-size: 4px;
}
/* PCでは非表示にする */
@media(min-width: 768px) {
	.bottom-menu {
		display: none;
	}
}