jright – custom contextual menus with native look&feel ![](https://camo.githubusercontent.com/5666058a41b42f8b0b9e9d427093920f5dcc8ab2d963557caa88fb1b289f61e3/687474703a2f2f7374696c6c6d61696e7461696e65642e636f6d2f61726e6175642f6a72696768742e706e67)
jright is a jQuery plugin that enables using custom contextual menus with a native look&feel.
Demo
Check dist/demo.html
Usage
Add the following lines just before your </head>
tag:
<link href="styles/all.css" media="screen" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.client.js" type="text/javascript"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="js/selectivizr.js"></script>
<![endif]-->
<script src="jquery.jright.min.js" type="text/javascript">jQuery(function($) { $('#menu').jright() })</script>
Then create your customized menu:
<ul id="menu" class="jright">
<li class="disabled"><span>jright menu</span></li>
<li class="separator"></li>
<li><span>Embed…</span></li>
<li class="sub"><span>Share</span>
<ul>
<li><span>Facebook</span></li>
<li><span>Twitter</span></li>
</ul>
</li>
<li class="sub"><span>Download</span>
<ul>
<li class="disabled"><span>Soon…</span></li>
</ul>
</li>
</ul>
Options
The basic usage is this one-liner:
$('#menu').jright();
But options can be passed as arguments:
style
The style can be defined in the options.
$('#menu').jright({
style: 'win.seven'
});
style
being either:
native
: the current OS is read so that the corresponding style will be used ;inherit
: classes of clicked elements define the style that will be used (multiple styles can then be used within a single page) ;- a specific style:
mac
,win.xp
,win.seven
…
Build
Building jright consists in two actions:
- Compiling the stylesheets from the SASS format to CSS
- Minifying the script
Prerequisites:
Then just run make
.
License
jright is open source and is licensed under the MIT license.