gizmoMenu

gizmoMenu gives you full design control over your site's context menu. Just copy and paste one of the HTML menus styles and modify it to your liking. All HTML is exposed - allowing you to expand gizmoMenu however you like.

Example 1. Entire Page

Right click anywhere on this page to see the simple dropdown theme. All of the HTML for the context menu is directly on the page - so you can customize it however you like.

Example 2. Hamburger Menu

gizmoMenu also includes a Hamburger style Context Menu. Just choose 'gizmoBurger' for the style and everything is taken care of for you. This Context Menu is called on a specific container - right click the image to open the gizmoMenu.

Example 3. Horizontal

gizmoMenu comes with a Horizontal Context Menu, which can easily be expanded into a full blown drop down or Mega Context Menu. Right click the image to see the example.

Installation

Just add the files to your page and gizmoMenu is ready for use:

<link rel="stylesheet" href="css/gizmoMenu.css" type="text/css" />
<script src="js/jquery-2.1.3.min.js">
<script src="js/gizmoMenu.js">     
        

Usage

Call gizmoMenu on your element when the page loads, use 'body' for the entire page. Provide the name of the menu style you want to use:

$(document).ready(function(){
	$('body').gizmoMenu({
		'menu':'gizmoDropDown'	
	});
});    
        

Settings

Use gizmoMenu settings to further customize to your liking.

menu the class name of the menu to use (gizmoDropDown, gizmoBurger, gizmoHorizontal).
stay_open keep menu open when disengaging other gizmoMenus
click_to_close if clicking document should close menu

Use your own menus inside the "menu" setting!

Also includes 6 color presets to choose from! Just use the color classes: gizmoMenu_green, gizmoMenu_red, gizmoMenu_purple, gizmoMenu_blue, gizmoMenu_pink, gizmoMenu_gray