Responsive and Cross-platform jQuery Navigation Menu Plugin - Smart Menus

Responsive and Cross-platform jQuery Navigation Menu Plugin - Smart Menus
File Size: 178 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Smart Menus is jQuery Navigation Menu Plugin for creating responsive and Cross-platform multi-level drop down menus for your navigation. It comes with a lot of options for customizing your menus and supports all devices such as desktop, tablet, mobile, etc. Please resize the demo page to see how it works on mobile devices.

Features:

  • Responsive and mobile-friendly
  • Cross browser. Supports all major browsers.
  • Vertical or horizontal menus
  • Supports mega menu contents
  • Supports events and methods
  • supports drop down animations

Basic Usage:

1. Include jQuery library and jQuery Smart Menus on the web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.smartmenus.js"></script>

2. Include jQuery Smart Menus Core CSS on the page

<link href="css/sm-core-css.css" rel="stylesheet" type="text/css" />

3. Include a theme CSS on the page. Optional, you can use your own CSS, too

<link href="css/sm-blue/sm-blue.css" rel="stylesheet" type="text/css" />

4. Markup html structure

<ul id="main-menu" class="sm sm-blue">

<li><a href="#">Home</a></li>

<li><a href="#">About</a>
<ul>
<li><a href="#">Introduction to SmartMenus jQuery</a></li>
<li><a href="#">Themes</a></li>
<li><a href="#">The author</a></li>
<li><a href="#">The company</a>
<ul>
<li><a href="#">About Vadikom</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Privacy policy</a></li>
</ul>
</li>

<li><a href="#">Old SmartMenus versions</a></li>

...

</ul>

5. Call the plugin with options

<script type="text/javascript">
$(function() {
$('#main-menu').smartmenus({
subMenusSubOffsetX: 1,
subMenusSubOffsetY: -8
});
});
</script>

6. All the default settings.

  • isPopup:false: is this a popup menu (can be shown via the popupShow/popupHide methods) or a permanent menu bar
  • mainMenuSubOffsetX:0: pixels offset from default position
  • mainMenuSubOffsetY:0: pixels offset from default position
  • subMenusSubOffsetX:0: pixels offset from default position
  • subMenusSubOffsetY:0: pixels offset from default position
  • subMenusMinWidth:'10em': min-width for the sub menus (any CSS unit) - if set, the fixed width set in CSS will be ignored
  • subMenusMaxWidth:'20em': max-width for the sub menus (any CSS unit) - if set, the fixed width set in CSS will be ignored
  • subIndicators: true: create sub menu indicators - creates a SPAN and inserts it in the A
  • subIndicatorsPos: 'prepend': position of the SPAN relative to the menu item content ('prepend', 'append')
  • subIndicatorsText:'+': [optionally] add text in the SPAN (e.g. '+') (you may want to check the CSS for the sub indicators too)
  • scrollStep: 30: pixels step when scrolling long sub menus that do not fit in the viewport height
  • scrollInterval:30: interval between each scrolling step
  • scrollAccelerate:true: accelerate scrolling or use a fixed step
  • showTimeout:250: timeout before showing the sub menus
  • hideTimeout:500: timeout before hiding the sub menus
  • showDuration:0: duration for show animation - set to 0 for no animation - matters only if showFunction:null
  • showFunction:null: custom function to use when showing a sub menu (the default is the jQuery 'show'). Don't forget to call complete() at the end of whatever you do e.g.: function($ul, complete) { $ul.fadeIn(250, complete); }
  • hideDuration:0: duration for hide animation - set to 0 for no animation - matters only if hideFunction:null
  • hideFunction:function($ul, complete) { $ul.fadeOut(200, complete); }: custom function to use when hiding a sub menu (the default is the jQuery 'hide'). Ddon't forget to call complete() at the end of whatever you doe.g.: function($ul, complete) { $ul.fadeOut(250, complete); }
  • collapsibleShowDuration:0: duration for show animation for collapsible sub menus - matters only if collapsibleShowFunction:null
  • collapsibleShowFunction:function($ul, complete) { $ul.slideDown(200, complete); }: custom function to use when showing a collapsible sub menu (i.e. when mobile styles are used to make the sub menus collapsible)
  • collapsibleHideDuration:0: duration for hide animation for collapsible sub menus - matters only if collapsibleHideFunction:null
  • collapsibleHideFunction:function($ul, complete) { $ul.slideUp(200, complete); }: custom function to use when hiding a collapsible sub menu (i.e. when mobile styles are used to make the sub menus collapsible)
  • showOnClick:false: show the first-level sub menus onclick instead of onmouseover (matters only for mouse input)
  • hideOnClick:true: hide the sub menus on click/tap anywhere on the page
  • keepInViewport:true: reposition the sub menus if needed to make sure they always appear inside the viewport
  • keepHighlighted:true: keep all ancestor items of the current sub menu highlighted (adds the 'highlighted' class to the A's)
  • markCurrentItem:false: automatically add the 'current' class to the A element of the item linking to the current URL
  • markCurrentTree:true: add the 'current' class also to the A elements of all ancestor items of the current item
  • rightToLeftSubMenus:false: right to left display of the sub menus (check the CSS for the sub indicators' position)
  • bottomToTopSubMenus:false: bottom to top display of the sub menus
  • overlapControlsInIE:true:make sure sub menus appear on top of special OS controls in IE (i.e. SELECT, OBJECT, EMBED, etc.)

Change logo:

v1.0.1 (2016-11-02)

  • Added support for the data-sm-options attribute on the root <ul> element

v1.0.0(2016-01-27)

  •   added AMD/CommonJS compatibility for the plugin and the addons

v0.9.7(2015-06-01)

  • go mobile first - notable changes in the script, core CSS and themes

v0.9.7(2014-08-25)

  • allow scrolling long sub menus via touch for fixed positioned menu bars

v0.9.6(2014-03-27)

  • new theme "sm-mint"

v0.9.6beta (2014-03-21)

  • fix: mainMenuSubOffsetY was not honored when bottomToTopSubMenus: true (mainMenuSubOffsetX was used instead)

v0.9.6 (2014-02-22)

  • fix: Bootstrap addon now works in jQuery.noConflict() mode

v0.9.5 (2014-01-19)

  • Added Bootstrap Addon.

v0.9.4 (2013-12-01)

  • Added Keyboard Addon which you can optionally include on your pages in addition to the SmartMenus jQuery plugin.

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