jQuery Plugin For Animated Side Icon Menu - DD Icon Menu
File Size: | 9.89KB |
---|---|
Views Total: | 10329 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.