電検三種攻略ブログ

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

「グローバルナビのアコーディオンメニュー(ドロップダウンメニュー)作成方法」

calendar

reload

「グローバルナビのアコーディオンメニュー(ドロップダウンメニュー)作成方法」

以前にHTMLとCSSのみで簡易的なホームページの作成方法についてまとめました。

※全6回の最終回の記事はこちらになります。↓

 

その際、ヘッダー部のグローバルメニューは多層化していなかったので、今回はアコーディオンメニュー(ドロップダウンメニュー)を追加してみました。

今回もHTMLとCSSのみ追加記述で可能になります。

階層はシングルとなっていますが、仕組みさえ理解できれば後は応用でさらに多層化する事が可能です。

それでは以前に作成したホームページのファイルを加工したいと思います。

※使用するHTML,CSSファイルは冒頭の過去記事にあります。

スポンサーリンク

HTML

グローバルナビに子メニューを追加

以前作成したindex.htmlを加工します。

5つある項目すべてに子メニューを追加したいと思います。

子メニューはそれぞれ4つ追加します。(名前は全てサブメニューにしてます)

子メニューを追加するには、親の項目のタグ<li></li>内に記述します。

上記でいえば、homeが親の子メニューは4から9行目に記述しています。

つまり、孫メニューを追加するならば、子メニューの<li></li>タグ内に記述すれば良いということです。

HTMLは至って簡単ですね。これで終わりです。続いてCSSでスタイリングしていきます。

CSS

子メニューをスタイリングしアコーディオンメニューにする

1から22行目までは前回と同じ記述になります。

※10行目のposition: relative;だけ追加。

nav li ul クラスでposition: absolute;を記述し、子メニューの表示位置を固定させます。

z-index:9999は、メニュー表示時は最前列に出てくる記述になります。(画像やリンクの上に来る感じ)

26から35行目は、子メニューのサイズと配色の記述になります。

最後に、36から44行目が、アコーディオンメニュー(下ににゅっとでてくる)の記述になります。

完成はこちら(クリックで再生)↓

「グローバルナビのアコーディオンメニュー(ドロップダウンメニュー)作成方法」まとめ

簡易的な表示ならHTMLとCSSだけで十分アコーディオンメニューを表現できます。

記述もそこまでややこしくないので、慣れれば簡単だと思います。

次回はレスポンシブのサイドメニュー(スマホ版)をアコーディオン化したいと思います。