Advanced jQuery website menu plugin. Mobile first, responsive and accessible list-based website menus that work on all devices.
CSS JavaScript HTML
Latest commit 9a2745c Jan 27, 2016 @vadikom added AMD/CommonJS compatibility for the plugin and the addons
scrolling for long sub menus now uses HW acceleration + requestAnimationFrame() when possible
scrollInterval option deprecated as it's not needed any more
some tweaks to "sm-core-css.css" and the themes to simplify the script usage - e.g. set default z-index 9999 in "sm-core-css.css", set default sub menus width 12em, etc.
new option noMouseOver - allows disabling onmouseover item/sub menus activation (i.e. make it possible to always behave like in touch mode and use just mouse clicks)
new API event "hideAll.smapi" - fired when the whole menu tree is reset (e.g. on document click, onmouseout)
added support for [data-sm-horizontal-sub] attribute to allow creating horizontal sub menus (additional CSS required for styling the sub menus)
fix: bug with calling "refresh" method when adding a new sub menu
Bootstrap add-on: rework the add-on to support dynamically created navbars - $.SmartMenus.Bootstrap.init() method now available
Bootstrap add-on: fix isCollapsible() method to properly work with right floated main menu LI elementsdded AMD/CommonJS compatibility for the plugin and the addons

README.md

SmartMenus

Advanced jQuery website menu plugin. Mobile first, responsive and accessible list-based website menus that work on all devices. Check out the demo page.

Quick start

  • Download the latest release.
  • Install with Bower: bower install smartmenus.
  • Install with npm: npm install smartmenus.
  • Clone the repo: git clone https://github.com/vadikom/smartmenus.git.

Check out the project documentation for quick setup instructions, API reference, tutorials and more.

Addons usage as modules

If you need to use any of the addons from the "addons" directory as an AMD or CommonJS module:

AMD

Make sure your SmartMenus jQuery plugin module is named jquery.smartmenus since the addons require that name. For example, in RequireJS you may need to add this in your config if you would like to use the minified version:

requirejs.config({
  "paths": {
    'jquery.smartmenus': 'jquery.smartmenus.min'
  }
  // ...

CommonJS (npm)

The addons are available as separate npm packages so you could properly install/require them in your project in addition to jquery and smartmenus:

  • Bootstrap Addon: npm install smartmenus-bootstrap

  • Keyboard Addon: npm install smartmenus-keyboard

Example with npm + Browserify

package.json:

{
  "name": "myapp-using-smartmenus",
  "version": "1.0.0",
  "license": "MIT",
  "dependencies": {
    "jquery": ">=2.1.3",
    "smartmenus": ">=1.0.0",
    "smartmenus-keyboard": ">=0.2.0"
  },
  "devDependencies": {
    "browserify": ">=9.0.3"
  }
}

entry.js:

var jQuery = require('jquery');
require('smartmenus');
require('smartmenus-keyboard');

jQuery(function() {
  jQuery('#main-menu').smartmenus();
});

Run browserify to create bundle.js: browserify entry.js > bundle.js

Homepage

http://www.smartmenus.org/

Community and support

Bugs and issues

For bugs and issues only please. For support requests please use the Community forums.

https://github.com/vadikom/smartmenus/issues