Quick-navi

Description:

利用頻度の高い、プルダウンのクイックナビシステムです。 選択メニューから一つを選択して、"GO"ボタンを押すと、選んだメニュー先にリンクします。

Demo:

Source:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>

<script language="JavaScript" type="text/javascript">
<!--
function quicknavi(url) {
 if(url != "") {
  location.href = url;
 }
}
//-->
</script>

</head>

<body>


<!-- 設置するプルダウンメニュー -->
<form method="post">
<select name="qnaviselect">
 <option value="">-- リンク先を選択してください。
 <option value="http://www.yahoo.co.jp/">Yahoo!
 <option value="http://www.goo.ne.jp/"      >Goo
 <option value="http://www.excite.co.jp"    >Excite
 <option value="http://www.infoseek.co.jp"  >Infoseek
</select>

<input type="button" value="Go!"
 onClick="quicknavi(this.form.qnaviselect.options[this.form.qnaviselect.selectedIndex].value);">

</form>



</body>
</html>

Advice:

Arrangement:

メニュー選択後すぐ移動する [デモ]

"Go!"ボタンを押さずに、メニューから選択後すぐ移動します。

Goボタンを削除し、<select>タグの中にonchange=".."を新たに書き加えます。

<form method="post">

<select name="qnaviselect" onchange="quicknavi(this.form.qnaviselect.options[this.form.qnaviselect.selectedIndex].value);">
 <option value="">-- リンク先を選択してください。
 <option value="http://www.yahoo.co.jp/"    >Yahoo!
 <option value="http://www.goo.ne.jp/"      >Goo
 <option value="http://www.excite.co.jp"    >Excite
 <option value="http://www.infoseek.co.jp"  >Infoseek
</select>

</form>

フレームのページで使用する

プルダウンで選択した後フレームの該当ターゲットをリンクさせます。

quicknavi() { .... } の中身を以下のように書き換えます。

function quicknavi(url) {
 if(url != "") {
  parent.main.location.href = url;
  //mainは、<frame>タグのname属性の値です。例:<frame name="main">
 }
}

選択後新しいウインドウを開いてリンクする [デモ]

メニューから選択後、該当URLを新しいウインドウで開きます。

quicknavi() { .... } の中身を以下のように書き換えます。

function quicknavi(url) {
 if(url != "") {
  window.open(url);
 }
}

Browser:

Internet Explorer3.0以上
Netscape Navigator2.0以上