SITEMAP [初めてのホームページ講座] [JavaScript , DHTML] [メニューチェンジャー]
Dynamic HTMLの参考書 Java Scriptの参考書

メニューチェンジャー

機能

多くのメニューが存在する場合、１ページ内に全て納めることが難しいことも多いことでしょう。 そういう場合、このスクリプトを使用して、メニューを切替、最小限の表示範囲で済ませることが可能になります。 メインメニューに対してそれぞれサブメニューを設定して、サブメニュー側を切り替えるものです。

メインメニュー側のアンカーにマウスが乗ったら、サブメニュー側の内容を切り替えるというものです。 それぞれのメニューの数やレイアウトは自由に変更できますが、JavaScriptで記述するためそれほど凝ったものはできません。

類似サンプル

  1. メニューチェンジャー（フォーム版）
  2. コンテキストメニュー
  3. コンテキストメニュー２

利用方法

HEAD部分にスタイルとスクリプトを記述します。 メニュー内のスタイルもここに記述します。

A要素にHREF属性でリンク先を「JavaScript:void(0)」にします。 この他にも、mouseovereのイベントハンドラを設定しますが、JavaScriptの関数「Mover(x)」を指定します。 ただし、xは１から始めます。ちなみに０は初期に表示する内容に該当します。

サブメニュー数（メインメニューの項目数）
Laymax ：サブメニュー数分必要。「X」の部分に０から連番で付与するが、０は初期表示用。（ここでは０〜３）
メインメニュー内容
BODY要素内へ通常のHTMLの記述を行う。リンク先はスクリプトの関数。
サブメニュー内容
スクリプト内部に変数として記述。スタイルも含みここで指定。

改造方法

メニューの数を変更するのは比較的簡単です。 ただし、CSSの基礎的な知識がなければ、メニューのスタイルを変更するのは結構面倒です。 全て、スクリプト内部の変数（comments[x]）に格納しているからです。

スタイル
CSSリファレンスに従って、変更可。
MainMenu
メインメニューのスタイルを指定。
SubMenu
サブメニューの表示位置関係のスタイルを指定。
Style
サブメニューの表示方法のスタイル（フォントや色など）を指定。
その他
必要に応じて指定。
サブメニュー数
Laymaxを変更します。初期に表示する内容を除いたサブメニューの個数へ変更します。 これに合わせて、BODY要素内のメインメニューの数と<div id="iL1" class="SubMenu"> </div> を追加削除します。後者は数分必要で、「iLx」の「x」は１〜連番で、０は初期表示用です。 また、スクリプト内部の変数「comments[x]」も必要に応じて数を合わせます。「x」は上記と同様で、全てその番号同士が対応します。
メインメニュー内容
BODY要素内の「<div class="MainMenu">」〜「</div>」の内部を変更します。 リンク先は「x<a href="JavaScript:void(x)" onmouseover="Mover(x)">」を追加削除します。 「x」は１からの連番で上記の内容全てに対応しています。
サブメニュー内容
スクリプト内部の変数「comments[x]」を追加削除します。 また、この中に必要に応じてCSSでスタイル指定しても構いません。 「x」は１からの連番で上記の内容全てに対応しています。

対応ブラウザ

IE4,NN4以上

サンプル

［サンプルを見る］ ［ダウンロード］ 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="ja">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>切替式サブウインドウ</title>

<style type="text/css">
<!--
.MainMenu{				/*常に表示するメインメニューのスタイル指定*/
	position:			absolute;
	left:				10px;
	top:				10px;
	width:				250px;
	height:				350px;
	font-size:			12pt;
	font-weight:		bold;
	background-color:	#9cf;
	margin:				0px;
	padding:			5px;
	border:				2px solid #009;
}
.SubMenu{				/*切替（サブ）メニュー側の位置を指定*/
	position:			absolute;
	left:				260px;
	top:				10px;
}
.Style{					/*切替（サブ）メニュー側のスタイル指定*/
	width:				250px;
	height:				350px;
	font-size:			12pt;
	background-color:	#9cf;
	margin:				0px;
	padding:			5px;
	border:				2px solid #009;
}
.tl{
	font-size:			14pt;
	font-weight:		bold;
	color:				#f30;
}
-->
</style>

<script language="javascript" type="text/javascript">
<!--
//ブラウザのバージョンチェック
var brw_v = navigator.appVersion.charAt(0);
var brw_n = navigator.appName.charAt(0);
var iIE4 = false;
var iNN4 = false;
if((brw_v >= 4)&&(brw_n == "M"))iIE4 = true;
if((brw_v >= 4)&&(brw_n == "N"))iNN4 = true;

var Laymax = 3;	//サブメニューの最大数（初期の表示分は除く）

var comments = new Array();
comments[0] = '<p>メインメニューにマウスを合わせると、その内容のサブメニューがここに表示されます。<\/p>';
comments[0]+= '<p>限られた空間に大量の情報を埋め込む際の、一般的な手法をダイナミックHTMLで実現してみました。<\/p>';
comments[1] = '<p class=tl>逆引きHTMLリファレンス</p>';
comments[1]+= '<ul><li><a href=../../html32/index.html>トップページ</a></li>';
comments[1]+= '<li><a href=../../html32/cont05.html>フォント</a></li>';
comments[1]+= '<li><a href=../../html32/cont06.html>改行</a></li>';
comments[1]+= '<li><a href=../../html32/cont07.html>背景</a></li>';
comments[1]+= '<li><a href=../../html32/cont08.html>イメージ</a></li>';
comments[1]+= '<li><a href=../../html32/cont09.html>ハイパーリンク</a></li>';
comments[1]+= '<li><a href=../../html32/cont10.html>ヘッダ</a></li>';
comments[1]+= '<li><a href=../../html32/cont11.html>リスト</a></li>';
comments[1]+= '<li><a href=../../html32/cont12.html>テーブル</a></li>';
comments[1]+= '<li><a href=../../html32/cont13.html>フレーム</a></li>';
comments[1]+= '<li><a href=../../html32/cont14.html>フォーム</a></li>';
comments[1]+= '<li><a href=../../html32/cont15.html>イメージマップ</a></li>';
comments[1]+= '<li><a href=../../html32/cont00.html>ワンポイント</a></li></ul>';
comments[2] = '<p class=tl>HTML4.0リファレンス</p>';
comments[2]+= '<ul><li><a href=../../html40/index.html>トップページ</a></li>';
comments[2]+= '<li><a href=../../html40/att/elem.html>要素一覧</a></li>';
comments[2]+= '<li><a href=../../html40/att/attb.html>属性一覧</a></li>';
comments[2]+= '<li><a href=../../html40/att/func.html>機能</a></li>';
comments[2]+= '<li><a href=../../html40/att/event.html>イベント</a></li>';
comments[2]+= '<li><a href=../../html40/att/data.html#data-code>符号化方式</a></li>';
comments[2]+= '<li><a href=../../html40/att/other.html#doctype>DOCTYPE</a></li></ul>';
comments[3] = '<p class=tl>カスケードスタイルシート</p>';
comments[3]+= '<ul><li><a href=../../stylesheet/index.html>トップページ</a></li>';
comments[3]+= '<li><a href=../../stylesheet/css1/index.html>CSS1リファレンス</a></li>';
comments[3]+= '<li><a href=../../stylesheet/beginner/index.html>初心者向け</a></li>';
comments[3]+= '<li><a href=../../stylesheet/tips/index.html>Tips</a></li>';
comments[3]+= '<li><a href=../../stylesheet/actually/index.html>実際のところ</a></li>';
comments[3]+= '<li><a href=../../stylesheet/filter/index.html>FILTERS</a></li></ul>';

var lay = new Array();
var Nbef = 0;

function Init(){
	for(i = 0; i <= Laymax; i++){
		if(iIE4){
			lay = document.all("iL"+i);
			lay.style.visibility = "hidden";
		}
		if(iNN4){
			lay = document.layers["iL"+i];
			lay.visibility = "hide";
		}
	}
	Mover(0);
}

function Mover(n){
	if(n == Nbef && Nbef != 0)return;
	Mout(Nbef);
	Nbef = n;
	Com = "<div class=Style>" + comments[n] + "<\/div>";
	if(iIE4){
		lay = document.all("iL"+n);
		lay.innerHTML = Com;
		lay.style.visibility = "visible";
	}
	if(iNN4){
		lay = document.layers["iL"+n];
		lay.document.open();
		lay.document.write(Com);
		lay.document.close();
		lay.visibility = "show";
	}
}

function Mout(n){
	if(iIE4){
		lay = document.all("iL"+n);
		lay.style.visibility = "hidden";
	}
	if(iNN4){
		lay = document.layers["iL"+n];
		lay.visibility = "hide";
	}
}
// -->
</script>

</head>

<body onload="Init()">

<div class="MainMenu">
<a href="JavaScript:void(0)" onmouseover="Mover(1)">
逆引きHTMLリファレンス</a><br><br>
<a href="JavaScript:void(0)" onmouseover="Mover(2)">
HTML4.0リファレンス</a><br><br>
<a href="JavaScript:void(0)" onmouseover="Mover(3)">
カスケードスタイルシート</a><br><br>
</div>

<div id="iL0" class="SubMenu"> </div>
<div id="iL1" class="SubMenu"> </div>
<div id="iL2" class="SubMenu"> </div>
<div id="iL3" class="SubMenu"> </div>

</body>
</html>
[Go To Top]
Last modified Nov,2000
Copyright(C)2000 T.Miyazaki , All Rights Reserved.