jright – custom contextual menus with native look&feel

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&hellip;</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&hellip;</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.

arnaud/jright