電検三種攻略ブログ

電検三種とオススメ音楽。ためになる家電の知識をお届けします。

「サイドナビゲーションのアコーディオンメニュー(ドロップダウンメニュー)作成方法」

calendar

reload

「サイドナビゲーションのアコーディオンメニュー(ドロップダウンメニュー)作成方法」

前回はヘッダー部のグローバルメニューのアコーディオンメニュー(ドロップダウン式)を作成しましたので、続いてサイドメニューのナビゲーションをアコーディオン化したいと思います。

前回に引き続き、HTMLとCSSのみの記述で作成します。

※ヘッダー部のアコーディオンメニューはこちらでまとめています。↓

 

それでは前回のHTML、CSSファイルに追加記述して作成したいと思います。

スポンサーリンク

HTML

<label>タグと<input>タグを使用する

<div id=”nav-content”>直下の記述をごっそり入れ替えます。

というのも、ブロック要素でのアコーディオン化はインライン要素のアコーディオンメニューにくらべて複雑になります。

ポイントは<label>タグと<input>タグになります。

<lavel>はテキストボックスと項目を結びつける要素で、<input>テキストボックスなどの要素になります。

あとは各項目と子要素に個別のIDを振り分けておきます。

CSSでスタイリングすることにより、ブロック要素にて項目別でのアコーディオン表示が可能となります。

CSS

アコーディオンメニューにスタイリング

CSSのレスポンシブ記述部(一番下部)に追加で記述します。

上部の記述はメニューのスタイリングになります。

一番下の記述が、項目ごとのアコーディオンメニューを表示させる記述になるので、項目が増えれば、IDを変え追加すればOKです。

完成はこんな感じになります。クリックで再生します。↓

 

「サイドナビゲーションのアコーディオンメニュー(ドロップダウンメニュー)作成方法」まとめ

ナビゲーションはシングルであればかなり簡単な記述になるので、なにも見なくても記述できますが、多階層になってくると少々やっかいです。なれるには時間がかかりますよね。

ググればたくさんサンプルはあるので、そこを参考に覚えていくしかありません。

とりあえずコピペして、動作を見ながら一つづつ記述の挙動を確認していくのがいいですね。

ちなみに、jQueryを用いたドロップダウンメニューの作成方々もまとめていますので、是非参考にして下さい。↓