ホームページ作成/表示・非表示の切替 (HTML,CSS,JavaScript)

第3回 簡単なドロップダウンメニューを作る

最低限の機能を備えた簡単な「ドロップダウンメニュー」を作成してみましょう。スタイルシートでメニューバーをデザインし、HTMLに短いJavaScriptを書くだけで実現できます。

この記事の担当ガイド

Web作成が楽しくなるお手伝い。分かりやすい解説を探求するWeb職人

  • このエントリーをはてなブックマークに追加

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

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

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

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

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

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

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

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

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

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

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

更新日:2006年12月20日

あわせて読みたい

    この記事を読んで良かったですか?

    良かった

    12

    この記事を共有する