今回は JavaScriptを使った プルダウンメニューのリンクの設定方法のお話です。
まず プルダウンメニューとはどんなものか ちょっと見てみましょう。
よく 掲示板や メール送信フォームなんかで こんなのを見かけたことがあると思います。
これが プルダウンメニューです。
上記の場合は ただ メニューを選択するだけのものですが、
これにリンクを設定をすることで 任意のページにジャンプさせることができます。
例えば リンクのメニューが多くなったときとか
リンクをカテゴリー別に区分けしたいときなんかにも応用ができますね。
場所を取りませんから サイトのナビゲーションにも便利です。
では さっそくやってみます
プルダウンメニューでリンクを設定して 指定のページにジャンプさせる方法としては
メニューからリンク先を選ぶだけでジャンプさせる方法と メニューからリンク先を
指定して「URLへ移動」のボタンをクリックしたら リンク先にジャンプする方法があります。
● JavaScriptのスクリプト言語を設定する。
ロールオーバーの時と同様 これもJavaScriptを使いますので
HTML文章内の <head> 〜 </head> 内に スクリプト言語を設定します。
ホームページ作成ソフトを使って プルダウンメニューを設定する場合は
自動的に挿入してくれますので 気にすることはありませんね。
<HTML>
<HEAD>
<TITLE>タイトル</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function menuLink(linkLoc)
{ if(linkLoc !="") { window.location.href=linkLoc;}
}
//-->
</SCRIPT>
</HEAD> |
● formタグの挿入
こちらは メニューをセレクトするだけで 指定されたページに
ジャンプするようになっています。
onChange という命令文で メニューをセレクトしたらURLに
移動してください という設定になっているわけですね。
<form name="form2">
<select name="menu2" onChange="MM_jumpMenu('parent',this,0)">
<option>▼ 選択してください</option>
<option value="http://www.yahoo.co.jp/">Yahoo Japan</option>
<option value="http://www.google.co.jp/">Google</option>
<option value="http://www.infoseek.co.jp/">infoseek</option>
<option value="http://www.goo.ne.jp/">goo</option>
</select>
</form> |
こちらは メニューをセレクトして 「URLに移動」の
ボタンをクリックしたら 指定されたページにジャンプする
ように設定しています。
上のメニューとのソースの違いを見てみると onChange の
命令文がなくなった代わりにボタンの設定があるのがわかりますね。
メニューを選んでボタンをクリックしたら そのメニューに設定して
あるURLを読み込んで リンク先に送ってくれるようになっているわけです。
<form name="form3">
<select name="menu3" id="menu3">
<option selected>▼ 選択してください </option>
<option value="http://www.yahoo.co.jp/">Yahoo Japan </option>
<option value="http://www.google.co.jp/">Google </option>
<option value="http://www.infoseek.co.jp/">infoseek </option>
<option value="http://www.goo.ne.jp/">goo </option>
</select>
<input type="button" name="Button1" value="URLに移動" onClick="MM_jumpMenuGo('menu3','parent',1)">
</form> |
|
