CSSだけでアコーディオン×ハンバーガーメニューを作る
スマホ画面はヘッダーが小さくなり
押しにくいボタンになることが多いです。
そこでハンバーガーメニュー×アコーディオンを
使用してユーザー操作をしやすくしてあげましょう
ちなみにハンバーガーメニューとは以下のようなものです。
ハンバーガーのような見た目のアイコンを
押すと画面外からニュルッとメニューが出てきます。
JSなどを使用してリッチに作ることも可能ですが
ここではCSSのみで実装します。
アコーディオンは以下の動作です。
ここでは＋ボタンを押すことで親要素が広がって子要素が出てきます。
では実際のコードを見てみましょう
index.html
<divclass="humb-menu"><inputid="gnav-input"type="checkbox"><labelfor="gnav-input"id="gnav-btn"><diviclass="fas fa-bars"></div></label><divid="gnav-content"><!-- タイトルを記載ください --><divclass="humb-menu__title">title</div><labelfor="label1"><!-- 親要素の名前 --><p>label</p><p>＋</p></label><inputtype="checkbox"id="label1"class="cssacc"/><divclass="accshow"><!-- 子要素の名前 --><p>content</p><p>content</p><p>content</p><p>content</p></div><labelfor="label2"><p>label</p><p>＋</p></label><inputtype="checkbox"id="label2"class="cssacc"/><divclass="accshow"><p>content</p><p>content</p><p>content</p><p>content</p></div><labelfor="label3"><p>label</p><p>＋</p></label><inputtype="checkbox"id="label3"class="cssacc"/><divclass="accshow"><p>content</p><p>content</p><p>content</p><p>content</p></div></div></div>labelが親要素となりcontent部分が子要素となります。
必要に応じてpタグをaタグに変更してリンクなどにして使用ください。
ハンバーガーボタン部分はfontawsomeを使用しています。
index.css
#gnav-btn{color:gray;padding:10px;font-size:30px;position:fixed;top:10px;right:10px;z-index:100;background-color:white;border:solid1px#d1caca;border-radius:3px;}#gnav-input:checked~#gnav-content{top:0;}#gnav-content{position:fixed;top:-100%;left:0;z-index:10;transition:0.3s;width:100%;}.humb-menu__title{padding:1.5rem;}.humb-menulabel{display:flex;justify-content:space-between;padding:1.5rem;cursor:pointer;border-top:0.5pxsolid#c7c5c5;}.humb-menuinput{display:none;}.humb-menu.accshow{height:0;overflow:hidden;}.humb-menu.accshowp{padding:1.5rem;}.humb-menu.cssacc:checked+.accshow{height:auto;}}コードの記述量をへらすため必要最小限の記載にしています。
必要に応じて装飾を加えてください。
動作としてはhtmlで非表示のチェックボックスを設置し
チェックの有無で動作するシンプルな内容です。
コピペすると以下の動作になります。