Lightweight Responsive jQuery & CSS3 Nav Menu Plugin - sellMenu
File Size: | 22 KB |
---|---|
Views Total: | 3283 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
sellMenu is a lightweight jQuery plugin used to create responsive, mobile-friendly, animated navigation menu for your cross-platform website. The plugin comes with more than 12 skins and 6 animations for you to use in your different web layout.
How to use it:
1. Load JQuery library together with scriptsellMenu.css
and scriptsellMenu.js
in your responsive web pages.
<link href="css/scriptsellMenu.css" rel="stylesheet"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/scriptsellMenu.js"></script>
2. Create a multi-level navigation system using nested Html lists.
<ul class="nav-demo"> <li><a href="#">Home</a> <ul> <li><a href="#">item 1</a> </li> <li><a href="#">item 2</a> </li> <li><a href="#">item 3</a> </li> </ul> </li> <li><a href="#">Categories</a> <ul> <li><a href="#">item 1</a> </li> <li><a href="#">item 2</a> </li> <li><a href="#">item 3</a> </li> </ul> </li> <li><a href="#">Pages</a> <ul> <li><a href="#">item 1</a> </li> <li><a href="#">item 2</a> </li> <li><a href="#">item 3</a> </li> </ul> </li> </ul>
3. Call the plugin on the parent element to create a basic responsive navigation menu with default theme and animation.
$(document).ready(function () { $(".nav-demo").scriptsellMenu(); };
4. Available options to customize your responsive navigation menu.
animationSpeed:150
:The amount of time to wait before re-adjusting the navigation all effectstheme:'light-sky-blue'
:deep-blue , light-sky-blue, black ,light-grey , green , amethyst, orange , Apple green , pink , bronze, Light brownanimation:'rotate'
:slide, slide-top , fadeinout , zoom, bounce , rotate , nonearrow:true
:Enables, diable dropdown arrowtooltrip:'top'
:Set tooltip display positionhoverelements:'<span>'
:The HTML fragment used for the expander.responsivemenutext:'Reponsive menu'
:You can override Reponsive menu text .dropdownWidth:250
:Set a Min-dropdown widthmenuheight:38
:Set navigation heightdeviceswidth:768
:Workable responsive width
This awesome jQuery plugin is developed by proscriptsell. For more Advanced Usages, please check the demo page or visit the official website.