Contextual Menus with Twitters Bootstrap

context.css

.dropdown-context .nav-header{
	cursor:default;
	}
.dropdown-context:before, .dropdown-context-up:before {
	position: absolute;
	top: -7px;
	left: 9px;
	display: inline-block;
	border-right: 7px solid transparent;
	border-bottom: 7px solid #ccc;
	border-left: 7px solid transparent;
	border-bottom-color: rgba(0, 0, 0, 0.2);
	content: '';
	}
.dropdown-context:after, .dropdown-context-up:after{
	position: absolute;
	top: -6px;
	left: 10px;
	display: inline-block;
	border-right: 6px solid transparent;
	border-bottom: 6px solid #ffffff;
	border-left: 6px solid transparent;
	content: '';
	}
.dropdown-context-up:before, .dropdown-context-up:after{
	top:auto;
    bottom:-7px;
    z-index:9999;
	}
.dropdown-context-up:before{
	border-right: 7px solid transparent;
	border-top: 7px solid #ccc;
	border-bottom:none;
	border-left: 7px solid transparent;
	}
.dropdown-context-up:after{
	border-right: 6px solid transparent;
	border-top: 6px solid #ffffff;
	border-left: 6px solid transparent;
    border-bottom:none;
	}

.dropdown-context-sub:before, .dropdown-context-sub:after{
    display:none;
	}
.dropdown-context .dropdown-submenu:hover .dropdown-menu {
	display: none;
	}

.dropdown-context .dropdown-submenu:hover > .dropdown-menu {
 	display: block;
	}

context.js

var context = context || (function () {
    
	var options = {
		fadeSpeed: 100,
		filter: function ($obj) {
			// Modify $obj, Do not return
		},
		above: 'auto'
	};

	function initialize(opts) {
		
		options = $.extend({}, options, opts);
		
		$(document).on('click', 'html', function () {
			$('.dropdown-context').fadeOut(options.fadeSpeed);
		});
	}

	function buildMenu(data, id, subMenu) {
		var subClass = (subMenu) ? ' dropdown-context-sub' : '';
		var $menu = $('<ul class="dropdown-menu dropdown-context' + subClass + '" id="dropdown-' + id + '"></ul>');
        var i = 0;
        for(i; i<data.length; i++) {
			if (typeof data[i].divider == 'boolean' && data[i].divider) {
				$menu.append('<li class="divider"></li>');
			} else if (typeof data[i].header != 'undefined') {
				$menu.append('<li class="nav-header">' + data[i].header + '</li>');
			} else {
				if (typeof data[i].href == 'undefined') {
					data[i].href = '#';
				}
				if (typeof data[i].subMenu != 'undefined') {
					$sub = ('<li class="dropdown-submenu"><a tabindex="-1" href="' + data[i].href + '">' + data[i].text + '</a></li>');
				} else {
					$sub = $('<li><a tabindex="-1" href="' + data[i].href + '">' + data[i].text + '</a></li>');
				}
				if (typeof data[i].action != 'undefined') {
					var actiond = new Date(),
						actionID = 'event-' + actiond.getTime(),
						eventAction = data[i].action;
					$sub.find('a').attr('id', actionID);
					$(document).on('click', '#' + actionID, data[i].action);
				}
				$menu.append($sub);
				if (typeof data[i].subMenu != 'undefined') {
					var subMenuData = buildMenu(data[i].subMenu, id, true);
					$menu.find('li:last').append(subMenuData);
				}
			}
			if (typeof options.filter == 'function') {
				options.filter($menu.find('li:last'));
			}
		}
		return $menu;
	}

	function addContext(selector, data) {
		
		var d = new Date(),
			id = d.getTime();
			
		$menu = buildMenu(data, id);
		$('body').append($menu);
		
		$(document).on('contextmenu', selector, function (e) {
			e.preventDefault();
			if (typeof options.above == 'boolean' && options.above) {
				
				$('#dropdown-' + id).addClass('dropdown-context-up').css({
					top: e.pageY - 20 - $('#dropdown-' + id).height(),
					left: e.pageX - 13
				}).fadeIn(options.fadeSpeed);
				
			} else if (typeof options.above == 'string' && options.above == 'auto') {
				
				$dd = $('#dropdown-' + id);
				$dd.removeClass('dropdown-context-up');
				var autoH = $dd.height() + 12;
				
				if ((e.pageY + autoH) > window.innerHeight) {
					
					$dd.addClass('dropdown-context-up');
					$dd.css({
						top: e.pageY - 20 - autoH,
						left: e.pageX - 13
					}).fadeIn(options.fadeSpeed);
					
				} else {
					
					$dd.css({
						top: e.pageY + 10,
						left: e.pageX - 13
					}).fadeIn(options.fadeSpeed);
					
				}
			}
		});
	}
	
	function destroyContext(selector) {
		$(document).off('contextmenu', selector);
	}
	
	return {
		init: initialize,
		attach: addContext,
		destroy: destroyContext
	};
})();