WEST MiRa JavaScript：サンプル集(257種類) - フォーム - ポップアップメニュー　フレーム版 Ver7（複数のポップアップメニューを設置）

[ JavaScriptの目次 ]

▲トップページ
▲基礎知識
▲基本操作
▲その他
▲サンプル集(257種類)
▲その他

[ 他の一覧 ]

◆↑ホームへ

■ JavaScript - サンプル集(257種類) - フォーム
　　 - ポップアップメニュー　フレーム版 Ver7（複数のポップアップメニューを設置）

All About ［儲かるWebプロデュース］

ポップアップメニューから項目を選んでボタンをクリックすると、ジャンプするスクリプトです。
このバージョンでは、複数のポップアップメニューを設置する事が出来ます。

下のサンプルをクリックしますと、新しいウィンドゥが開いて動作を確認できます。サンプルでは2つのポップアップメニューを設置しています。

・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」or「リンクを名前を付けて保存」して下さい。）
・ソースを見る
・解説を見る

[ ソース ]


<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<script language="JavaScript" type="text/javascript">
<!--//Copyright (C) WEST MiRa http://www.west-mira.jp

	function jump2(doko)
		{
		my_url=document.forms[doko].sele1.selectedIndex;
		my_url=document.forms[doko].sele1.options[my_url].value;
		parent.myframe2.location.href=my_url;
		}

//-->
</script>

</head>

<body>

<form name="form1">
  <select name="sele1" onChange="jump2('form1');">
  <option>
  <option value="../../index.html">JavaScript
  <option value="../../lib_form.html">サンプル集（フォーム）
  <option value="../../lib_link.html">サンプル集（リンク）
  </select>
</form>

<br>

<form name="form2">
  <select name="sele1" onChange="jump2('form2');">
  <option>
  <option value="../../index.html">JavaScript
  <option value="../../lib_form.html">サンプル集（フォーム）
  <option value="../../lib_link.html">サンプル集（リンク）
  </select>
</form>

</body></html>

[ 解説 ]

まずフレーム内部で表示させる場合、どのフレームにHTMLを表示させるのか、名前を指定します。
上から9行目の「myframe2」の部分に、実際に使用されるフレーム名をお書き下さい。
　　例：parent.myframe2.location.href=my_url;

続いて実際に使用するURLと項目名を指定していきます。
「<option value=……となっている部分が、ポップアップメニューの一つの項目になっています。
URLを変更する場合は、URLが書いてある部分をお好きなURLに書き換えます。
後ろの名称で書かれている部分もお好きなように書き換えてください。
　　例：<option value="../kiso_faq.html">JavaScript FAQ
　　　　前の赤字部分にURL、後ろの赤字部分に名称。

もし項目をもっと増やしたい場合は、新たに
<option value="../kiso_faq.html">JavaScript FAQ
を追加して、同じように詳細を変更してあげて下さい。

また、ポップアップメニューをもっと増やす事も出来ます。
下から11行目～4行目を丸々コピーペーストして下さい。
各項目は同じように変更してあげます。

次に、必ず変更して頂きたい箇所があります。
「<form name="form2">」の「form2」を「form3」に変更します。
続いて、「<select name="sele1" onChange="jump2('form2');">」の「form2」も「form3」に変更します。

同じ要領で、幾つでもポップアップメニューを増やして行く事が出来ます。

例：

追加前

追加後

<form name="form1">
<select name="sele1" onChange="jump2('form1');">
<option>
<option value="../../index.html#JavaScript">JavaScript
<option value="../etc_link.html">Link
<option value="../lib_link.html">Library(Link)
</select>
</form>

<br>

<form name="form2">
<select name="sele1" onChange="jump2('form2');">
<option>
<option value="../../index.html#JavaScript">JavaScript
<option value="../etc_link.html">Link
<option value="../lib_link.html">Library(Link)
</select>
</form>

<br>

<form name="form3">
<select name="sele1" onChange="jump2('form3');">
<option>
<option value="../../index.html#JavaScript">JavaScript
<option value="../etc_link.html">Link
<option value="../lib_link.html">Library(Link)
</select>
</form>

コスメ・コムで売れ筋のクレンジング・洗顔ランキング

　 WEST MiRa > JavaScript > サンプル集(257種類) > フォーム > ポップアップメニュー　フレーム版 Ver7（複数のポップアップメニューを設置） >

バナー、リンクについて , 利用規約 , ヘルプ