【徹底解説】5歳でも分かる、ドロップダウンメニューの作り方

ABOUTこの記事をかいた人

フロントエンドエンジニア。

こんにちは。今回はモーダルウィンドウの作り方を徹底的に解説していきます。実はドロップダウンメニューはHTML/CSSのみで作れてしまうんです。

この記事は僕が書いている5歳でも分かるシリーズの1つです。こちらにスライドショーやタブメニューなどの作り方も載っていますのでぜひご覧ください。

5歳でも分かる、JavaScriptをどこまで学べば良いかの学習ロードマップ

2021年10月20日

作るものの確認

今回作るのは、このように各メニューにマウスオーバーをするとさらにメニュが展開されるドロップダウンメニューです。

コードは以下のものになりますので、何か困ったことが起きたらここのコードと見比べてみてください。(コピペでも使えます)

index.html
style.css

実装

準備

コードを書き始める前に、ディレクトリ構成の確認とリセットCSSの導入です。

├── index.html
├── resources
│   └── styles
│       ├── destyle.css
│       └── style.css
└── sample.html

上記の形でファイルを配置しましょう。stylesはルートディレクトリ直下でも良いですが、実際にはresourcesの中にimagesフォルダなどと一緒に入っている形が多いのでそのようにしました。またsample.htmlはメニューから遷移する用に一応用意しているだけのものなので、中身は適当で大丈夫です。

destyle.cssというのがリセットCSSで、詳細な説明は省きますが各種タグに初期で当たっている様々な余計なスタイルを打ち消してくれるものです。

今回はこちら(https://github.com/nicolas-cusan/destyle.css/blob/master/destyle.css)のものを利用します。こちらのコードをそのままコピーしてdestyle.cssとして上記の場所に配置します。

destyle.css

見た目を作る

それでは見た目を作っていきます。大枠のメニューと展開されるメニュー(サブメニュー)を順番に作ります。

.DropdownMenuのmarginは単に見やすい位置にメニューを配置したかっただけなのであまり気にしなくて大丈夫です。

また、フクロウセレクタという見慣れない記述がありますね。これは同様の要素が複数並んでいるときに「先頭の要素以外」を対象に指定できる書き方です。

続いてサブメニューを配置します。.Menu-Itemに対してそれぞれ同じものを追加します。

.Menu-Itemにposition: relative;を追加し、そこに対して.SubMenuをposition: absolute;を使って位置調整して配置します。

サブメニューは大抵の場合親のメニューの下にコンテンツが配置されていてもその上に重なるように表示される場合が多いためこのような実装をしています。

この段階では一旦全てのサブメニューが表示されているかと思います。

初期状態は非表示なので、その記述をしましょう。

これで非表示になります。

動きをつける

それでは、マウスオーバー時にメニューが表示されるようにしましょう。以下の記述を追加します。

「マウスオーバーした時」は:hoverという擬似クラスを使って表現することができます。この擬似クラスがついているセレクタのプロパティは、マウスオーバーした時のみ適用されます。

よって上記の記述は「.Menu-Itemがマウスオーバーされた時、.SubMenuを表示する」という意味になります。

これでドロップダウンメニューの最低限の動きが出来ました。

アニメーションをつける

最後にアニメーションをつけていきましょう。サブメニュー出現時にふわっと下がりながら表示をします。

このように追記することで、hover時にtransitionが適用されふわっと下がるように動きます。hoverした時の方にtransitionを設定することで、hoverが解除されると共にtransitionが外れ、パッと戻ります。

戻りでもアニメーションさせたい時は.SubMenuの方にtransitionを追加しましょう。

細かい点ですが、この状態では親メニューの上に重なった状態でアニメーションしています。下から出てきた方が良いので、ラベル部分が上に重なるように変更します。

これでドロップダウンメニューの完成です!

まとめ

ということでモーダルウィンドウの作り方をなるべく細かく解説しました。

他にもいろんなパーツの解説をしていますので、ぜひご覧ください。

5歳でも分かる、JavaScriptをどこまで学べば良いかの学習ロードマップ

2021年10月20日

【徹底解説】5歳でも分かる、ハンバーガーメニューの作り方(jQuery編)

2021年10月20日

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください