【レスポンシブ対応】CSSのみでのドロップダウンメニューを作成 | 株式会社レクタス

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

2019年2月27日 HTML&CSS

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

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

なお,シンプルイズベストで,アニメーションはつけていない.
このサンプルソースを元に自分で工夫してください.
弊社ホームページは少しアニメーションを取り入れており,サンプルはそのメニューを抜粋した形にしているので,より参考になるはずです.

実現したいこと.

いろいろ調査してみると,CSSだけでのメニューは実現しているが,スマホ時にハンバーガー形式のメニューに変わるものがなかったり,その逆になっていたりとなかなか見つからなかった.
そこで,どなたでも利用できるように作成して,解説付きで公開する.

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

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

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

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

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

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

HTML は

          <ul class="menu">
            <li class="menu-parent">
              <a class="ib" href="/service/">サービス</a>
              <ul class="menu-child">
                <li class="menu-child-top"><a href="/service/hpconsult.html">ホームページ制作&コンサル</a></li>
                <li><a href="/service/hpaccesslog.html">アクセスログ解析</a></li>
                <li><a href="/service/hpmainte.html">ホームページメンテナンス</a></li>
...
              </ul>
            </li>
...
          </ul>

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

CSS は

.menu-parent .menu-child {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  margin-left: -40px;
  width: auto;
  box-sizing: border-box;
  padding: 0px 20px;
  background-color: #FFF;
  border: 1px solid #000;
}
@media screen and (min-width: 620px) {
  .menu-parent:hover .menu-child {
    visibility: visible;
    opacity: 1;
  }
}

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

最後に

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

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

デザイナーの方へ

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

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

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

 

Contact

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

 
Pagecontact
PageKnowHowBook
Pagetop