ホームページ作成

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

表示・非表示の切替 (HTML,CSS,JavaScript)

更新日：2006年12月20日

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

西村文宏

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

c. JavaScriptでドロップダウンメニューを作る

いよいよ本題のドロップダウンメニューの作成です。
JavaScriptでドロップダウンメニューを作るには、以下のステップが必要です。

スタイルシートを使って、すべてのサブメニューを「非表示」にする
メニューバー上にマウスが乗ったらサブメニューを「表示」するJavaScriptを書く
メニュー項目からマウスが外れたらサブメニューを「非表示」にするJavaScriptを書く

■すべてのサブメニューを「非表示」にする

JavaScriptを使ってサブメニューの「表示／非表示」を切り替えるわけですが、最初の状態は「非表示」にしておく必要があります。
ですから、スタイルシートを使って、サブメニューを非表示に設定しておきます。

/* ▼個別の装飾 */

div#subMenu01 { visibility: hidden; }

div#subMenu02 { visibility: hidden; }

div#subMenu03 { visibility: hidden; }

div#subMenu04 { visibility: hidden; }

visibilityプロパティは、表示状態を設定するプロパティです。値に「hidden」を指定すると非表示にすることができます。（非表示から表示に切り替える処理はJavaScriptで行うので、スタイルシートではすべてを非表示にしておきます。）

上記のスタイルを適用すると、サブメニューはすべて消えるので、以下のようにメニューバーだけが表示されるようになります。

サブメニューが消えて、メニューバーだけになる。

それでは、「ドロップダウンメニュー」を実現するJavaScriptを記述していきましょう。

JavaScriptで非表示・表示を切り替えるよう記述する >>

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！