株式会社I-SEED(アイシード)｜大阪・心斎橋のWEB制作集団

WordPressにおすすめ！CSSだけで作るレスポンシブメニュー
フロントエンド

WordPressにおすすめ！CSSだけで作るレスポンシブメニュー

全力疾走熱中症全力疾走熱中症
CSSCSSテクニックWordPressスニペット
この記事は、2019年11月25日に編集し、約 15 分で読めます。

今回はスマートフォン(SP)やiPadなどのタブレット(TB)向けナビゲーションメニューのコードスニペットを紹介したいと思います。

このコードは普段、自分がWordPress向けのレスポンシブによく使うコードなのでデザインに悩んでいる方にもおすすめです！

Responsive Menu (Only CSS)

早速紹介していきます！
まずはデモサイトをご覧下さい！
デモサイト

CodePenでもシェアしています。
CodePen Share

コード紹介

下記のコードが実際に動作しています。
（※ ダミー用のテキストは都合上、こちらには載せていません。）

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>SPメニュー</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  </head>
  <body id="scroll-top">
    <main>
      <section style="padding:15px; margin-bottom:70px;">
        <!-- コンテンツエリア -->
      </section>

      <!-- SP用メニュー 開始 -->
      <ul class="sp-menu">
        <!-- メニューアイテム -->
        <li class="sp-menu__item">
          <input type="checkbox" id="sp-menu__item-menu1" class="sp-menu__check">
          <label class="sp-menu__item--open" for="sp-menu__item-menu1">
            <span class="sp-menu__icon"><i class="fas fa-bars"></i></span>
            <span class="sp-menu__icon-txt">メニュー</span>
          </label>
          <label class="sp-menu__item--close" for="sp-menu__item-menu1"></label>
          <div class="sp-menu__contents sp-menu__contents-menu">
            <label class="sp-menu__contents--close" for="sp-menu__item-menu1"><i class="fas fa-times"></i></label>
            メニュー領域
          </div>      
        </li>

        <!-- メニューアイテム -->
        <li class="sp-menu__item">
          <a href="#">
            <div class="sp-menu__item--open">
              <span class="sp-menu__icon"><i class="fas fa-home"></i></span>
              <span class="sp-menu__icon-txt">ホーム</span>
            </div>
          </a>
        </li>

        <!-- メニューアイテム -->
        <li class="sp-menu__item">
          <input type="checkbox" id="sp-menu__item-search" class="sp-menu__check">
          <label class="sp-menu__item--open" for="sp-menu__item-search">
            <span class="sp-menu__icon"><i class="fas fa-search"></i></span>
            <span class="sp-menu__icon-txt">検索</span>
          </label>
          <label class="sp-menu__item--close" for="sp-menu__item-search"></label>
          <div class="sp-menu__contents sp-menu__contents-search">
            <!-- 使用する環境に合わせて検索フォームを挿入してください -->
            <form method="get" action="#">
              <input type="text" placeholder="サイト内を検索" name="s" value="">
              <input type="submit" value="" alt="検索" title="検索">
            </form>
          </div>      
        </li>

        <!-- メニューアイテム -->
        <li class="sp-menu__item">
          <a href="#scroll-top">
            <div class="sp-menu__item--open">
              <span class="sp-menu__icon"><i class="fas fa-arrow-up"></i></span>
              <span class="sp-menu__icon-txt">トップ</span>
            </div>
          </a>
        </li>

        <!-- メニューアイテム -->
        <li class="sp-menu__item">
          <input type="checkbox" id="sp-menu__item-menu2" class="sp-menu__check">
          <label class="sp-menu__item--open" for="sp-menu__item-menu2">
            <span class="sp-menu__icon"><i class="fas fa-outdent"></i></span>
            <span class="sp-menu__icon-txt">サイドバー</span>
          </label>
          <label class="sp-menu__item--close" for="sp-menu__item-menu2"></label>
          <div class="sp-menu__contents sp-menu__contents-menu2">
            <label class="sp-menu__contents--close" for="sp-menu__item-menu2"><i class="fas fa-times"></i></label>
            サイドバー領域
          </div>
        </li>
      </ul>
      <!-- SP用メニュー 終了 -->
    </main>
  </body>
</html>

CSS

/* 全体設定 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; 
}

html {
  scroll-behavior: smooth;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, li{
  list-style: none;
}

/* SP用メニュー */
.sp-menu {
  display: flex;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  height: 50px;
  background-color: #eee;
}

.sp-menu__item {
  width: calc(100%/5);  /* メニュー数に応じて変更 */
  height: 100%;
  text-align: center;
}

.sp-menu__check {
  display: none;
}

.sp-menu__item--open {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
}

.sp-menu__item--close {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  transition: .3s ease-in-out;
}

.sp-menu__icon {
  text-align: center;
}

.sp-menu__icon-txt {
  display: block;
  font-size: 10px;
}

.sp-menu__contents--close {
  display: block;
  margin: 10px 0;
  font-size: 30px;
}

.sp-menu__contents-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  transform: translateX(-100%);
  width: 80vw;
  height: 100vh;
  background-color: #fff;
  transition: .3s ease-in-out;
}
#sp-menu__item-menu1:checked ~ .sp-menu__contents-menu {
  transform: translateX(0%);
}
#sp-menu__item-menu1:checked ~ .sp-menu__item--close {
  display: block;
}

.sp-menu__contents-search{
  position: fixed;
  top: 40%;
  right: 5%;
  left: 5%;
  z-index: 10000;
  transform: translateY(1500%);  /* 画面からギリギリ飛ぶ範囲に設定 */
  width: 90vw;
  transition: .3s ease-in-out;
}
#sp-menu__item-search:checked ~ .sp-menu__contents-search {
  transform: translateY(0%);
}
#sp-menu__item-search:checked ~ .sp-menu__item--close {
  display: block;
}

.sp-menu__contents-menu2{
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10000;
  transform: translateX(100%);
  width: 80vw;
  height: 100vh;
  background-color: #fff;
  transition: .3s ease-in-out;
}
#sp-menu__item-menu2:checked ~ .sp-menu__contents-menu2 {
  transform: translateX(0%);
}
#sp-menu__item-menu2:checked ~ .sp-menu__item--close {
  display: block;
}

/* 検索フォーム（必要に応じて） */
input[type="text"] {
  width: 100%;
  padding: 10px;
  border: solid 1px #bbb;
  border-radius: 4px;
  font-size: 16px;
}
input[type="submit"] {
  position: absolute;
  top: -3px;
  right: 3%;
  margin-top: 10px;
  padding: 0;
  border: none;
  background: transparent;
  color: #ccc;
  font-weight: 900;
  font-size: 1.4em;
  font-family: "Font Awesome 5 Free";
  cursor: pointer;
}
アイコンにFont Awesomeを用いているため、別途CSSを用意する必要があります。

ポイント

作成するにあたっていくつかのポイントがあります。

transform

メニュー・検索フォーム・サイドバーの出現にはtransformプロパティとtransitionプロパティを使用しています。

このような単調な動きならCSSのみで問題ありません（複雑な動作も可能です）。

一般兄弟結合子(~)

今回のレスポンシブメニュー作成で最も重要な一般兄弟結合子です。

一般兄弟結合子 (general sibling combinator, ~) は2つのセレクターを接続し、同じ親要素の子同士であって、1つ目の要素の後にある2つ目の要素を選択します（直後である必要はありません）。
MDN Web Docs 一般兄弟結合子より

この結合子を用いることによってチェックボックスが有効(チェックされた状態)な要素と兄弟関係にあるコンテンツに対してスタイル付与が行えるようになります。

<li class="sp-menu__item">
  <input type="checkbox" id="sp-menu__item-menu1" class="sp-menu__check">
  <label class="sp-menu__item--open" for="sp-menu__item-menu1">
    <span class="sp-menu__icon"><i class="fas fa-bars"></i></span>
    <span class="sp-menu__icon-txt">メニュー</span>
  </label>
  <label class="sp-menu__item--close" for="sp-menu__item-menu1"></label>
  <div class="sp-menu__contents sp-menu__contents-menu">
  <label class="sp-menu__contents--close" for="sp-menu__item-menu1"><i class="fas fa-times"></i></label>
  メニュー領域
  </div>      
</li>

#sp-menu__item-menu1:checked ~ .sp-menu__contents-menu {
  transform: translateX(0%);
}
#sp-menu__item-menu1:checked ~ .sp-menu__item--close {
  display: block;
}
モーダル背景をlabel要素で用意することによって、チェックを外し再びコンテンツを非表示にすることができます。

各ボタンにチェックボックスを仕込むことで起動する画面を制御し、モーダルバック(黒色背景)や×ボタンにはチェックボックスへのリンク(for属性記述)をしておくことで画面が閉じられるようになる仕組みです。

scroll-behavior

html {
  scroll-behavior: smooth;
}

scroll-behaviorはページ内リンクがあった場合のスクロール挙動を変更することができます。

2019年10月現在、あまり使われている傾向ではないですが今後注目すべきプロパティの1つです。
Can I use “scroll-behavior” ?

動作が不安定な場合はJavaScriptで記述することになります。

改良ポイント

今回はCSSのみで実装するというテーマだったのでJavaScriptは一切使用しませんでしたが、ワンポイント追加でUXを向上させることができます。

検索フォームに自動フォーカス

検索ボタンを押した時、自動でinputフォームにフォーカスが当たるように設定するとUXの向上に繋がります。

// jQueryを使用
$(function(){
  $('#sp-menu__item-search').on('change', function(){
    $('input[type="text"]').focus();
  });
});

まとめ

以上、CSSのみで実装するレスポンシブメニューの紹介でした。

CSSアニメーションや一般兄弟結合子はこれからよく使うことになると思うのでしっかり使いこなせるようになりたいですね！
最後まで読んでいただきありがとうございました！

日々、進化していく技術を私達と一緒に共有していきませんか？
職場で待っています！

この記事を書いた人
全力疾走熱中症

好きな言葉「休憩」, 全然できないこと「PHP」

全力疾走熱中症をフォローする

WEBの事でお悩みなら、まずは一度 I-SEED にご相談ください！

I-SEED は 「デザイン」「SEOマーケティング」「システム開発」を併せ持つWEB制作会社です。

コーポレート、オウンドメディア、ECなど様々な分野のサイト制作を得意としています。システム開発も自社で行っているので、様々なプロジェクトに柔軟かつ迅速に対応できるのが強みです。

大阪に良いWEB制作会社がいないとお困りの方は、是非一度 I-SEED までご相談ください。

I-SEED では随時採用も行っています。各種エンジニア、ディレクター、デザイナー、ライター、マーケターの全職種を募集しています。ご興味がある方は採用ページもご覧ください。

ブログページに戻る

制作を依頼する

CONTACT
US

06-4256-4057受付時間 平日10:00～18:00CONTACT