プルダウンメニュー（フォーム）の作成

>>ホームページの作り方TOP　>>プルダウンメニュー（フォーム使用）の作成

■プルダウンメニュー（フォーム使用）の作成

作成の説明のために、簡単な原本を作成しました。当講座ではこの原本を用いて説明していきます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN">
<html lang="ja">
<head>
<title>Wakabagari(若葉狩り)</title>
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis">
<meta http-equiv="description" content="初心者が作るページです。">
<meta http-equiv="keywords" content="wakabagari,若葉狩り">
<style type="text/css">

</style>
</head>
<body>
<p class="head"><img src="sho.jpg"></p>
<p class="menu">
<a href="">HOME</a>
<a href="">SAMPLE1</a>
<a href="">SAMPLE2</a>
<a href="">SAMPLE3</a>
<a href="">SAMPLE4</a>
</p>
</body>
</html>

原本はこちら→サンプル

まずはフォームを作成します。フォームのタグは以下のとおり。

<form name="menu">
<select name="submenu">
<option value="aaa.html">MENU</option>
<option value="bbb.html">SAMPLE1</option>
<option value="ccc.html">SAMPLE2</option>
<option value="ddd.html">SAMPLE3</option>
<option value="eee.html">SAMPLE4</option>
</select>
</form>

tableと同じような扱いだと考えてください。

nameというのは、classと同じようなもんでしょう。cssででなくjavascriptで使うためだと思われます。

selectはそのまま、optionはフォーム内のメニューを示すのでしょう。

問題はvalueの意味ですが、スクリプト内で汎用できる変数だと思われます。

</select>
<input type="button" value="開く" onClick="jump()">
</form>

input type="button"はボタンを表示するタグ、input type="text"はテキストを表示するタグです。

valueはシカトしてと・・・onClick=""は、クリックしたら何をするか、ここでは任意のjavascriptである"jump()"を実行するということです。

"jump()"の部分は名前変更可能ですが、open()にするとなぜかバグります・・・。

ここでは/selectと/formの間におきます。

とりあえず、こうなります。→サンプル

次に命令open()の内容をjavascriptを使い記述します。そのため、新しく拡張子jsのファイルを作り、HTML内のhead内に以下の記述を追加します。

続いて、新しく作ったjavascriptファイルに、以下の命令を記述します。

function jump() {
　　　　aaa=document.menu.submenu.selectedindex;
　　　　}

functionはスクリプトに名前をつけ、そのスクリプト＝"～()"で定義された命令を実行するタグです。

上の例で言うとjump()という命令を実行するという意味になります。

その下の記述は、一言で言えば「documentの中のmenuの中のsubmenuのselectedindexをaaaという変数に代入せよ」ということです。

selectedindexはフォームの選択メニューで選択された項目の番号を上から0,1,2,3・・のように取得するタグです。上の例で言えば、MENUが0、SAMPLE1が1です。

今の状態は、SAMPLE1を選択していたとしたなら1という数値がaaaに代入されている状態です。ここで、「1という数値がURLであればリンクできるのに・・・」と思うはず。

そこで、次は1という数字と最初にvalueで定義したindex.htmlを関連付けます。

function jump() {
　　　　aaa=document.menu.submenu.selectedindex;
　　　　bbb=document.menu.submenu.options[aaa].value;
　　　　}

前のように一言で言えば、「documentの中のmenuの中のsubmenuのoption[番号]に対応するvalue(～.html)の値を返し、それをbbbに代入せよ」ということです。

option[番号]でオプションの番号を指定することができます。よって、この命令により最初に代入された数値をURLへと変える事ができます。

最後に、取得したURLのページを開くため、以下の記述を追加します。

function jump() {
　　　　aaa=document.menu
　　　　　　　　　　　　.submenu.selectedIndex;
　　　　bbb=document.menu.submenu
　　　　　　　　　　　　.options[aaa].value;
　　　　window.location.href=bbb;
　　　　}

functionについての付け足しですが、ここでいうjump()の()の中には変数名、もしくは変数値が入ります。

かりに、function jump(bbb)とjump("index.html")が記述されているとしたら、ジャンプするページがindex.htmlになります（これは説明しづらい・・・）。

これで指定したURLのページをwindowに表示させることができます。開いてほしくないページがある場合は、以下のように記述します。

他のプログラミングでよく使われるif関数ですね。書き方は他のと同じですので問題ないでしょう。

次にこのフォームを移動します。divでくくってpositionで移動すりゃすぐですね。

/////////////////////////HTML/////////////////
<div id="form">
<form name="menu">
<select name="submenu">
<option value="aaa.html">MENU</option>
<option value="bbb.html">SAMPLE1</option>
<option value="ccc.html">SAMPLE2</option>
<option value="ddd.html">SAMPLE3</option>
<option value="eee.html">SAMPLE4</option>
</select>
<input type="button" value="開く" onClick="jump()">
</form>
</div>
/////////////////////////CSS//////////////////
#form {
　　　　position:absolute;
　　　　left:850px;
　　　　top:40px;
　　　　}

するとこうなります。→サンプル

ホームページの作り方（HP作成法）を解説

STEP1

STEP2

STEP3

STEP4

STEP5

STEP6

STEP7

■プルダウンメニュー（フォーム使用）の作成