ポップアップメニュー(右クリック(IE))

ホーム > DHTML > ポップアップメニュー(右クリック(IE))

■説明

　マウスを右クリックするとポップアップメニューが出てきます。これを使用するとレイアウトをいじることなくリンクを追加することが出来るのでとても使えるTipsです。またアクティブなページとなっていいですよね。なにがいいかというと、ソースコードがポップアップメニューより断然短くて済みます。IE5.5から動作します。

■ソース

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<TITLE>ポップアップメニュー(右クリック(IE))</TITLE>
<SCRIPT LANGUAGE="JScript">
<!--
//――――――――――――――――――――――――――――――――――――――
// 作成者 るび～/ACCESS R http://www5e.biglobe.ne.jp/~access_r/
//――――――――――――――――――――――――――――――――――――――

//――――――――――――――――――――――――――――――――――――――
// ユーザが設定する部分はここから！！
//――――――――――――――――――――――――――――――――――――――
var background_out = "#E4E4E4";           //マウスが外れた時の背景色
var background_over = "#FFFFFF";          //マウスが乗った時の背景色

//メニュータイトルと対応する飛び先のアドレスの数は必ず一緒にして下さい。
	//ポップアップに表示されるメニュータイトル
var menu_name = new Array("CSS", "JavaScript", "DHTML", "アクセス向上");
	//ポップアップでメニュータイトルに対応する飛び先のアドレス
var address = new Array("http://www5e.biglobe.ne.jp/~access_r/hp/css/",
			"http://www5e.biglobe.ne.jp/~access_r/hp/javascript/",
			"http://www5e.biglobe.ne.jp/~access_r/hp/dhtml/",
			"http://www5e.biglobe.ne.jp/~access_r/hp/access/");
//――――――――――――――――――――――――――――――――――――――
// ユーザが設定する部分はここまで！！
//――――――――――――――――――――――――――――――――――――――
if(window.createPopup){
	var menu_status = "";                    //メニュー内容
	var oPopup = window.createPopup();       //ポップアップオブジェクト作成
	menu_status = '<DIV STYLE="border:1px solid black; background:' + background_out + ';">';

//メニュー内容作成
	for(count = 0; count < menu_name.length; count++){
		menu_status += ('<DIV ' +
			'onmouseover="this.style.background=\'' + background_over + '\';" ' +
			'onmouseout="this.style.background=\'' + background_out + '\';" ' +
			'onClick="parent.location.href=\'' + address[count] + '\';" ' +
			'STYLE="font-size:70%; height:20px; padding:3px; cursor:hand; border-bottom:1px outset gray; border-right:1px outset gray;">' +
			menu_name[count] + '</DIV>');
	}
	menu_status += '</DIV>';
	document.oncontextmenu = ContextMenu;                 //右クリックイベント発生時
}
function ContextMenu(){
	if(window.createPopup){
		var topper = event.clientX + 10;              //ポップアップを表示するX座標を取得
		var lefter = event.clientY + 10;              //ポップアップを表示するY座標を取得
		oPopup.document.body.innerHTML = menu_status; //ポップアップに表示する内容を設定
			//ポップアップを表示するメソッドをcall
		oPopup.show(topper, lefter, 200, (20 * menu_name.length) + 2, document.body);
		return(false);
	}
}
//-->
</SCRIPT>
</HEAD>
<BODY>

</BODY>
</HTML>

■ソースの説明

ユーザが設定する部分はコメントに記述してある部分をよく読んで設定してください。
JavaScriptを外部ファイルも設置出来るようにしました。設定する際には<HEAD>～</HEAD>内に以下の分を記述して下さい。尚、ここからダウンロード（dhtml_132.js）して下さい。設定を変える際には、ダウンロードしたdhtml_132.jsファイルを直接修正して下さい。
oPopup.document.body.innerHTMLの説明
　ここに設定した内容をポップアップメニューとして表示します。
oPopup.showの説明
　ここに設定した内容をポップアップメニューとして表示します。
- iXは、ポップアップメニューを表示するX座標を指定します。単位はpxとなります。
- iYは、ポップアップメニューを表示するY座標を指定します。単位はpxとなります。
- iWidthは、ポップアップメニューを表示する横サイズとなります。単位はpxとなります。
- iHeightは、ポップアップメニューを表示する縦サイズとなります。単位はpxとなります。
- oElementは、指定した要素に対して（この場合は、document.body）、相対位置を設定します。指定しない場合は、デスクトップの左上を(0, 0)とした座標位置をとります。
　oPopup.show(iX, iY, iWidth, iHeight, oElement);
イベントハンドラの説明
使用しているイベントハンドラについて説明します。
- onmouseoverは、マウスが指定のエリアに乗っている時に発生するイベントとなります。「this.style.background='･･･'」に指定された背景色になります。
- onmouseoutは、マウスが指定のエリアから外れた時に発生するイベントとなります。「this.style.background='･･･'」に指定された背景色になります。
- onClickは、クリックした時に発生するイベントとなります。「parent.location.href='･･･'に指定されたアドレスに移動します。
- document.oncontextmenuは、マウスを右クリック時に発生するイベントとなります。

■対応ブラウザ

ポップアップメニュー(右クリック(IE))
IE3	IE4	IE5	IE5.5	IE6	N3	N4	N6	N7	O6
×	×	×	●	●	×	×	×	×	×

[ホーム] [DHTML] [↑ページ最上部へ戻る]

Webデザイナーになれる！
HTML、FLASH、CSS等様々なWeb技術やデザインに関することを学ぶことが出来ます。Webデザイナーなら、是非どうぞ！資料請求は無料！です。