【ホームページ作成】第3回 簡単なドロップダウンメニューを作る

ドロップダウンメニューを作る方法

ドロップダウンメニューを実現するのに必要な方法を複数に分けて、1ステップずつご紹介しています。

• 第1回では、表示・非表示を切り替える方法
• 第2回では、自由に指定した場所（座標）に文字や画像を表示させる方法

をご紹介致しました。
第3回である今回は、第1回と第2回のテクニックをふまえて、最低限の機能を備えたドロップダウンメニューを作ってみます。

今回作るドロップダウンメニューは、以下のようなものです。実際に動くサンプルページにリンクしていますので、まずはサンプルを試してみて下さい。

ドロップダウンメニューのサンプル

「製品情報」や「会社案内」などのメニューにマウスを乗せると、ドロップダウンメニューが表示されます。

上記のサンプルは、開いたメニューが自動的には閉じなかったり、古いブラウザでは表示できなかったり、まだまだ改良の余地があるドロップダウンメニューです。 しかし、ドロップダウンメニューとして必要最低限の機能は実現できています。
今回は、このドロップダウンメニューの作り方をご紹介致します。

ドロップダウンメニューを作る [目次]

• a. HTMLを書く　… Page.2
• b. スタイルシートで装飾する　… Page.4
• c. JavaScriptでドロップダウンメニューを作る　… Page.7
• ドロップダウンメニュー完成　… Page.10

必要な要素を1つずつ解説していますので、最初から順番に閲覧されることをお勧めします。

それでは、ドロップダウンメニューを作る方法へ >>