demo/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Audero Context Menu Demo - Created by Aurelio De Rosa</title>
<meta charset="UTF-8"/>
<style>
body
{
width: 500px;
margin: 10px auto;
}
h1
{
text-align: center;
}
.area
{
height: 100px;
padding: 10px;
margin-bottom: 20px;
background-color: #ADD8E6;
}
#area-2
{
position: relative;
}
</style>
<link rel="stylesheet" href="../src/css/jquery.auderoContextMenu.css"/>
</head>
<body>
<h1>Audero Context Menu Demo - Created by Aurelio De Rosa</h1>
<h2>Example 1 - Basic</h2>
<p>
This example shows you the basic behavior of Audero Context Menu.
</p>
<ul id="context-menu-1" class="audero-context-menu">
<li><a href="http://www.audero.it" target="_blank">Audero</a></li>
<li><a href="https://twitter.com/AurelioDeRosa" target="_blank">Aurelio De Rosa on Twitter</a></li>
<li><a href="https://github.com/AurelioDeRosa" target="_blank">Aurelio De Rosa on GitHub</a></li>
</ul>
<div id="area-1" class="area">
Right-click here to show the custom menu.<br />
Left-click here or click outside this area and the menu will disappear.
</div>
<h2>Example 2 - Menu with fixed position</h2>
<p>
This example shows you how, with few changes, you can display the menu in a fixed position. All you have to do
is to place the menu (the <ul>) inside the element you want to attach the plugin and set the CSS
<code>position</code> attribute of the latter to <code>relative</code>.
</p>
<div id="area-2" class="area">
Right-click here to show another custom menu with <b>fixed position</b>.<br />
Left-click here or click outside this area and the menu will disappear.
<ul id="context-menu-2" class="audero-context-menu">
<li><a href="http://www.audero.it" target="_blank">Audero</a></li>
<li><a href="https://www.jquery.com" target="_blank">jQuery.com</a></li>
</ul>
</div>
<h2>Example 3 - Bind left click</h2>
<p>
This example shows how you can have the custom context menu also for the mouse left button click event.
</p>
<ul id="context-menu-3" class="audero-context-menu">
<li><a href="https://plus.google.com/111199469497044249730" target="_blank">Aurelio De Rosa on Google+</a></li>
<li><a href="http://it.linkedin.com/in/aurelioderosa/en" target="_blank">Aurelio De Rosa on LinkedIn</a></li>
</ul>
<div id="area-3" class="area">
Click (right or left) here to show the custom menu.<br />
Click outside this area and the menu will disappear.<br />
Click on the button below to cancel the effect of the plugin.
</div>
<button id="button-destroy">Destroy</button>
<p>
Plugin created by <a href="http://www.audero.it">Aurelio De Rosa</a>
(<a href="https://twitter.com/AurelioDeRosa">@AurelioDeRosa</a>).
</p>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="../src/js/jquery.auderoContextMenu.js"></script>
<script>
$("#area-1").auderoContextMenu("context-menu-1");
$("#area-2").auderoContextMenu({
idMenu: "context-menu-2",
posX: 10,
posY: 20
});
$("#area-3").auderoContextMenu({
idMenu: "context-menu-3",
bindLeftClick: true
});
$("#button-destroy").click(function() {
$("#area-3").auderoContextMenu("destroy");
});
</script>
</body>
</html>