ドロップダウンメニューを作ろう
掲載日： 2006年 12月 20日
第3回 簡単なドロップダウンメニューを作る
ドロップダウンメニューを作る方法
ドロップダウンメニューを実現するのに必要な方法を複数に分けて、1ステップずつご紹介しています。
をご紹介致しました。
第3回である今回は、第1回と第2回のテクニックをふまえて、最低限の機能を備えたドロップダウンメニューを作ってみます。
今回作るドロップダウンメニューは、以下のようなものです。実際に動くサンプルページにリンクしていますので、まずはサンプルを試してみて下さい。
「製品情報」や「会社案内」などのメニューにマウスを乗せると、ドロップダウンメニューが表示されます。
上記のサンプルは、開いたメニューが自動的には閉じなかったり、古いブラウザでは表示できなかったり、まだまだ改良の余地があるドロップダウンメニューです。
しかし、ドロップダウンメニューとして必要最低限の機能は実現できています。
今回は、このドロップダウンメニューの作り方をご紹介致します。
ドロップダウンメニューを作る [目次]
- a. HTMLを書く … Page.2
- b. スタイルシートで装飾する … Page.4
- c. JavaScriptでドロップダウンメニューを作る … Page.7
- ドロップダウンメニュー完成 … Page.10
必要な要素を1つずつ解説していますので、最初から順番に閲覧されることをお勧めします。
