メニューセレクターを設置しよう
JavaScript
はじめに
フレームの上のプルダウン（ドロップダウン）リストボックスの一覧から好きな項目を選ぶと、下のフレームに該当するページを表示させている動的な技は、JavaScriptを使います。
メニューセレクターの方法は結構フォーラムでは何度か「どうするの？」という質問がありましたので、こちらで改めてご紹介させていただきます。
フレームページでメニューを選択するとメインフレームにリンクするには？
まず、フレームページということで、それぞれのフレームには名前がついています。
| name=header |
| name=main |
上のメニューフレームの名前はheader、
下のメインフレームの名前はmain
としています。
value値が空白の場合は無反応となるように設定しています。
下のメインフレームの名前はmain
としています。
value値が空白の場合は無反応となるように設定しています。
■<head>と</head>の間に以下のスクリプトを記述
<script language="JavaScript"><!--
function LinkSelect(form, sel){
adrs = sel.options[sel.selectedIndex].value;
if (adrs != "") top.main.location.href=adrs;
}
//-->
</script>
■<body>タグ以下の任意の位置に以下の記述を追加（初心者のためのパソコン講座より抜粋）
value値には、リンク先のページへのパスを指定します（value="リンク先へのパス")
value値には、リンク先のページへのパスを指定します（value="リンク先へのパス")
<form> <SELECT NAME="selLink" onChange="LinkSelect(this.form, this)" size=1> <option value="main.htm">---TOP---</option> <option value="">├★★★Windows/パソコン★★★ <option value="./win01.htm">│├Windowsの画面について <option value="./win02.htm">│├ハードウエアとソフトウエアのちがい <option value="./win03.htm">│├CPU・メモリ・ハードディスクのちがい <option value="../bbs/">└ワニchanのforum </SELECT> </form>
[Go!]ボタンを押してリンク先を変化させる方法は次の通りです。
■<head>と</head>の間に以下のスクリプトを記述
<SCRIPT LANGUAGE="JavaScript">
<!--
function GoLink(){
alink=document.LINK.selLink;
adrs=alink.options[alink.selectedIndex].value;
if (adrs != "") top.main.location.href=adrs;
}
//-->
</SCRIPT>
■<body>タグ以下の任意の位置に以下の記述を追加
value値には、リンク先のページへのパスを指定します（value="リンク先へのパス")
value値には、リンク先のページへのパスを指定します（value="リンク先へのパス")
<FORM method="post" name="LINK"> <select name="selLink"> <option selected value="">★ メニュー ★</OPTION> <option value="./">HOME <option value="update.htm">UPDATE <option value="profile.htm">PROFILE <option value="link.htm">LINK </select> <INPUT type="button" value="GO!" onClick="GoLink()"> </FORM>
フレームを使わずに、メニューを選択するとそのページへリンクするには？
フレームを使いたくない場合は以下の方法もあります。
こちらのほうが簡単かもしれません(^_^;)
リンク先の表示させたいウィンドウは親フレーム「parent」で結構です。
こちらもvalue値が空白(value="")の場合は無反応となります。
<script language="JavaScript">
<!--
function LinkSelect(form, sel)
{
adrs = sel.options[sel.selectedIndex].value;
if (adrs != "") parent.location.href=adrs;
}
// -->
</script>
■<body>タグ以下の任意の位置に以下の記述を追加
value値には、リンク先のページへのパスを指定します（value="リンク先へのパス")
<form method="post" name="LINK"> <select name="selLink" onchange="LinkSelect(this.form, this)" size="1"> <option value="./">HOME <option value="update.htm">UPDATE <option value="profile.htm">PROFILE <option value="link.htm">LINK </select> </form>
[Go!]ボタンを押してリンク先を変化させる方法は次の通りです。
■<head>と</head>の間に以下のスクリプトを記述<SCRIPT LANGUAGE="JavaScript"> <!-- function GoLink(){ alink=document.LINK.selLink; adrs=alink.options[alink.selectedIndex].value; if (adrs != "") parent.location.href=adrs; } //--> </SCRIPT>
■<body>タグ以下の任意の位置に以下の記述を追加
value値には、リンク先のページへのパスを指定します（value="リンク先へのパス")
<FORM method="post" name="LINK"> <select name="selLink"> <OPTION selected value="">★ メニュー ★</OPTION> <option value="./">HOME <option value="update.htm">UPDATE <option value="profile.htm">PROFILE <option value="link.htm">LINK </select> <INPUT type="button" value="GO!" onClick="GoLink()"> </FORM>
INDEX