ドロップダウンメニューを作ろう

ドロップダウンメニュー(下図)を作ってみましょう。
ページの数が多いサイトなどでは、ドロップダウンメニューを使ってわかりやすくコーナーをまとめると便利です。

(ドロップダウンの例)

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

第1回 表示・非表示を切り替える

ドロップダウンメニューを実現するためには、メニュー項目の一部を表示させたり消したりする処理が必要です。 そこで、まずは「文字の表示・非表示を切り替える」方法をご紹介致します。

ドロップダウンメニューの構成は、実は次のようになっています。

まず、下図のようにHTML上ですべてのメニュー項目を用意しておきます。

そして、それらのメニューは普段は非表示にしておきます。

マウスが上に乗ったら、その項目に該当する部分のメニューだけを表示します。

そして、マウスがはずれたらまた非表示に戻します。

実際にはもう少し工夫が必要ですが、簡単に説明するとこれだけのことです。
ここでまず必要になる方法は、次の2点です。

  • 表示・非表示を指定する
  • マウスの動作に合わせて「表示・非表示」状態を変化させる

今回は、マウスの動きに合わせて、表示・非表示を切り替える方法をサンプルを使ってご紹介致します。

表示・非表示の指定方法

表示・非表示の状態を指定するには、スタイルシートを用います。 下記のように「visibility」プロパティの値によって、指定した要素を表示させたり消したりできます。

visibility: hidden; (消す)

visibility: visible; (見える)

例えば、次のように記述します。

<div style="visibility: hidden;">
この部分は表示されません。
</div>

visibillityプロパティの値に「 hidden 」を指定すると非表示になり、「 visible 」を指定すると表示されます。

これは非常に簡単ですね。
しかし、これだけでは何もできません。このvisibilityプロパティの値を動的に変化させなければなりません。

動的に切り替えるには?

visibillityプロパティは「表示する」か「表示しない」かを指定するだけのプロパティですので、 visibleを指定すればずっと表示されたまま、hiddenを指定すればずっと非表示のままです。 ですから、visibillityプロパティをただhiddenに指定しておくだけでは意味がありません。 そこで、JavaScriptを使って値を変化させます。

それでは、マウスの動きにあわせて表示・非表示を切り替えるスクリプトを書いてみましょう。