SITEMAP [初めてのホームページ講座] [JavaScript , DHTML] [コンテキストメニュー]
Dynamic HTMLの参考書 Java Scriptの参考書

コンテキストメニュー

機能

コンテキストメニュー風にウィンドウをポップアップしていくメニュー形式のダイナミックHTMLです。

初期メニューをクリックするとメインメニューが表示され、そのメインメニューにマウスが乗ると 該当するサブメニューを表示し、そのサブメニューをクリックすると該当するコンテンツウインドウを表示します。 部分的に色を変えたりしたりと小技が効いてて個人的にはなかなかの完成度だと思っています。 残念ながら、IE4以上のみの対応となっていますので、NNでは動作しません（が、スクリプトは一応書いてある）。

類似サンプル

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

利用方法

HEAD部分にスクリプトを記述します。 BODY部分には、DIV要素に対してID属性を指定します。 この時DIV要素は次の条件を満足する必要があります。

メインメニュー
iLmainX ：メインメニュー数分必要。「X」の部分に０から連番で付与。（ここでは０〜２）
サブメニュー
iLsubXY ：サブメニュー数分必要。ただし、「X」はメインメニュー数分、「Y」はそのメインメニューに対するサブメニュー分。
ウインドウ
iLwin ：１つ。サブメニューがクリックされたときに開くウインドウ。

またこの他に、メインメニューを開く、閉じる動作を行うDIV要素が１つ必要です。 ここでは、クラス属性「menulay」で定義しています。

改造方法

表示するメニューのスタイルと数、テキストなどを変更可能です。 かなり複雑なのでじっくりと取り組んで下さい。

スタイル
CSSリファレンスに従って、変更可。
menulay
メインメニューを呼び出す部分のスタイル
mainmenu
メインメニューのスタイル
submenu
サブメニューのスタイル
win
サブメニューをクリックしたときに現れるウインドウのスタイル
メインメニュー数
MainContMaxを変更します。 同時に、変更した数分のSubContMax[x],SubMenu[x],MainMenu[x]（サブメニューの数、メインメニューの表示するタイトル）を変更。 この時、SubMenu[x]の配列宣言を忘れずに。 当然、SubMenu[x][y],Comments[x][y]（サブメニューに表示するタイトル、ウインドウに表示するテキスト）を必要に応じて変更する。
サブメニュー数
SubContMax[x]（「x」はその番号に対応するメインメニュー）を変更します。 この時、SubMenu[x][y],Comments[x][y]（サブメニューに表示するタイトル、ウインドウに表示するテキスト）を必要に応じて変更する。
メインメニューのテキスト
MainMenu[x]にテキストを指定します。 この時、「<DIV onmouseover='Mover(x)'>、<\/DIV>」は必ず必要で、「x」の部分には同一の数値を指定します。
サブメニューのテキスト
SubMenu[x][y]にテキストを指定します。 この時、「<DIV onclick='Sclick(x,y)' onmouseover='Sover(x,y)'>、<\/DIV>」は必ず必要で、「x」「y」の部分には同一の数値を指定します。
ウインドウのテキスト
Comments[x][y]にテキストを指定します。 CommonCmntは必須ではありませんが、共通のテキストを指定したい場合はこのような方法を採るとソースが軽くなります。
テキストカラー
各メニューの変更が可能です。色はカラーコード、位置や大きさはピクセルで指定します。
メインメニュー
  • 通常時のテキストカラー：MainFrColor_c
  • 通常時のバックグラウンドカラー：MainBgColor_c
  • 通常時のボーダーカラー：MainBdColor_c
  • 選択時のテキストカラー：MainFrColor
  • 選択時のバックグラウンドカラー：MainBgColor
  • 選択時のボーダーカラー：MainBdColor
  • 幅：MainW
  • 高さ：MainH
サブメニュー
  • 通常時のテキストカラー：SubFrColor_c
  • 通常時のバックグラウンドカラー：SubBgColor_c
  • 通常時のボーダーカラー：SubBdColor_c
  • 選択時のテキストカラー：SubFrColor
  • 選択時のバックグラウンドカラー：SubBgColor
  • 選択時のボーダーカラー：SubBdColor
  • 幅：SubW
  • 高さ：SubH
ウインドウ
  • 左位置：WinL
  • 上位置：WinT

対応ブラウザ

IE4以上（理論上NN4でも動作可能だが・・・）

サンプル

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>

<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">
<!--
.menulay{
	font:			900 32pt sans-serif;
	color:			#0000ff;
	align:			center;
	border:			2pt groove #9999ff;
}
.mainmenu{
	position:		absolute;
	font:			900 16pt sans-serif;
	text-align:		center;
	border:			1pt solid #000000;
	bisibility:		hidden;
	cursor:			default;
}
.submenu{
	position:		absolute;
	font:			600 16pt sans-serif;
	text-align:		center;
	border:			1pt solid #000000;
	bisibility:		hidden;
	cursor:			default;
}
.win{
	position:		absolute;
	font:			600 14pt sans-serif;
	color:			#000000;
	background-color:	#eeeeee;
	border:			3pt ridge #00ff00;
}
-->
</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 MainContMax = 3;		//メインウインドウのメニュー項目数

var MainFrColor_c = "#0000ff";	//メインウインドウテキストカラー
var MainBgColor_c = "#eeeeff";	//メインウインドウバックグラウンドカラー
var MainBdColor_c = "#0000ff";	//メインウインドウボーダーカラー
var MainFrColor = "#ffffff";		//選択メインウインドウテキストカラー
var MainBgColor = "#0000ff";	//選択メインウインドウバックグラウンドカラー
var MainBdColor = "#ffffff";	//選択メインウインドウボーダーカラー
var MainW = 200;			//メインウインドウの幅
var MainH = 30;			//メインウインドウの高さ

var SubFrColor_c = "#ff0000";	//サブウインドウテキストカラー
var SubBgColor_c = "#ffcc99";	//サブウインドウバックグラウンドカラー
var SubBdColor_c = "#ff6633";	//サブウインドウボーダーカラー
var SubFrColor = "#ffff00";		//選択サブウインドウテキストカラー
var SubBgColor = "#000000";	//選択サブウインドウバックグラウンドカラー
var SubBdColor = "#ffff00";	//選択サブウインドウボーダーカラー
var SubW = 250;			//サブウインドウの幅
var SubH = 25;			//サブウインドウの高さ

var WinL = 100;			//コンテンツウインドウの左端
var WinT = 250;			//コンテンツウインドウの上端

var SubContMax = new Array();	//MainContMax分用意すること
var MainMenu = new Array();	//MainContMax分用意すること

//メインメニュー０
SubContMax[0] = 8;			//サブウインドウ０のメニュー項目数
MainMenu[0]  = "<DIV onmouseover='Mover(0)'>";
MainMenu[0] += "MainMenu - 0";
MainMenu[0] += "<\/DIV>";

//メインメニュー１
SubContMax[1] = 5;			//サブウインドウ１のメニュー項目数
MainMenu[1]  = "<DIV onmouseover='Mover(1)'>";
MainMenu[1] += "MainMenu - 1";
MainMenu[1] += "<\/DIV>";

//メインメニュー２
SubContMax[2] = 4;			//サブウインドウ２のメニュー項目数
MainMenu[2]  = "<DIV onmouseover='Mover(2)'>";
MainMenu[2] += "MainMenu - 2";
MainMenu[2] += "<\/DIV>";

var SubMenu = new Array();
	SubMenu[0] = new Array();
	SubMenu[1] = new Array();
	SubMenu[2] = new Array();
//メインメニュー０のサブメニュー
SubMenu[0][0]  = "<DIV onclick='Sclick(0,0)' onmouseover='Sover(0,0)'>";
SubMenu[0][0] += "SubMenu 0";
SubMenu[0][0] += "<\/DIV>";
SubMenu[0][1]  = "<DIV onclick='Sclick(0,1)' onmouseover='Sover(0,1)'>";
SubMenu[0][1] += "SubMenu 1";
SubMenu[0][1] += "<\/DIV>";
SubMenu[0][2]  = "<DIV onclick='Sclick(0,2)' onmouseover='Sover(0,2)'>";
SubMenu[0][2] += "SubMenu 2";
SubMenu[0][2] += "<\/DIV>";
SubMenu[0][3]  = "<DIV onclick='Sclick(0,3)' onmouseover='Sover(0,3)'>";
SubMenu[0][3] += "SubMenu 3";
SubMenu[0][3] += "<\/DIV>";
SubMenu[0][4]  = "<DIV onclick='Sclick(0,5)' onmouseover='Sover(0,4)'>";
SubMenu[0][4] += "SubMenu 4";
SubMenu[0][4] += "<\/DIV>";
SubMenu[0][5]  = "<DIV onclick='Sclick(0,5)' onmouseover='Sover(0,5)'>";
SubMenu[0][5] += "SubMenu 5";
SubMenu[0][5] += "<\/DIV>";
SubMenu[0][6]  = "<DIV onclick='Sclick(0,6)' onmouseover='Sover(0,6)'>";
SubMenu[0][6] += "SubMenu 6";
SubMenu[0][6] += "<\/DIV>";
SubMenu[0][7]  = "<DIV onclick='Sclick(0,7)' onmouseover='Sover(0,7)'>";
SubMenu[0][7] += "SubMenu 7";
SubMenu[0][7] += "<\/DIV>";
//メインメニュー１のサブメニュー
SubMenu[1][0]  = "<DIV onclick='Sclick(1,0)' onmouseover='Sover(1,0)'>";
SubMenu[1][0] += "SubMenu 0";
SubMenu[1][0] += "<\/DIV>";
SubMenu[1][1]  = "<DIV onclick='Sclick(1,1)' onmouseover='Sover(1,1)'>";
SubMenu[1][1] += "SubMenu 1";
SubMenu[1][1] += "<\/DIV>";
SubMenu[1][2]  = "<DIV onclick='Sclick(1,2)' onmouseover='Sover(1,2)'>";
SubMenu[1][2] += "SubMenu 2";
SubMenu[1][2] += "<\/DIV>";
SubMenu[1][3]  = "<DIV onclick='Sclick(1,3)' onmouseover='Sover(1,3)'>";
SubMenu[1][3] += "SubMenu 3";
SubMenu[1][3] += "<\/DIV>";
SubMenu[1][4]  = "<DIV onclick='Sclick(1,4)' onmouseover='Sover(1,4)'>";
SubMenu[1][4] += "SubMenu 4";
SubMenu[1][4] += "<\/DIV>";
//メインメニュー２のサブメニュー
SubMenu[2][0]  = "<DIV onclick='Sclick(2,0)' onmouseover='Sover(2,0)'>";
SubMenu[2][0] += "SubMenu 0";
SubMenu[2][0] += "<\/DIV>";
SubMenu[2][1]  = "<DIV onclick='Sclick(2,1)' onmouseover='Sover(2,1)'>";
SubMenu[2][1] += "SubMenu 1";
SubMenu[2][1] += "<\/DIV>";
SubMenu[2][2]  = "<DIV onclick='Sclick(2,2)' onmouseover='Sover(2,2)'>";
SubMenu[2][2] += "SubMenu 2";
SubMenu[2][2] += "<\/DIV>";
SubMenu[2][3]  = "<DIV onclick='Sclick(2,3)' onmouseover='Sover(2,3)'>";
SubMenu[2][3] += "SubMenu 3";
SubMenu[2][3] += "<\/DIV>";

var CommonCmnt = "<BR><A Href='javascript:history.back()'>Go to Back<\/A>";
var Comments = new Array();
	Comments[0] = new Array();
	Comments[1] = new Array();
	Comments[2] = new Array();
Comments[0][0] = "Contents Window 00<BR>Main 0 - Sub 0" + CommonCmnt;
Comments[0][1] = "Contents Window 01<BR>Main 0 - Sub 1" + CommonCmnt;
Comments[0][2] = "Contents Window 02<BR>Main 0 - Sub 2" + CommonCmnt;
Comments[0][3] = "Contents Window 03<BR>Main 0 - Sub 3" + CommonCmnt;
Comments[0][4] = "Contents Window 04<BR>Main 0 - Sub 4" + CommonCmnt;
Comments[0][5] = "Contents Window 05<BR>Main 0 - Sub 5" + CommonCmnt;
Comments[0][6] = "Contents Window 06<BR>Main 0 - Sub 6" + CommonCmnt;
Comments[0][7] = "Contents Window 07<BR>Main 0 - Sub 7" + CommonCmnt;
Comments[1][0] = "Contents Window 10<BR>Main 1 - Sub 0" + CommonCmnt;
Comments[1][1] = "Contents Window 11<BR>Main 1 - Sub 1" + CommonCmnt;
Comments[1][2] = "Contents Window 12<BR>Main 1 - Sub 2" + CommonCmnt;
Comments[1][3] = "Contents Window 13<BR>Main 1 - Sub 3" + CommonCmnt;
Comments[1][4] = "Contents Window 14<BR>Main 1 - Sub 4" + CommonCmnt;
Comments[2][0] = "Contents Window 20<BR>Main 2 - Sub 0" + CommonCmnt;
Comments[2][1] = "Contents Window 21<BR>Main 2 - Sub 1" + CommonCmnt;
Comments[2][2] = "Contents Window 22<BR>Main 2 - Sub 2" + CommonCmnt;
Comments[2][3] = "Contents Window 23<BR>Main 2 - Sub 3" + CommonCmnt;

var dx = 0;
var dy = 0;

var Main_F = true;
var Sub_F = false;

var Main_c = 0;
var Sub1_c = 0;
var Sub2_c = 0;

function Init(){
	if(iIE4){
		document.onmousedown = Mdown;
	}
	if(iNN4){
		window.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
		window.onmousedown = Mdown;
	}
	All_Clear();
}

function Mclick(){
	if(Main_F){
		Main_View();
		Sub_Clear();
	}else{
		All_Clear();
	}
	Main_F = !Main_F;
}

function Mover(n){
	if(Sub_F){
		Main_ChgMenu(n);
		Sub_View(n);
		Sub_F = !Sub_F;
		Main_c = n;
	}else{
		Sub_Clear();
		Sub_F = !Sub_F;
		Mover(n);
	}
}

function Sover(n,m){
	Sub_ChgMenu(n,m);
	Sub1_c = n;
	Sub2_c = m;
}

function Sclick(n,m){
	Window_View(n,m);
}

function Main_View(){
	if(iIE4){
		for(i = 0; i <= MainContMax-1; i++){
			lay = document.all("iLmain"+i);
			lay.innerHTML = MainMenu[i];
			lay.style.left = dx + 20;
			lay.style.top = dy + (MainH - lay.style.borderWidth) * i + 20;
			lay.style.width = MainW;
			lay.style.height = MainH;
			lay.style.color = MainFrColor_c;
			lay.style.backgroundColor = MainBgColor_c;
			lay.style.borderColor = MainBdColor_c;
			lay.style.visibility = "visible";
		}
	}
	if(iNN4){
		for(i = 0; i <= MainContMax-1; i++){
			lay = document.layers["iLmain"+i];
			lay.document.open();
			lay.document.fgColor = MainFrColor_c;
			lay.document.bgColor = MainBgColor_c;
			lay.document.write(MainMenu[i]);
			lay.document.close();
			lay.left = dx + 20;
			lay.top = dy + (MainH - lay.style.borderWidth) * i + 20;
			lay.clip.width = MainW;
			lay.clip.height = MainH;
			lay.visibility = "show";
		}
	}
}

function Sub_View(n){
	if(iIE4){
		laymain = document.all("iLmain"+n).style;
		for(i = 0; i <= SubContMax[n]-1; i++){
			laysub = document.all("iLsub"+n+i);
			laysub.innerHTML = SubMenu[n][i];
			laysub.style.left = laymain.posLeft + laymain.posWidth - 20;
			laysub.style.top = laymain.posTop + laymain.posHeight + (SubH - laysub.style.borderWidth) * i - 20;
			laysub.style.width = SubW;
			laysub.style.height = SubH;
			laysub.style.color = SubFrColor_c;
			laysub.style.backgroundColor = SubBgColor_c;
			laysub.style.borderColor = SubBdColor_c;
			laysub.style.visibility = "visible";
		}
	}
	if(iNN4){
		laymain = document.layers["iLmain"+n];
		for(i = 0; i <= SubContMax[n]-1; i++){
			laysub = document.layers["iLsub"+n+i];
			laysub.document.open();
			laysub.document.fgColor = SubFrColor_c;
			laysub.document.bgColor = SubBgColor_c;
			laysub.document.write(SubMenu[n][i]);
			laysub.document.close();
			laysub.left = laymain.left + laymain.clip.width - 20;
			laysub.top = laymain.top + laymain.clip.height + (SubH) * i - 20;
			laysub.clip.width = SubW;
			laysub.clip.height = SubH;
			laysub.visibility = "show";
		}
	}
}

function Window_View(n,m){
	if(iIE4){
		lay = document.all("iLwin");
		lay.innerHTML = Comments[n][m];
		lay.style.left = WinL;
		lay.style.top = WinT;
		lay.style.visibility = "visible";
	}
}

function Main_ChgMenu(n){
	if(iIE4){
		if(Main_c >= 0){
			lay = document.all("iLmain"+Main_c).style;
			lay.color = MainFrColor_c;
			lay.backgroundColor = MainBgColor_c;
			lay.borderColor = MainBdColor_c;
		}
		if(n >= 0){
			lay = document.all("iLmain"+n).style;
			lay.color = MainFrColor;
			lay.backgroundColor = MainBgColor;
			lay.borderColor = MainBdColor;
		}
	}
}

function Sub_ChgMenu(n,m){
	if(iIE4){
		if(Sub1_c >= 0 && Sub2_c >= 0){
			lay = document.all("iLsub"+Sub1_c+Sub2_c).style;
			lay.color = SubFrColor_c;
			lay.backgroundColor = SubBgColor_c;
			lay.borderColor = SubBdColor_c;
		}
		if(n >= 0 && m >= 0){
			lay = document.all("iLsub"+n+m).style;
			lay.color = SubFrColor;
			lay.backgroundColor = SubBgColor;
			lay.borderColor = SubBdColor;
		}
	}
}

function All_Clear(){
	if(iIE4){
		for(i = 0; i <= MainContMax-1; i++){
			lay = document.all("iLmain"+i);
			lay.style.visibility = "hidden";
		}
	}
	if(iNN4){
		for(i = 0; i <= MainContMax-1; i++){
			lay = document.layers["iLmain"+i];
			lay.visibility = "hide";
		}
	}
	Sub_Clear();
	Window_Clear();
}

function Sub_Clear(){
	if(iIE4){
		for(i = 0; i <= MainContMax-1; i++){
			for(j = 0; j <= SubContMax[i]-1; j++){
				lay = document.all("iLsub"+i+j);
				lay.style.visibility = "hidden";
			}
		}
	}
	if(iNN4){
		for(i = 0; i <= MainContMax-1; i++){
			for(j = 0; j <= SubContMax[i]-1; j++){
				lay = document.layers["iLsub"+i+j];
				lay.visibility = "hide";
			}
		}
	}
}

function Window_Clear(){
	if(iIE4){
		document.all("iLwin").style.visibility = "hidden";
	}
	if(iNN4){
		document.layers["iLwin"].visibility = "hide";
	}
}

function Mdown(e){
	if(iIE4){
		dx = event.offsetX;
		dy = event.offsetY;
	}
	if(iNN4){
		dx = e.layerX;
		dy = e.layerY;
	}
	return false;
}
// -->
</SCRIPT>

</HEAD>

<BODY onload="Init()">

<DIV CLASS="menulay" onclick="Mclick()">ContextMenu(Please Click Hear)</DIV>

<DIV CLASS="mainmenu" ID="iLmain0"></DIV>
<DIV CLASS="mainmenu" ID="iLmain1"></DIV>
<DIV CLASS="mainmenu" ID="iLmain2"></DIV>

<DIV CLASS="submenu" ID="iLsub00"></DIV>
<DIV CLASS="submenu" ID="iLsub01"></DIV>
<DIV CLASS="submenu" ID="iLsub02"></DIV>
<DIV CLASS="submenu" ID="iLsub03"></DIV>
<DIV CLASS="submenu" ID="iLsub04"></DIV>
<DIV CLASS="submenu" ID="iLsub05"></DIV>
<DIV CLASS="submenu" ID="iLsub06"></DIV>
<DIV CLASS="submenu" ID="iLsub07"></DIV>

<DIV CLASS="submenu" ID="iLsub10"></DIV>
<DIV CLASS="submenu" ID="iLsub11"></DIV>
<DIV CLASS="submenu" ID="iLsub12"></DIV>
<DIV CLASS="submenu" ID="iLsub13"></DIV>
<DIV CLASS="submenu" ID="iLsub14"></DIV>

<DIV CLASS="submenu" ID="iLsub20"></DIV>
<DIV CLASS="submenu" ID="iLsub21"></DIV>
<DIV CLASS="submenu" ID="iLsub22"></DIV>
<DIV CLASS="submenu" ID="iLsub23"></DIV>

<DIV CLASS="win" ID="iLwin"></DIV>

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