글
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
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
'JS > jquery' 카테고리의 다른 글
jQuery Easing Plugin (0) | 2008.11.08 |
---|---|
Jquery Reference SIte (0) | 2008.11.08 |
jDialog 1.1 for jQuery - An AJAX modal creator (0) | 2008.11.08 |
Unobtrusive, cross-browser method to add icons to links (0) | 2008.11.08 |
jHelperTip 1.0 - The Multi-Use Tooltip for jQuery (0) | 2008.11.08 |
jSize 1.0 - a window slider/resizer wonder for jQuery (0) | 2008.11.08 |
jFlow 1.1 - The Ultra-lightweight Fluid Content Slider for jQuery (0) | 2008.11.08 |
jFade 1.0 - color fader for jQuery (0) | 2008.11.08 |
JQuery Download (0) | 2008.11.08 |
MouseOver In Fade (0) | 2008.11.02 |
RECENT COMMENT