ホームページ作成

【ホームページ作成】極短JavaScriptでプルダウンメニューを作る

フォームの活用・装飾 (HTML,CSS,JavaScript)

更新日：2007年03月16日

極短JavaScriptでプルダウンメニューを作る

西村文宏

狭いスペースに様々なページへのリンクを凝縮できる「プルダウンメニュー」を作ってみましょう。簡単なJavaScriptを使いますが、スクリプトはHTML内にわずか20文字です！

プルダウンメニューを装飾する

プルダウンメニューのメニュー項目は、スタイルシートを使えば装飾することができます。項目の種類に応じて色分けすると、見やすいメニュー項目にできるでしょう。

メニュー項目を装飾するには、メニュー項目を作っているoption要素に対してスタイルを適用するだけです。
たとえば、以下のように記述すれば…

option {

   background-color: #ffffcc;

   color: red;

}

すべてのメニュー項目の文字色が赤色になり、背景色が淡い黄色(#ffffcc)になります。

たいていは、メニュー項目の種類ごとに色分けをしたり、奇数行・偶数行で色分けをして見やすくするなどの装飾を行うでしょう。色分けするには、以下のように記述します。

■classを使って装飾を分ける

項目ごとに色を変えたい場合は、適当なクラス名を付加して使い分けるのが良いでしょう。

option.reditem {

   background-color: #ffffcc;

   color: red;

}

option.blueitem {

   background-color: #ccffcc;

   color: blue;

}

上記のスタイルシートでは、「背景が淡い黄色で文字色が赤色」のreditemクラスと、「背景が淡い緑色で文字色が青色」のblueitemクラスを用意しています。
この場合、以下のような感じでHTMLのoption要素を記述することで、メニュー項目を2色に色分けできます。

<option value="(URL)" class="reditem">赤色メニュー項目</option>

<option value="(URL)" class="blueitem">青色メニュー項目</option>

■直接HTML中にスタイルを記述して装飾する

プルダウンメニューが1つしかなく、スタイルシートを別途記述するのが面倒なら、以下のように、HTML中にstyle属性を使って直接装飾を記述することもできます。

<option value="(URL)" style="color:red; background-color:#ffffcc;">メニュー項目名</option>

この方法だと、1項目ずつスタイルを記述しなければならないので、同じ装飾の項目が多い場合には非効率的です。しかし、項目数が少ない場合は、この方法でも問題はないでしょう。

おわりに

今回は、わずか1行（20文字）のJavaScriptで、ページ移動ができるプルダウンメニューを作る方法をご紹介致しました。ぜひ、活用してみて下さい。

【関連記事】

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

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