Smart Menu Navigation Responsive and Cross Platform jQuery Plugin

byAdmin -December 26, 2022

0

Smart Menu is a jQuery Navigation Menu plugin for creating highly responsive and cross-platform multilevel drop-down menu for your site 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

Addons Available:

smartmenus-bootstrap: For Bootstrap 3
smartmenus-bootstrap-4: For Bootstrap 4
smartmenus-keyboard: Keyboard addon

How to use it:

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

<!-- Core -->
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/jquery.smartmenus.min.js"></script>

<!-- Addons -->
<script src="/path/to/dist/addons/bootstrap-4/jquery.smartmenus.bootstrap-4.min.js"></script>
<script src="/path/to/dist/addons/bootstrap/jquery.smartmenus.bootstrap.min.js"></script>
<script src="/path/to/dist/addons/keyboard/jquery.smartmenus.keyboard.min.js"></script>

2. Include the jQuery Smart Menus' core on the page.

<link href="/path/to/dist/css/sm-core-css.css" rel="stylesheet" />

3. Include a theme CSS of your choice on the page.

<!-- Blue Theme -->
<link href="/path/to/dist/css/sm-blue/sm-blue.css" rel="stylesheet" />

<!-- Clean Theme -->
<link href="/path/to/dist/css/sm-clean/sm-clean.css" rel="stylesheet" />

<!-- Mint Theme -->
<link href="/path/to/dist/css/sm-mint/sm-mint.css" rel="stylesheet" />

<!-- Simple Theme -->
<link href="/path/to/dist/css/sm-simple/sm-simple.css" rel="stylesheet" />

4. The required HTML structure for the smart menu.

<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>
  <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 on the top container. Done.

$(function() {
  $('#main-menu').smartmenus({
    // options here
  });
});

6. All default options to customize the smart menu.

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
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
noMouseOver: false: disable sub menus activation onmouseover (i.e. behave like in touch mode - use just mouse clicks) (matters only for mouse input)
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
collapsibleBehavior: 'default': parent items behavior in collapsible (mobile) view ('default', 'toggle', 'link', 'accordion', 'accordion-toggle', 'accordion-link'). 'default' - first tap on parent item expands sub, second tap loads its link. 'toggle' - the whole parent item acts just as a toggle button for its sub menu (expands/collapses on each tap). 'link' - the parent item acts as a regular item (first tap loads its link), the sub menu can be expanded only via the +/- button. 'accordion' - like 'default' but on expand also resets any visible sub menus from deeper levels or other branches. 'accordion-toggle' - like 'toggle' but on expand also resets any visible sub menus from deeper levels or other branches. 'accordion-link' - like 'link' but on expand also resets any visible sub menus from deeper levels or other branches
bootstrapHighlightClasses: 'text-dark bg-light': Custom option(s) for the Bootstrap 4 addon

7. HTML data attributes.

<!-- Horizontal Sub Menus -->
<li data-sm-horizontal-sub="true">
  <a href="#">Item</a>
  <ul>
    <li><a href="#">Sub item 1</a></li>
    <li><a href="#">Sub item 2</a></li>
    ...
  </ul>
</li>

<!-- Pass options via data attributes -->
<ul id="main-menu" class="sm sm-blue" 
    data-sm-options='{}'>
    ...
</ul>

<!-- Reverse the horizontal alignment of a specific sub menu -->
<li data-sm-reverse="true">
  <a href="#">Item</a>
  <ul>
    <li><a href="#">Sub item 1</a></li>
    <li><a href="#">Sub item 2</a></li>
    ...
  </ul>
</li>

<!-- Tells the script to skip this navbar and not apply any SmartMenus features to it so it will behave like a regular Bootstrap navbar. -->
<ul class="nav navbar-nav" data-sm-skip="true">
  ...
</ul>

<!-- Tells the script to not apply SmartMenus' specific behavior to this navbar in collapsible mode (mobile view). -->
<ul class="nav navbar-nav" data-sm-skip-collapsible-behavior="true">
  ...
</ul>

8. API methods.

// destroy all menus
$.SmartMenus.destroy();

// hide all sub menus
$.SmartMenus.hideAll();

// destroy a menu
$('#main-menu').smartmenus('destroy');

// disable the menu
$('#main-menu').smartmenus('disable');

// disable the menu but don't display an overlay over the main menu
$('#main-menu').smartmenus('disable', true);

// enable the menu
$('#main-menu').smartmenus('enable');

// activate the item
$('#main-menu').smartmenus('itemActivate', $('a#myItem'));

// activate the item and focus it
$('#main-menu').smartmenus('itemActivate', $('a#myItem'));
$('a#myItem')[0].focus();

// hide all sub menus
$('#main-menu').smartmenus('menuHideAll');

// hide a popup menu
$('#popup-menu').smartmenus('popupHide');

// hide a popup menu immediately without a delay
$('#popup-menu').smartmenus('popupHide', true);

// show the popup at left:100px;top:100px;
$('#popup-menu').smartmenus('popupShow', '100px', '100px');

// show the popup right below some target element
var $targetElm = $('#targetElm'),
    targetOffset = $targetElm.offset();
$('#popup-menu').smartmenus('popupShow', targetOffset.left, targetOffset.top + $targetElm.outerHeight());

// refresh the menu after the DOM operations
$('#main-menu').smartmenus('refresh');

// set focus on an item
$('a#myItem')[0].focus();

// blur an item
$('a#myItem')[0].blur();

9. Events.

$('#main-menu').on('activate.smapi', function(e, item) {
  // do something
});

$('#main-menu').on('beforefirstshow.smapi', function(e, menu) {
  // do something
})

$('#main-menu').on('beforehide.smapi', function(e, menu) {
  // do something
});

$('#main-menu').on('beforeshow.smapi', function(e, menu) {
  // do something
});

$('#main-menu').on('blur.smapi', function(e, item) {
  // check namespace if you need to differentiate from a regular DOM event fired inside the menu tree
  if (e.namespace == 'smapi') {
    // your handler code
  }
});

$('#main-menu').on('click.smapi', function(e, item) {
  // check namespace if you need to differentiate from a regular DOM event fired inside the menu tree
  if (e.namespace == 'smapi') {
    // your handler code
  }
});

$('#main-menu').on('focus.smapi', function(e, item) {
  // check namespace if you need to differentiate from a regular DOM event fired inside the menu tree
  if (e.namespace == 'smapi') {
    // your handler code
  }
});

$('#main-menu').on('hide.smapi', function(e, menu) {
  // do something
});

$('#main-menu').on('hideAll.smapi', function(e) {
  // do something
});

$('#main-menu').on('mouseenter.smapi', function(e, item) {
  // check namespace if you need to differentiate from a regular DOM event fired inside the menu tree
  if (e.namespace == 'smapi') {
    // your handler code
  }
});

$('#main-menu').on('mouseleave.smapi', function(e, item) {
  // check namespace if you need to differentiate from a regular DOM event fired inside the menu tree
  if (e.namespace == 'smapi') {
    // your handler code
  }
});

$('#main-menu').on('select.smapi', function(e, item) {
  // do something
});

$('#main-menu').on('show.smapi', function(e, menu) {
  // do something
});

Live Demo

See the Pen Smart Menu Navigation Responsive and Cross Platform jQuery by Plugin JS (@pluginjs) on CodePen.

File Info

File Name :: smartmenus-master.zip
Size :: 234.73KB
Site Download :: Github.com
Official Website:: Go to website
License:: MIT

Smart Menu Navigation Responsive and Cross Platform jQuery Plugin

Features:

Addons Available:

Installation

How to use it:

Live Demo

File Info

File Download