Lightweight Responsive jQuery & CSS3 Nav Menu Plugin - sellMenu

File Size: 22 KB
Views Total: 3267
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Lightweight Responsive jQuery & CSS3 Nav Menu Plugin - sellMenu

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 effects
  • theme:'light-sky-blue':deep-blue , light-sky-blue, black ,light-grey , green , amethyst, orange , Apple green , pink , bronze, Light brown
  • animation:'rotate':slide, slide-top , fadeinout , zoom, bounce , rotate , none
  • arrow:true:Enables, diable dropdown arrow
  • tooltrip:'top':Set tooltip display position
  • hoverelements:'<span>':The HTML fragment used for the expander.
  • responsivemenutext:'Reponsive menu':You can override Reponsive menu text .
  • dropdownWidth:250:Set a Min-dropdown width
  • menuheight:38:Set navigation height
  • deviceswidth: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.