TOP > Resources > CSS & JavaScript Tips > JavaScript > メニューセレクターを設置しよう

メニューセレクターを設置しよう

Google Bookmarks に追加 Check Yahoo!ブックマークに登録 このページをはてなブックマークに追加

はじめに

フレームの上のプルダウン（ドロップダウン）リストボックスの一覧から好きな項目を選ぶと、下のフレームに該当するページを表示させている動的な技は、JavaScriptを使います。

メニューセレクターの方法は結構フォーラムでは何度か「どうするの？」という質問がありましたので、こちらで改めてご紹介させていただきます。

フレームページでメニューを選択するとメインフレームにリンクするには？

まず、フレームページということで、それぞれのフレームには名前がついています。

name=header
name=main

上のメニューフレームの名前はheader、
下のメインフレームの名前は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="リンク先へのパス")

<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="リンク先へのパス")

<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>

▲Page TOP

フレームを使わずに、メニューを選択するとそのページへリンクするには？

フレームを使いたくない場合は以下の方法もあります。
こちらのほうが簡単かもしれません(^_^;)
リンク先の表示させたいウィンドウは親フレーム「parent」で結構です。
こちらもvalue値が空白(value="")の場合は無反応となります。

■<head>と</head>の間に以下のスクリプトを記述

<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>

▲Page TOP

INDEX

▲このページのトップへ