|
 |
|
オプションメニュー
サンプルと機能
フォームの<SELECT>タグ、<OPTION>タグを用いて、オプションメニューを作成します。セレクトメニューやプルダウンメニューと呼ばれることもあります。
→ Sample 1：オプションメニュー
→ Sample 2：オプションメニュー（GO!ボタンあり）
サンプル・ソース
緑の文字が変更箇所で、赤い文字が対応するソースです。
"/* */"内はコメントです。削除しても影響ありません。
必要な箇所をコピー＆貼り付けして編集してください。
→ Sample 1：オプションメニュー
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="JavaScript">
<!--
// オプションメニュー
function optionMenu(opt) {
location.href = opt.options[opt.selectedIndex].value;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<SELECT onChange="optionMenu(this)">
<OPTION value="#" selected>選択してください</OPTION>
<OPTION value="http://www.yahoo.co.jp/">Yahoo!</OPTION>
<OPTION value="http://bb.yahoo.co.jp/">Yahoo! BB</OPTION>
<OPTION value="http://shopping.yahoo.co.jp/">Yahoo! Shopping</OPTION>
<OPTION value="http://auctions.yahoo.co.jp/">Yahoo! Auctions</OPTION>
</SELECT>
</FORM>
</BODY>
</HTML> |
→ Sample 2：オプションメニュー（GO!ボタンあり）
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="JavaScript">
<!--
// オプションメニュー
function optionMenu() {
location.href = om.elements['sl'].options[om.elements['sl'].selectedIndex].value;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM name="om">
<SELECT name="sl">
<OPTION value="#" selected>選択してください</OPTION>
<OPTION value="http://www.yahoo.co.jp/">Yahoo!</OPTION>
<OPTION value="http://bb.yahoo.co.jp/">Yahoo! BB</OPTION>
<OPTION value="http://shopping.yahoo.co.jp/">Yahoo! Shopping</OPTION>
<OPTION value="http://auctions.yahoo.co.jp/">Yahoo! Auctions</OPTION>
</SELECT>
<INPUT type="button" value="GO!" onClick="optionMenu()">
</FORM>
</BODY>
</HTML> |
解説・注意点など
<OPTION value="...">タイトル</OPTION>
を増やすことで、いくつでもリンクを増やすことができます。
← Webデザインテクニックに戻る
|
|
|
