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

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

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

ヘルニアクソ野郎エンジニアblog

html/css「見出しと本文を入れてホームページを完成させよう！」

https://denkenmusic.com/html-css「見出しと本文を入れてホームページを完成さ

ホームページ制作第6回目、一応今回で最終となります。前回は共通フレームの作成まで実施しました。↓今回は、各ページのmain要素に見出しや本文を入れて、WEBサイトを完成させたいと思います。各ページのhtml５つ項目があるので、5ページの記述が必要ですが、今回はだいたい全てのページが同じような記述になりますので、代表して「index.html」のページだけ抜粋して説明します。index.html（home）

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

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

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

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

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

HTML

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

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

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

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

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

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

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

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

CSS

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

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

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

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

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

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

最後に、３６から４４行目が、アコーディオンメニュー（下ににゅっとでてくる）の記述になります。

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

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

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

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

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