jQuery Plugin For Animated Side Icon Menu - DD Icon Menu

DD Icon Menu is a jQuery plugin which allows you to create a icon based vertical & sticky menu panel at the edge of the screen that will slide out sub menus on hover over.

Features:

• Lightweight but useful
• Easy to implement
• Supports of easing options
• Mobile browsers friendly
• Supports of infinite levels of sub menus

How to use it:

1. Load the latest version of jQuery library from google CDN

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

2. Load the jQuery DD Icon Menu plugin in your document

<link rel="stylesheet" type="text/css" href="iconmenu.css" />
<script src="iconmenu.js">

3. Create the html for the icon menu

<ul id="myiconmenu" class="iconmenu">
<li><a class="icon-list-ul" href="#" rel="csslibrary"></a></li>
<li><a class="icon-search" href="#" rel="ddcontentarea"></a></li>
<li><a class="icon-gears" href="#" rel="webtools" title="Web Tools"></a></li>
<li><a class="icon-rss" href="#" rel="[title]" title="RSS"></a></li>
<li><a class="icon-twitter" href="#" rel="[title]" title="Twitter"></a></li>
</ul>

<!- CSS Library sub menu -->

<div id="csslibrary" class="iconsubmenu dropdownmenu">
<ul class="ulmenu">
...
</ul>
</div>

<!- General Content sub menu -->

<div id="ddcontentarea" class="iconsubmenu mixedcontent">
<div class="column">
<ul>
...
</ul>
</div>
<div class="column">
<ul>
...
</ul>
</div>
</div>

<!- Web Tools sub menu -->

<div id="webtools" class="iconsubmenu dropdownmenu">
<ul class="ulmenu">
...
</ul>
</div>

4. Call the plugin with options

<script>

ddiconmenu.docinit({
menuid:'myiconmenu', // main menu ID
easing:"easeInOutCirc",
dur:500
})

</script>

---

This awesome jQuery plugin is developed by dynamicdriverepo. For more Advanced Usages, please check the demo page or visit the official website.