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

コンテキストメニュー２

機能

メインメニューとサブメニューで構成した、ウィンドウをポップアップしていくメニュー形式のダイナミックHTMLです。

メインメニューにマウスをのせるとサブメニューが表示され、そのサブメニューをクリックすると 該当するコンテンツウインドウを表示します。 残念ながら、IE4以上のみの対応となっていますので、NNでは動作しませんのでご注意を。

類似サンプル

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

利用方法

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

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

改造方法

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

スタイル
CSSリファレンスに従って、変更可。
mainmenu
メインメニューのスタイル
submenu
サブメニューのスタイル
win
サブメニューをクリックしたときに現れるウインドウのスタイル
メインメニュー数
MainContMaxを変更します。 同時に、変更した数分のMainX[x],MainY[x],SubContMax[x],SubMenu[x],SubX[x],SubY[x]を変更。 この時、SubMenu[x],Comments[x]の配列宣言を忘れずに。 当然、SubMenu[x][y],Comments[x][y]（サブメニューに表示するタイトル、ウインドウに表示するテキスト）を必要に応じて変更する。
サブメニュー数
SubContMax[x]（「x」はその番号に対応するメインメニュー）を変更します。 この時、SubMenu[x][y],Comments[x][y]（サブメニューに表示するタイトル、ウインドウに表示するテキスト）を必要に応じて変更する。
サブメニューのテキスト
SubMenu[x][y]にテキストを指定します。
ウインドウのテキスト
Comments[x][y]にテキストを指定します。 CommonCmntは必須ではありませんが、共通のテキストを指定したい場合はこのような方法を採るとソースが軽くなります。
メニューの位置、テキストカラー
各メニューの変更が可能です。色はカラーコード、位置や大きさはピクセルで指定します。
メインメニュー
スタイルはCSSで指定します。（mainmenu）
  • 横方向の位置：MainX[x]
  • 縦方向の位置：MainY[x]
  • 幅：MainW
  • 高さ：MainH
サブメニュー
  • 通常時のテキストカラー：SubFrColor_c
  • 通常時のバックグラウンドカラー：SubBgColor_c
  • 通常時のボーダーカラー：SubBdColor_c
  • 選択時のテキストカラー：SubFrColor
  • 選択時のバックグラウンドカラー：SubBgColor
  • 選択時のボーダーカラー：SubBdColor
  • 幅：SubW
  • 高さ：SubH
  • マウスがのった位置からのオフセット量（横）：OfsX
  • マウスがのった位置からのオフセット量（縦）：OfsY
ウインドウ
  • 左位置：WinL
  • 上位置：WinT

対応ブラウザ

IE4以上

サンプル

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

<!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;
	width:				100px;
	height:				30px;
	font:				900 16pt sans-serif;
	color:				#fff;
	text-align:			center;
	border:				1pt solid #ccc;
	background-color:	#333;
}
.submenu{
	position:			absolute;
	font:				600 16pt sans-serif;
	text-align:			center;
	border:				1pt solid #000000;
	bisibility:			hidden;
	cursor:				default;
	visibility:			hidden;
}
.win{
	position:			absolute;
	top:				450px;
	left:				100px;
	font:				600 14pt sans-serif;
	color:				#000000;
	background-color:	#eeeeee;
	border:				3pt ridge #00ff00;
	visibility:			hidden;
}
-->
</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 MainX = new Array();	
var MainY = new Array();	
	MainX[1] = 0;					// メインメニュー１Ｘ座標
	MainX[2] = 150;					// メインメニュー２Ｘ座標
	MainX[3] = 300;					// メインメニュー３Ｘ座標
	MainY[1] = 0;					// メインメニュー１Ｙ座標
	MainY[2] = 0;					// メインメニュー２Ｙ座標
	MainY[3] = 0;					// メインメニュー３Ｙ座標
var MainW = 150;					// メインウインドウの幅
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 OfsX = -10;						// サブウインドウの横オフセット量
var OfsY = -10;						// サブウインドウの高さオフセット量

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

var SubView = new Array();	
var SubContMax = new Array();		// MainContMax分用意すること
	SubContMax[1] = 8;				// サブウインドウ１のメニュー項目数
	SubContMax[2] = 5;				// サブウインドウ２のメニュー項目数
	SubContMax[3] = 4;				// サブウインドウ３のメニュー項目数

var SubX = new Array();	
	SubX[1] = new Array();
	SubX[2] = new Array();
	SubX[3] = new Array();
var SubY = new Array();	
	SubY[1] = new Array();
	SubY[2] = new Array();
	SubY[3] = new Array();

var SubMenu = new Array();
	SubMenu[1] = new Array();
	SubMenu[2] = new Array();
	SubMenu[3] = new Array();
// メインメニュー０のサブメニュー
SubMenu[1][1] = "SubMenu 1";
SubMenu[1][2] = "SubMenu 2";
SubMenu[1][3] = "SubMenu 3";
SubMenu[1][4] = "SubMenu 4";
SubMenu[1][5] = "SubMenu 5";
SubMenu[1][6] = "SubMenu 6";
SubMenu[1][7] = "SubMenu 7";
SubMenu[1][8] = "SubMenu 8";
// メインメニュー１のサブメニュー
SubMenu[2][1] = "SubMenu 1";
SubMenu[2][2] = "SubMenu 2";
SubMenu[2][3] = "SubMenu 3";
SubMenu[2][4] = "SubMenu 4";
SubMenu[2][5] = "SubMenu 5";
// メインメニュー２のサブメニュー
SubMenu[3][1] = "SubMenu 1";
SubMenu[3][2] = "SubMenu 2";
SubMenu[3][3] = "SubMenu 3";
SubMenu[3][4] = "SubMenu 4";


var CommonCmnt = "<br><a href='javascript:history.back()'>Go to Back<\/a>";
var Comments = new Array();
	Comments[1] = new Array();
	Comments[2] = new Array();
	Comments[3] = new Array();
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[1][5] = "Contents Window 15<br>Main 1 - Sub 5" + CommonCmnt;
Comments[1][6] = "Contents Window 16<br>Main 1 - Sub 6" + CommonCmnt;
Comments[1][7] = "Contents Window 17<br>Main 1 - Sub 7" + CommonCmnt;
Comments[1][8] = "Contents Window 18<br>Main 1 - Sub 8" + 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;
Comments[2][4] = "Contents Window 24<br>Main 2 - Sub 4" + CommonCmnt;
Comments[2][5] = "Contents Window 25<br>Main 2 - Sub 5" + CommonCmnt;
Comments[3][1] = "Contents Window 31<br>Main 3 - Sub 1" + CommonCmnt;
Comments[3][2] = "Contents Window 32<br>Main 3 - Sub 2" + CommonCmnt;
Comments[3][3] = "Contents Window 33<br>Main 3 - Sub 3" + CommonCmnt;
Comments[3][4] = "Contents Window 34<br>Main 3 - Sub 4" + CommonCmnt;


var dx = 0;
var dy = 0;
var Sub1_c = 0;
var Sub2_c = 0;
var menuNum = 0;

function Init(){
	if(iIE4){
		document.onmousedown = Mdown;
		document.onmousemove = Mmove;
		for(i = 1; i <= MainContMax; i++){
			SubView[i] = false;
			document.all("iLmain"+i).style.left = MainX[i];
			document.all("iLmain"+i).style.top = MainY[i];
			document.all("iLmain"+i).style.posWidth = MainW;
			document.all("iLmain"+i).style.posHeight = MainH;
		}
	}
}

function Mdown(){
	if(menuNum != 0){
		for(i = 1; i <= SubContMax[menuNum]; i++){
			layName = "iLsub" + menuNum + i;
			x1 = getSize(layName,"LEFT");
			x2 = x1 + getSize(layName,"WIDTH");
			y1 = getSize(layName,"TOP");
			y2 = y1 + getSize(layName,"HEIGHT");
			if(x1 <= dx && dx <= x2){
				if(y1 <= dy && dy <= y2){
					Window_View(menuNum,i);
				}
			}
		}
	}
}

function Mmove(){
	var i,x1,x2,y1,y2;
	if(iIE4){
		dx = event.clientX;
		dy = event.clientY;
	}
	if(menuNum == 0){
		for(i = 1; i <= MainContMax; i++){
			layName = "iLmain" + i;
			x1 = getSize(layName,"LEFT");
			x2 = x1 + getSize(layName,"WIDTH");
			y1 = getSize(layName,"TOP");
			y2 = y1 + getSize(layName,"HEIGHT");
			if(x1 <= dx && dx <= x2){
				if(y1 <= dy && dy <= y2){
					menuNum = i;
				}
			}
		}
		if(menuNum != 0){
			Main_View(menuNum);
		}
	}else{
		flag = false;
		menuTmp = menuNum;
		for(i = 1; i <= SubContMax[menuNum]; i++){
			layName = "iLsub" + menuNum + i;
			x1 = getSize(layName,"LEFT");
			x2 = x1 + getSize(layName,"WIDTH");
			y1 = getSize(layName,"TOP");
			y2 = y1 + getSize(layName,"HEIGHT");
			if(x1 <= dx && dx <= x2){
				if(y1 <= dy && dy <= y2){
					flag = true;
					Sub_ChgMenu(menuNum,i);
					Sub1_c = menuNum;
					Sub2_c = i;
				}
			}
		}
		if(!flag){
			menuNum = 0;
		}

		layName = "iLmain" + menuTmp;
		x1 = getSize(layName,"LEFT");
		x2 = x1 + getSize(layName,"WIDTH");
		y1 = getSize(layName,"TOP");
		y2 = y1 + getSize(layName,"HEIGHT");
		if(x1 <= dx && dx <= x2){
			if(y1 <= dy && dy <= y2){
				menuNum = menuTmp;
			}
		}


		if(menuNum == 0){
			Sub_Clear(menuTmp);
		}
	}
}

function getSize(Layer,Type){
	switch(Type){
		case "TOP":
			if(iIE4){
				return(parseInt(document.all(Layer).style.top));
			}
		case "LEFT":
			if(iIE4){
				return(parseInt(document.all(Layer).style.left));
			}
		case "WIDTH":
			if(iIE4){
				return(parseInt(document.all(Layer).style.posWidth));
			}
		case "HEIGHT":
			if(iIE4){
				return(parseInt(document.all(Layer).style.posHeight));
			}
		default:
			return(0);
	}
}

function Main_View(n){
	if(iIE4){
		for(i = 1; i <= SubContMax[n]; i++){
			lay = document.all("iLsub"+n+i);
			lay.innerHTML = SubMenu[n][i];
			lay.style.left = dx + OfsX;
			lay.style.top = dy + (SubH - lay.style.borderWidth) * (i-1) + OfsY;
			SubX[i] = lay.style.left;
			SubY[i] = lay.style.top;
			lay.style.posWidth = SubW;
			lay.style.posHeight = SubH;
			lay.style.color = SubFrColor_c;
			lay.style.backgroundColor = SubBgColor_c;
			lay.style.borderColor = SubBdColor_c;
			lay.style.visibility = "visible";
		}
	}
}

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 Sub_ChgMenu(n,m){
	if(iIE4){
		if(Sub1_c >= 1 && Sub2_c >= 1){
			lay = document.all("iLsub"+Sub1_c+Sub2_c).style;
			lay.color = SubFrColor_c;
			lay.backgroundColor = SubBgColor_c;
			lay.borderColor = SubBdColor_c;
		}
		if(n >= 1 && m >= 1){
			lay = document.all("iLsub"+n+m).style;
			lay.color = SubFrColor;
			lay.backgroundColor = SubBgColor;
			lay.borderColor = SubBdColor;
		}
	}
}

function Sub_Clear(n){
	if(iIE4){
		for(j = 1; j <= SubContMax[n]; j++){
			lay = document.all("iLsub"+n+j);
			lay.style.visibility = "hidden";
		}
	}
}

function Window_Clear(){
	if(iIE4){
		document.all("iLwin").style.visibility = "hidden";
	}
}
// -->
</script>

</head>

<body onload="Init()">

<div class="mainmenu" id="iLmain1">MENU1</div>
<div class="mainmenu" id="iLmain2">MENU2</div>
<div class="mainmenu" id="iLmain3">MENU3</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="iLsub15"> </div>
<div class="submenu" id="iLsub16"> </div>
<div class="submenu" id="iLsub17"> </div>
<div class="submenu" id="iLsub18"> </div>

<div class="submenu" id="iLsub21"> </div>
<div class="submenu" id="iLsub22"> </div>
<div class="submenu" id="iLsub23"> </div>
<div class="submenu" id="iLsub24"> </div>
<div class="submenu" id="iLsub25"> </div>

<div class="submenu" id="iLsub31"> </div>
<div class="submenu" id="iLsub32"> </div>
<div class="submenu" id="iLsub33"> </div>
<div class="submenu" id="iLsub34"> </div>

<div class="win" id="iLwin"> </div>

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