ホームページ作成/フォームの活用・装飾 (HTML,CSS,JavaScript)

極短JavaScriptでプルダウンメニューを作る(2ページ目)

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

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

ページ移動用のJavaScriptは…

先ほどのソース中で、ページ移動用のJavaScriptに当たる部分は、以下の「location.href=value;」の部分です。

<select onChange="location.href=value;">

2行目にあるselect要素のonChange属性の値がJavaScriptです。
記述量は、わずか20文字。
たったこれだけで、プルダウンメニューのページ移動機能が実現できます。

たったこれだけで移動できる説明

わずか20文字の記述で、ページ移動機能が作れるのはちょっと驚きませんか?
なぜこれだけで移動できるのかを、簡単に説明します。

■location.href

「 location.href 」(locationオブジェクトのhrefプロパティ)には、現在アクセスしてるページ(URL)が保持されています。 試しにこの値をJavaScriptで表示させてみると、現在のURLが格納されていることがわかります。

下のボタンは、「 alert( location.href ); 」というJavaScriptを実行します。これは、location.hrefの値をダイアログに表示するものです。 このボタンをクリックすれば、現在のURLが表示されるはずです。

この「location.href」に別のURLを代入すれば、(ブラウザの表示を)そのURLに移動させることができます。

■value

「location.href」に代入する内容として、ここでは「value」とだけしか記述していません。

JavaScriptの関数を別途用意する場合だと、ただ「value」とだけ記述しても(何のvalueなのかが分からないため)使えません。 document.formname.elements['selectname'].options[num].value …のような感じで、「何の」valueを参照したいのかを記述する必要があります。
※ページ移動用スクリプトを関数にする場合は、value(URL)を引数で受け取るようにするのが楽でしょう。

しかし、ここではプルダウンメニューを作っているHTML(select要素)の中でJavaScriptを記述しているので、 ただ「value」と書くだけで、選択されているメニュー項目(option要素)のvalue属性の値を示すことができます。

■location.href = value;

「 = 」記号は、JavaScriptでは「代入」の意味です。右辺の値を左辺に代入します。 つまり、「 location.href = value; 」は、「 value を location.href に代入する 」という意味です。

このようにして、わずか20文字でプルダウンメニューのページ移動機能が実現できるわけです。

さて、最後に、プルダウンメニューのメニュー項目に背景色や文字色を付けて装飾してみましょう。

プルダウンメニューの装飾方法の説明へ >>

  • 前のページへ
  • 1
  • 2
  • 3
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます