右クリックメニューの実装 Context menu, Right click menu

右クリックメニューを実装するライブラリのご紹介です。

デモ

sample

ライブラリのダウンロードと設置

こちらをクリックしてダウンロードしてください。
ダウンロードしたcontext-menu.jsを任意の場所へ置き読み込みます。

HTML

<script type="text/javascript" src="context-menu.js"></script>

インスタンスの生成と表示

インスタンスを生成します。
引数にはオプションを設定できます。

引数 初期値 説明
第一引数   オプション
詳細はこちら

JavaScript

var sampleElement = document.getElementById('sample');

var contextMenuObj = new ContextMenu({
	element  : sampleElement,
	menuList : [
		{
			text    : 'button 1',
			action  : function() {
				alert('button 1 click');
			}
		},
		{
			text    : 'button 2',
			href    : 'http://example.co.jp/',
			target  : '_blank',
			action  : function() {
				alert('button 2 click');
			}
		},
		{
			text    : 'button 3',
			action  : function() {
				alert('button 3 click');
			},
			subMenu : [
				{
					text    : 'button 3-1',
					action  : function() {
						alert('button 3-1 click');
					}
				},
				{
					text    : 'button 3-2',
					action  : function() {
						alert('button 3-2 click');
					}
				}
			]
		}
	]
});

HTML

<p id="sample">sample</p>

CSS


div.contextmenu {
	position:absolute;
	top:0;
	left:0;
	box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
	display:none;
	border:1px solid #999;
	padding:3px;
	background-color:#fafafa;
}

*html div.contextmenu {
	width:200px;
}

*+html div.contextmenu {
	width:200px;
}

	/* メニュータイトル見出し */
	div.contextmenu p.title {
		margin:0 0 3px;
		border-bottom:1px solid #aaa;
		padding:5px 10px;
		background-color:#eee;
	}

	div.contextmenu ul.menu-items {
		margin:0;
		padding:0;
	}

		div.contextmenu ul.menu-items li.menu-item {
			position:relative;
			margin:0;
			padding:2px 0;
			list-style:none;
		}

		/* 境界 */
		div.contextmenu ul.menu-items li.menu-item.divide {
			border-top:1px dashed #aaa;
		}

			/* ボタン */
			div.contextmenu ul.menu-items li.menu-item button {
				border:1px solid transparent;
				border-radius:2px;
				padding:3px 20px;
				width:100%;
				background:transparent;
				cursor:pointer;
				text-align:left;
				transition:border 0.2s ease 0s, background-color 0.2s ease 0s;
			}

			div.contextmenu ul.menu-items li.menu-item button:hover {
				border:1px solid #06d;
				background-color:#e6f1ff;
			}

			div.contextmenu ul.menu-items li.menu-item.disabled button,
			div.contextmenu ul.menu-items li.menu-item.disabled button:hover {
				border:1px solid transparent;
				background:transparent;
				cursor:default;
			}

			div.contextmenu ul.menu-items li.menu-item.sub-menu-open > button,
			div.contextmenu ul.menu-items li.menu-item.sub-menu-close > button {
				background-repeat:no-repeat;
				background-position:95% 50%;
			}

				div.contextmenu ul.menu-items li.menu-item button span.icon {
					margin:0 5px 0 -16px;
					vertical-align:middle;
				}

		/* サブメニュー */
		div.contextmenu ul.menu-items li.menu-item ul.sub-menu {
			position:absolute;
			top:0;
			left:100%;
			box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
			display:none;
			border:1px solid #999;
			padding:3px;
			min-width:150px;
			background-color:#fafafa;
		}

		div.contextmenu ul.menu-items li.menu-item.sub-menu-open ul.sub-menu {
			display:block;
		}

/* メニュー表示 */
div.contextmenu.open {
	display:block;
}

オプション

次の設定が可能です。
elementプロパティとmenuListプロパティは最低限の指定が必要です。

プロパティ 初期値 型 説明
element window string or
html element		 【必須】
メニューを割り当てる要素
指定はセレクタ―文字列かエレメントオブジェクト
menuClassName 'contextmenu' string コンテキストメニュー本体のクラス名
menuTitleClassName 'title' string メニュータイトルのクラス名
menuListClassName 'menu-items' string メニューリストのクラス名
menuItemClassName 'menu-item' string メニューボタンのクラス名
menuIconClassName 'icon' string アイコンを指定した時のアイコンのクラス名
menuDivideClassName 'divide' string 境界となるメニューボタンのクラス名
menuDisabledClassName 'disabled' string メニューボタンの無効時のクラス名
subMenuClassName 'sub-menu' string サブメニューリストのクラス名
openFlagClassName 'contextmenu-open' string メニューが開いているときのbody要素に付与されるクラス名（判定に使用）
closeFlagClassName 'contextmenu-close' string メニューが閉じているときのbody要素に付与されるクラス名（判定に使用）
openClassName 'open' string メニューを開いたときのメニュー本体に付与されるクラス名
closeClassName 'close' string メニューを閉じたときのメニュー本体に付与されるクラス名
subMenuOpenClassName 'sub-menu-open' string サブメニューを開いたときのメニュー本体に付与されるクラス名
subMenuCloseClassName 'sub-menu-close' string サブメニューを閉じたときのメニュー本体に付与されるクラス名
headerTitle '' string メニューのタイトル見出し
menuList [] array 【必須】
メニューの指定
指定方法は上記使い方のコードを参照
指定するプロパティはこちらを参照
openCallback function() {} function 開いたときのコールバック関数
closeCallback function() {} function 閉じたときのコールバック関数

menuListの指定内容

プロパティ 初期値 型 説明
text '' string ボタン文字列
href '' string ボタンをクリックしたときに遷移するページのパス
target '' string ボタンをクリックしたときに遷移する仕方
action function() {} function ボタンをクリックしたときに実行する関数
icon '' string アイコンを表示する場合の画像パス
disabled false boolean ボタンの無効化
subMenu [] array サブメニューを表示する場合の指定
divide false boolean ボタンの境界とするかどうか

メソッド

次のメソッドが実行可能です。

メソッド 説明
context.openMenu([callback]) メニューを開く（表示する）。
引数はメニューを開いた（表示した）ときのコールバック関数（省略可能）を指定。
context.closeMenu([callback]) メニューを閉じる（非表示にする）。
引数はメニューを閉じた（非表示にした）ときのコールバック関数（省略可能）を指定。
context.toggleMenu(mode[, callback]) メニューの閉じると開くを交互に行う。
第一引数にはメニューを開く場合は'open'、閉じる場合は'close'を指定。
第二引数はメニューを開いた（表示した）または閉じた（非表示にした）ときのコールバック関数（省略可能）を指定。
context.destroy() コンテキストメニュー本体を破棄する。

JavaScript

var sampleElement = document.getElementById('sample'),
    controlBtn    = document.getElementById('control');

var contextMenuObj = new ContextMenu({
	element  : sampleElement,
	menuList : [
		{
			text    : 'button 1',
			action  : function() {
				alert('button 1 click');
			}
		},
		{
			text    : 'button 2',
			href    : 'http://example.co.jp/',
			target  : '_blank',
			action  : function() {
				alert('button 2 click');
			}
		},
		{
			text    : 'button 3',
			action  : function() {
				alert('button 3 click');
			},
			subMenu : [
				{
					text    : 'button 3-1',
					action  : function() {
						alert('button 3-1 click');
					}
				},
				{
					text    : 'button 3-2',
					action  : function() {
						alert('button 3-2 click');
					}
				}
			]
		}
	]
});

controlBtn.addEventListener('click', function() {
	if (contextMenuObj.getStatus() === 'closed') {
		contextMenuObj.openMenu();
	} else if (ctm2.getStatus() === 'opened') {
		contextMenuObj.closeMenu();
	}
});

JavaScript逆引きリファレンス一覧へ戻る