レスポンシブ対応CSSのみでのメニューを作成

2019年2月27日 HTML&CSS

弊社のホームページはドロップダウンメニューを採用している.
当初は drawer.js を使用して作成されていた.
CSS だけで実現したいと思い,デザインはそのままにスクリプトを書き替えることにした.
なお,シンプルイズベストで,アニメーションはつけていない.
このサンプルソースを元に自分で工夫してください.
弊社ホームページは少しアニメーションを取り入れており,サンプルはそのメニューを抜粋した形にしているので,より参考になるはずです.

実現したいこと.

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

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

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

ポイントの解説

トグルになっている場所はチェックボックスで実現

スマホ時のハンバーガーボタンやドロップダウンで子カテゴリを表示する部分はトグルなので,チェックボックスで実現する.

HTML は

awesome を使用しているが,fas は font 指定のためのもの.
angletoggle は (下矢印)のマーク
クリックするとサブメニューが表示されて,
(上矢印)のマーク
に代わる.

チェックボックスは display: none で非表示にして,label を使うことにより押す領域を設けている.

CSS は

checkbox の input で指定することにより,最上部メニューの id 毎に個別で適用しなくてよくなっている.

ハンバーガーメニューをスクロール可能にする

子メニューが表示されている時には縦方向のスクロールバーを表示して,縦を 100% にする必要がある.

だけではメニューの固定しかされない.

PageKnowHowBook
Pagetop