Getting tired of the default context menu (the one that appears when you right click on a web page) that are being displayed in all browsers? Now, web developers can focus on designing the menu itself rather than worrying about the javascript code. This tutorial will assume that you have enough CSS knowledge and familiarity using jQuery to begin with. Believe it or not… sub menus are and should be a CSS problem. Here’s a sample of the submenu CSS
DownLoad

How lightweight is jContext? It’s approximately 0.6kB when minified. Usage$(obj).showMenu({ opacity:0.8, query: "#myMenu2", zindex: 2000 }); opacity: can be from 0 - 1.0, opacity of the menu being displayed query: can be any object or CSS selector that jQuery recognizes zindex: z-index of the menu being displayed
Full Example<span>Right Click me</span> <p>You can right Click me too </p> <div id="myMenu"> <ul> <li><a href="#">Edit This Type</a></li> <li><a href="#">Create New Type</a></li> <li><a href="#">Book a Flight</a></li> </ul> </div> <div id="myMenu2"> <ul> <li><a href="#">Create New Class</a></li> <li><a href="#">Delete Class</a></li> <li><a href="#">Get a Job</a></li> </ul> </div> <script language="javascript" type="text/javascript" src="j/jquery-1.2.3.min.js"></script> <script language="javascript" type="text/javascript" src="j/jquery.jcontext.1.0.js"></script> <script language="javascript"> $(document).ready(function(){ $("span").showMenu({ opacity:0.8, query: "#myMenu" }); $("p").showMenu({ opacity:0.8, query: "#myMenu2" }); }); </script>
Demo
Download Now
by Anna 안나 2008. 11. 8. 02:39