Technical info
- Works on IE6, IE7, IE8, Opera, Firefox, Chrome, Safari
- Requres MooTools 1.2+ library
Header
Include MooTools 1.2 from Google AJAX Libraries API, DeviantMenu.js and DeviantMenu.css:
<link rel="stylesheet" href="DeviantMenu.css" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script> <script type="text/javascript" src="DeviantMenu.js"></script>If you want to Deviant Menu be compatible with IE6, you have to add IE7.js script:
<!--[if lt IE 7]> <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script> <![endif]-->
XHTML Structure
DIV will be replaced by Deviant Menu only if it has deviant class:
<div class="deviant">
<ul>
<li><a href="#new">New</a>
<ul>
<li><a href="#newcorporate">Corporate Use</a></li>
<li><a href="#newprivate">Private Use</a></li>
</ul>
</li>
<li><a href="#used">Used</a>
<ul>
<li><a href="#usedcorporate">Corporate Use</a></li>
<li><a href="#usedprivate">Private Use</a></li>
</ul>
</li>
<li><a href="#featured">Featured</a></li>
<li><a href="#toprated">Top Rated</a></li>
<li><a href="#prices">Prices</a></li>
</ul>
</div>
You may specify menu with one li at first level imitating title:
<div class="deviant">
<ul><li><a href="#mainmenu" class="title">Title</a><ul>
<li><a href="#new">New</a>
<ul>
<li><a href="#newcorporate">Corporate Use</a></li>
<li><a href="#newprivate">Private Use</a></li>
</ul>
</li>
<li><a href="#used">Used</a>
<ul>
<li><a href="#usedcorporate">Corporate Use</a></li>
<li><a href="#usedprivate">Private Use</a></li>
</ul>
</li>
<li><a href="#featured">Featured</a></li>
<li><a href="#toprated">Top Rated</a></li>
<li><a href="#prices">Prices</a></li>
</ul></li></ul>
</div>
Usage
Search for divs in some element:
$('selector').DeviantMenu(options);
Search in entire document:
$(document.body).DeviantMenu(options);Options parameter is described in Methods section
Contact: sher@sher.pl