【レスポンシブ対応】CSSのみでの多階層ドロップダウンメニューを作成

最終更新日: 公開日: 2019年02月

javascript無しでナビゲーションメニューを作る

弊社のホームページはナビゲーションメニューとしてドロップダウンメニューを採用している.
当初は drawer.js を使用して作成されていた.

しかし,このレスポンシブメニューを CSS だけで実現したいと思い,デザインはそのままにスクリプトを書き替えることにした.
つまり,javascript や jQuery は使わないでスタイルシートのみでパソコン,スマホ両方に対応する,つまりレスポンシブ対応のナビメニューを実現した.

このメニューはスクロールしても上部に固定された状態になるので,どこまでスクロールしたとしても,いつでもメニューを呼び出すことが出来る.

なお,実装はシンプルイズベストで,アニメーションはつけていない.
このサンプルコード(ソース)を元に自分で工夫してください.
弊社ホームページは少しアニメーションを取り入れており,サンプルはそのメニューを抜粋した形にしているので,より参考になるはずです.(これは下の旧バージョンの方です.今の弊社ホームページは多階層になっていません.)

実現したいこと.

  • スマホとパソコン(PC)で HTML は同一のものを使う
  • javascript は使わずに HTML と CSS だけで動作させる
  • ライブラリは使わないで,可能な限りシンプルに短いスクリプトにする.
  • 多段階の階層メニューに対応(2020/03/24対応)

CSSだけで実現する多階層レスポンシブ対応ドロップダウンメニューの例

いろいろ調査してみると,CSSだけでのメニューは実現しているが,スマホ時にハンバーガー形式のメニューに変わるものがなかったり,その逆になっていたりとなかなか見つからなかった.
多階層メニューに関しても横幅が固定のものは見つかったが,横幅が可変のものは現時点でなかなか見つからないようだ.(2020/03/26 追記)
そこで,どなたでも利用できるように作成して,解説付きで公開する.

パソコンでの表示では横並びのメニューにマウスを合わせるとドロップダウンメニューが現れ,スマホでの表示では縦並びのメニューをクリックすると下にメニューが展開されるイメージとなる.

このページではドロップダウンメニュー部分に関して説明をする.
ハンバーガーメニューの作り方の解説はリンク先を参照してください.

ドロップダウンでも第二階層が非常に多い場合はメガメニューを使うこともあると思います.
メガメニューの作り方の解説はリンク先を参照してください.

サンプルページ

CSSのみでパソコン(PC)時にはドロップダウンメニューで表示され,スマホ(SP)時にはハンバーガーメニューで表示されるメニューを実現する方法のサンプルページ
上記リンクを右クリックして,「ファイルを保存」するとソースが保存される.
普通に左クリックすればサンプルページ(デモ画面)を見ることが出来ます.

スタイルシート
nav2.css
こちらも同様にリンクを右クリックして「ファイルを保存」する.

旧バージョンのファイル index.html nav.css 多段が不要な場合はこちらでもOK.

ドロップダウンメニューのポイントの解説

メニューの骨格は箇条書き(ul)で記述

箇条書きにすれば入れ子になったメニューは簡単に表現できる.

HTML は

<ul id="menu">
  <li>
    <a class="ib" href="/service/">サービス</a>
    <input type="checkbox" id="menu-parent01"/>
    <label for="menu-parent01">
      <span class="pd"><i class="fas angletoggle"></i></span>
    </label>
    <ul>
      <li>
        <a href="/service/hpconsult.html">ホームページ制作&コンサル</a>
        <input type="checkbox" id="menu-0101"/>
        <label for="menu-0101">
          <span class="pd"><i class="fas angletoggle"></i></span>
        </label>
        <ul>
          <li><a href="/service/hpstudy.html">ホームページ勉強会</a>
            <input type="checkbox" id="menu-010101"/>
            <label for="menu-010101">
              <span class="pd"><i class="fas angletoggle"></i></span>
            </label>
            <ul>
              <li><a href="/archives/1708">web マーケティング改善セミナー</a></li>
            </ul>
          </li>
          <li><a href="/service/hpmainte.html">ホームページメンテナンス</a></li>
        </ul>
      </li>
    </ul>
    ...
  </li>
  ...
</ul>

主にスマホ用のハンバーガーメニューの実装に関係するところは削除して,ドロップダウンメニューに関係するところだけ抜粋している.

このバージョンでは,旧バージョンと違って display を使っている.なぜ visibility を使わないかというと多段になった時にマウスの位置が隣のドロップメニューの位置にずれた場合に切り替わってしまうから.

#menu li ul li {
  font-size: 14px;
  display: none;
  box-sizing: border-box;
  padding: 0px 20px;
  background-color: #FFF;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 1px solid #DDD;
}
@media screen and (min-width: 620px) {
  #menu > li:hover > ul > li,
  #menu li ul li:hover > ul > li {
    display: block;
  }
}

ドロップダウンメニュー部分は初期状態で none にしておき,親メニューの該当場所に上にある (hover) 状態で block に代えることによって表示されるようにしている.
パソコンとスマホの切り替えのブレイクポイントは横幅 620px としているが,変更したい場合はここを変えればよい.

下階層のメニューを左右どちらに出すか

多段にした場合に下に階層がある場合に三角が表示されるようにしている.
サンプルでは三番目のメニューから右は下階層のメニューが左側に表示されるようにしている.(nth-child)
また,#menu li ul li ul li ul は三階層目から下は全て左側に表示されるようにするためである.

#menu li ul li ul {
  top: -1px;
  left: 100%;
}
#menu li ul li ul li ul,
#menu li:nth-child(n+3) ul li ul {
  left: inherit;
  right: 100%;
}
@media screen and (min-width: 620px) {
  /* 階層がある場合の誘導の印 */
  #menu li ul li ul:before,
  #menu li ul li ul li ul:before,
  #menu li:nth-child(n+3) ul li ul:before {
    position: absolute;
    top: 28px;
    content: "";
    border: 5px solid transparent;
    display: block;
  }
  /* 通常タイプ */
  #menu li ul li ul:before {
    left: -10px;
    border-left-color: #666;
  }
  /* 右側タイプ */
  #menu li ul li ul li ul:before,
  #menu li:nth-child(n+3) ul li ul:before {
    right: -10px;
    border-right-color: #666;
  }
}

少し複雑だが CSS のみで多段階層のメニューを実現した.
現在のところ,IE11 まで対応しているので,ほとんどのブラウザで動作する.
不具合があるようでしたらご連絡ください.

おまけ

ここまでお読みいただきありがとうございました.最後にお知らせです.
皆さまのおかげでこのページは非常にアクセスの多いページとなっております.

このページをご覧になる方は javascript(jQueryなど) を使って作れるメニューを css だけで制作し洗練されたものにしようとされている方のはずです.

デザイナーの方へ

弊社では独自のログ解析を提供し,アクセスアップ,問い合わせアップのアドバイスをしています.実績も十分にあるのですが,HTMLを理解することとは別の思考が必要なので使いこなすのが難しいツールとなっています.そこでデザイナーの方に理解していただき,お客様のホームページの集客に役立てていただくツールとして使っていただけないかと考えています.つまり,一緒に様々な問題を解決して共にスキルアップの出来るパートナー(代理店)を募集しております.ご興味のある方はフォームからその旨ご連絡ください.

自社のホームページを作成している方へ

メニューを洗練されたものにした後はアクセス数アップを目指してみませんか?出版している書籍に方法論は掲載していますが,頭では理解できても実践するのが難しいようです.そのため,弊社では毎月,勉強会も開催しています.よろしければフォームからご相談ください.

参考サイト

CSSだけで作る「多階層」なドロップダウンメニュー
は大変参考になりました.ありがとうございます.
改造のポイントは

の辺りです.

関連ページ

 

Contact

ご質問等ありましたら,下のフォームからお願いします.

 
   
contact
Pagetop