SmartMenus

https://www.smartmenus.org/docs/
Admin
SmartMenus is a jQuery plugin that creates responsive, customizable dropdown menus with support for...
Tokens:12,649
Snippets:116
Trust Score:9.6
Update:6 months ago
Show doc for...
Tokens:
Raw
### MasterPage Script and Link Definitions

Source: https://www.smartmenus.org/docs

These are example script and link definitions for a MasterPage, using Page.ResolveURL for correct path resolution. They include jQuery, jQuery UI, Smartmenus core, and Smartmenus theme CSS.

```html
<script src="<%# Page.ResolveURL("~/Scripts/jquery-1.7.0.min.js") %>" type="text/javascript"></script>

<link href="<%# Page.ResolveURL("/~Theme/redmond/jquery-ui-1.10.3.custom.min.css") %>" rel="stylesheet" type="text/css" />

<script src="<%# Page.ResolveURL("~/Smartmenu/jquery.smartmenus.min.js") %>" type="text/javascript"></script>
    
<link href="<%# Page.ResolveURL("~/Smartmenu/sm-core-css.css") %>" rel="stylesheet" type="text/css" media="screen" />

<link href="<%# Page.ResolveURL("~/Smartmenu/sm-blue.css") %>" rel="stylesheet" type="text/css" media="screen" />
```

--------------------------------

### beforefirstshow Event

Source: https://www.smartmenus.org/docs

Fired only once for each sub menu, right before it's shown for the first time. You could use it, for example, for some initialization tasks that need to be called just once. You can cancel the event with `return false` and the sub menu will not be shown.

```APIDOC
## beforefirstshow Event

### Description
Fired only once for each sub menu, right before it's shown for the first time. You could use it, for example, for some initialization tasks that need to be called just once. You can cancel the event with `return false` and the sub menu will not be shown.

### Cancelable
Yes

### Arguments
- **e** (jQuery.Event) - The jQuery.Event object.
- **menu** (HTMLElement) - The sub menu `<ul>` element.

### Code Example
```javascript
$("#main-menu").on("beforefirstshow.smapi", function(e, menu) {});
```
```

--------------------------------

### Implement custom theme CSS

Source: https://www.smartmenus.org/docs

Include sm-core-css.css and define desktop layout overrides within a media query.

```css
/* Your rules to style the menu in mobile view (collapsible mode) here... */


@media (min-width: 768px) {

  /* Switch to desktop layout
  -----------------------------------------------
     These transform the menu tree from
     collapsible to desktop (navbar + dropdowns)
  -----------------------------------------------*/
  /* start... (it's not recommended editing these rules) */
  .sm-mytheme ul{position:absolute;width:12em;}
  .sm-mytheme li{float:left;}
  .sm-mytheme.sm-rtl li{float:right;}
  .sm-mytheme ul li,.sm-mytheme.sm-rtl ul li,.sm-mytheme.sm-vertical li{float:none;}
  .sm-mytheme a{white-space:nowrap;}
  .sm-mytheme ul a,.sm-mytheme.sm-vertical a{white-space:normal;}
  .sm-mytheme .sm-nowrap > li > a,.sm-mytheme .sm-nowrap > li > :not(ul) a{white-space:nowrap;}
  /* ...end */


  /* Your rules to style the menu in desktop view here... */
}
```

--------------------------------

### Instance Methods

Source: https://www.smartmenus.org/docs

These methods are available for each individual menu instance.

```APIDOC
## Instance Methods

### blur

Use the native JavaScript method for any menu item's `<a>` element if you need. This will deactivate the item and hide any sub menus.

### Method

`$('a#myItem')[0].blur();`

### Description

This method simulates a blur event on a menu item, effectively deactivating it and closing any associated sub menus.

### Code Example

```javascript
$('a#myItem')[0].blur();
```

### destroy

Destroys the menu instance and cleans up.

### Method

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

### Description

Call this method on a specific menu instance to remove it and its associated event listeners and styles from the DOM.

### Code Example

```javascript
$('#main-menu').smartmenus('destroy');
```

### disable

Disables the menu and optionally displays a transparent overlay `<div>` over the main menu.

### Method

`$('#main-menu').smartmenus('disable', [noOverlay]);`

### Arguments

- **noOverlay** (Boolean) - Optional. If `true` is passed, no overlay will be displayed over the main menu. Defaults to `false`.

### Description

Disables user interaction with the menu. An optional overlay can be shown to visually indicate the disabled state.

### Code Example

```javascript
// 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

Enable the menu after it has been disabled.

### Method

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

### Description

Re-enables a previously disabled menu, allowing user interaction.

### Code Example

```javascript
$('#main-menu').smartmenus('enable');
```

### focus

Use the native JavaScript method for any menu item's `<a>` element to send keyboard focus to it. Note that you may need to call `itemActivate` first to make sure the menu containing the item is visible when you try to focus it, otherwise the item might not be focused by the browser.

### Method

`$('a#myItem')[0].focus();`

### Description

Programmatically sets keyboard focus to a specific menu item. Ensure the item's menu is visible before calling this.

### Code Example

```javascript
$('a#myItem')[0].focus();
```

### itemActivate

Activates any menu item. This will show its sub menu (if the item has a sub menu). If you want to also send keyboard focus to the item, you can additionally call the `focus` method.

### Method

`$('#main-menu').smartmenus('itemActivate', $a);`

### Arguments

- **$a** (jQuery) - The jQuery wrapped `<a>` element of the item you would like to activate.

### Description

Simulates a click or activation on a menu item, triggering its associated sub menu to display if one exists.

### Code Example

```javascript
// 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();
```

### menuHideAll

Hides (resets) all sub menus.

### Method

`$('#main-menu').smartmenus('menuHideAll');`

### Description

Closes all sub menus that are currently open for this specific menu instance.

### Code Example

```javascript
$('#main-menu').smartmenus('menuHideAll');
```

### popupHide

Hides any popup menu. A menu is a popup menu when the `isPopup: true` option is set. When `isPopup: false` the main menu is permanent (always visible) and cannot be hidden with this method.

### Method

`$('#popup-menu').smartmenus('popupHide', [noHideTimeout]);`

### Arguments

- **noHideTimeout** (Boolean) - Optional. If `true` is passed, the menu will be hidden immediately, otherwise the `hideTimeout` option specifies the delay before hiding the popup menu. Defaults to `false`.

### Description

Hides a popup menu instance. The hiding behavior can be immediate or delayed based on configuration.

### Code Example

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

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

### popupShow

Shows any popup menu. A menu is a popup menu when the `isPopup: true` option is set. When `isPopup: false` the main menu is permanent (always visible) and cannot be shown with this method.

### Method

`$('#popup-menu').smartmenus('popupShow', left, top);`

### Arguments

- **left** (String) - Pass a value for the CSS `left` declaration to be set for the popup menu before it is shown.
- **top** (String) - Pass a value for the CSS `top` declaration to be set for the popup menu before it is shown.

### Description

Displays a popup menu at a specified position. The `left` and `top` arguments control the CSS positioning.

### Code Example

```javascript
// 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

Refreshes (re-initializes) the menu after any DOM operations have been applied - e.g. adding/removing items and sub menus or completely replacing the `innerHTML` of the root `<ul>` element.

### Method

`$('#main-menu').smartmenus('refresh');`

### Description

Call this method after making structural changes to the menu's DOM (like adding or removing list items) to ensure SmartMenus correctly recognizes and applies its functionality to the updated structure.

### Code Example

```javascript
var $menu = $('#main-menu');

// append a new main menu item
$menu.append('<li><a href="#">New item</a></li>');

// add a sub menu with 3 items to the new main menu item
$menu.children('li:last').append('<ul>\n  <li><a href="#">New item</a></li>\n  <li><a href="#">New item</a></li>\n  <li><a href="#">New item</a></li>\n</ul>');

// refresh the menu after the DOM operations
$menu.smartmenus('refresh');
```
```

--------------------------------

### Apply main menu classes

Source: https://www.smartmenus.org/docs

Use the required sm class for all menus, and optionally add sm-vertical for vertical layouts.

```html
<ul id="main-menu" class="sm"> ...
```

```html
<ul id="main-menu" class="sm sm-vertical"> ...
```

--------------------------------

### Set menu options with data-sm-options

Source: https://www.smartmenus.org/docs

Apply to the root <ul> element to override JavaScript initialization options. Values must be valid JSON.

```html
<ul id="main-menu" class="sm sm-blue" data-sm-options='{ "showTimeout": 150, "subIndicators": false, "subMenusMinWidth": "250px" }'>...
```

--------------------------------

### SmartMenus Configuration Options

Source: https://www.smartmenus.org/docs

A comprehensive list of configuration options for customizing SmartMenus behavior.

```APIDOC
## SmartMenus Configuration Options

### Description
Configuration options for the SmartMenus library to control menu behavior, animations, and display logic.

### Options
- **bootstrapHighlightClasses** (String) - CSS class(es) for highlighting expanded parent dropdown items. Default: 'text-dark bg-light'.
- **bottomToTopSubMenus** (Boolean) - Determines if sub menus display from bottom to top. Default: false.
- **collapsibleBehavior** (String) - Parent items behavior in collapsible (mobile) view. Values: 'default', 'toggle', 'link', 'accordion', 'accordion-toggle', 'accordion-link'. Default: 'default'.
- **collapsibleHideDuration** (Integer) - Duration for hide animation for collapsible sub menus. Default: 0.
- **collapsibleHideFunction** (Function) - Custom function to use when hiding a collapsible sub menu. Default: function($ul, complete) { $ul.slideUp(200, complete); }.
- **collapsibleShowDuration** (Integer) - Duration for show animation for collapsible sub menus. Default: 0.
- **collapsibleShowFunction** (Function) - Custom function to use when showing a collapsible sub menu. Default: function($ul, complete) { $ul.slideDown(200, complete); }.
- **hideDuration** (Integer) - Duration in milliseconds for hide animation. Default: 0.
- **hideFunction** (Function) - Custom function to use when hiding a sub menu. Default: function($ul, complete) { $ul.fadeOut(200, complete); }.
- **hideOnClick** (Boolean) - Determines whether to hide sub menus on click/tap anywhere on the page. Default: true.
- **hideTimeout** (Integer) - Timeout in milliseconds before hiding sub menus on mouseout/focusout. Default: 500.
- **isPopup** (Boolean) - Determines whether the menu is a popup menu or a permanent menu bar. Default: false.
- **keepHighlighted** (Boolean) - Determines whether all ancestor items of the current sub menu should be kept highlighted. Default: true.
- **keepInViewport** (Boolean) - Determines whether the sub menus should be repositioned to stay in the viewport. Default: true.
- **mainMenuSubOffsetX** (Integer) - Horizontal offset in pixels for first-level sub menus. Default: 0.
- **mainMenuSubOffsetY** (Integer) - Vertical offset in pixels for first-level sub menus. Default: 0.
- **markCurrentItem** (Boolean) - Automatically add 'current' class to the item linking to the current page URL. Default: false.
- **markCurrentTree** (Boolean) - Automatically add 'current' class to all ancestor items. Default: true.
- **noMouseOver** (Boolean) - Disables mouseover interaction. Default: false.
```

--------------------------------

### Handle First Submenu Show Event

Source: https://www.smartmenus.org/docs

Fired only once for each submenu, right before it's shown for the first time. Useful for one-time initialization tasks. Can be canceled.

```javascript
$("#main-menu").on("beforefirstshow.smapi", function(e, menu) {});
```

--------------------------------

### Global Methods

Source: https://www.smartmenus.org/docs

These methods are global for all menu instances initialized on the page.

```APIDOC
## Global Methods

### destroy

Destroys all menu instances initialized on the page and cleans up all associated resources.

### Method

`$.SmartMenus.destroy()`

### Description

This method should be called when you want to completely remove all SmartMenus instances from the page and free up memory.

### Code Example

```javascript
$.SmartMenus.destroy();
```

### hideAll

Hides (resets) all sub menus of all menu instances on the page.

### Method

`$.SmartMenus.hideAll()`

### Description

Use this method to close all currently open sub menus across all SmartMenus instances on the page.

### Code Example

```javascript
$.SmartMenus.hideAll();
```
```

--------------------------------

### Basic HTML Menu Structure

Source: https://www.smartmenus.org/docs

Define your menu using a standard unordered list with the 'sm' class. Add theme classes like 'sm-blue' for styling.

```html
<ul id="main-menu" class="sm sm-blue">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a>
    <ul>
      <li><a href="#">Item 2-1</a></li>
      <li><a href="#">Item 2-2</a></li>
      <li><a href="#">Item 2-3</a></li>
    </ul>
  </li>
  <li><a href="#">Item 3</a></li>
</ul>
```

--------------------------------

### SmartMenus Configuration Options

Source: https://www.smartmenus.org/docs

Configuration options for SmartMenus plugin.

```APIDOC
## SmartMenus Configuration Options

This section details the various configuration options available for the SmartMenus jQuery plugin.

### Configuration Options

- **overlapControlsInIE** (Boolean) - Optional - Determines whether the script should make sure the sub menus appear on top of special OS controls in Internet Explorer. Deprecated and removed in v1.1.0. Default: `true`
- **rightToLeftSubMenus** (Boolean) - Optional - Determines whether the sub menus should be displayed from right to left instead of left to right. Default: `false`
- **scrollAccelerate** (Boolean) - Optional - Determines whether to accelerate scrolling or use a fixed step for long sub menus that do not fully fit in the viewport height. Default: `true`
- **scrollStep** (Integer) - Optional - Step in pixels when scrolling long sub menus that do not fit in the viewport height. Default: `30`
- **showDuration** (Integer) - Optional - The duration in milliseconds for show animation. Set it to 0 for no animation. Default: `0`
- **showFunction** (null, Function) - Optional - Custom function to use when showing a sub menu. Default: `null`. Example: `showFunction: function($ul, complete) { $ul.fadeIn(250, complete); }`
- **showOnClick** (Boolean) - Optional - Determines whether to show the first-level sub menus onclick instead of onmouseover. Default: `false`
- **showTimeout** (Integer) - Optional - The timeout in milliseconds before showing the sub menus on mouseover/focusin. Default: `250`
- **subIndicators** (Boolean) - Optional - Determines whether to create sub menu indicators. Default: `true`
- **subIndicatorsPos** (String) - Optional - Position of the sub menu indicator `<span>` relative to the menu item content. Possible values: `'prepend'`, `'append'`. Default: `'append'`
- **subIndicatorsText** (String) - Optional - A text string to be added in the sub menu indicator `<span>`. Default: `''`
- **subMenusMaxWidth** (String) - Optional - Max-width for the sub menus in any valid CSS unit. Default: `'20em'`
- **subMenusMinWidth** (String) - Optional - Min-width for the sub menus in any valid CSS unit. Default: `'10em'`
- **subMenusSubOffsetX** (Integer) - Optional - Allows setting a horizontal offset in pixels from the default position for the second+ level sub menus. Default: `0`
- **subMenusSubOffsetY** (Integer) - Optional - Allows setting a vertical offset in pixels from the default position for the second+ level sub menus. Default: `0`

```

--------------------------------

### Create CleanMenu Class (VB.NET)

Source: https://www.smartmenus.org/docs

This VB.NET class generates a clean, nested unordered list from the site map, suitable for navigation menus. It requires the Microsoft.VisualBasic namespace.

```vbnet
Imports Microsoft.VisualBasic

Partial Public Class CleanMenu
    Inherits System.Web.UI.MasterPage

    Private SitemapValue As String

    Protected Property CleanMenu() As String
        Get
            Return SitemapValue
        End Get
        Set(value As String)
            SitemapValue = value
        End Set
    End Property

    Public Sub New(ByVal NavgiationListID As String, ByVal NavigationListClass As String)
        SitemapValue = GenerateSitemap(NavgiationListID, NavigationListClass)
    End Sub

    Public Function GetCleanMenu() As String
        Return SitemapValue
    End Function

    Private Function GenerateSitemap(ByVal NavgiationListID As String, ByVal NavigationListClass As String) As String
        Dim sb As New StringBuilder
        ' Examine the RootNode, and navigate the SiteMap relative to it.

        sb.Append("<ul id=\"" & NavgiationListID & "\" class=\"" & NavigationListClass & "\">")
        sb.Append("<li><a href=\"" & ResolveClientUrl(SiteMap.RootNode.Url) & "\">Homepage</a></li>")
        ' What nodes are children of the RootNode?
        If (SiteMap.RootNode.HasChildNodes) Then
            Dim rootNodesChildrenEnumerator As IEnumerator = SiteMap.RootNode.ChildNodes.GetEnumerator()
            Dim node As SiteMapNode
            While (rootNodesChildrenEnumerator.MoveNext())
                node = CType(rootNodesChildrenEnumerator.Current, SiteMapNode)
                If node.Url IsNot Nothing Then
                    sb.Append("<li><a href=\"" & ResolveClientUrl(node.Url) & "\">" & rootNodesChildrenEnumerator.Current.ToString() & "</a>" & vbCrLf)
                Else
                    sb.Append("<li>" & rootNodesChildrenEnumerator.Current.ToString() & vbCrLf)
                End If

                sb.Append(vbTab & List_Childnodes(CType(rootNodesChildrenEnumerator.Current, SiteMapNode)))
                sb.Append("</li>")
            End While
        End If
        sb.Append("</ul>")
        Return sb.ToString
    End Function

    Private Function List_Childnodes(Current_Node As SiteMapNode) As String
        Dim sb As New StringBuilder

        ' What nodes are children of the function parameter?
        If (Current_Node.HasChildNodes) Then
            Dim childNodesEnumerator As IEnumerator = Current_Node.ChildNodes.GetEnumerator()

            sb.Append(vbTab & "<ul>")
            While (childNodesEnumerator.MoveNext())
                ' Prints the Title of each node.
                Dim node As SiteMapNode = CType(childNodesEnumerator.Current, SiteMapNode)
                sb.Append(vbTab & "<li>")
                sb.Append("<a href=\"" & ResolveClientUrl(node.Url) & "\">")
                sb.Append(childNodesEnumerator.Current.ToString())
                sb.Append("</a>")
                ' this is how the recursion captures all child nodes                
                sb.Append(List_Childnodes(node))
                sb.Append("</li>" & vbCrLf)

            End While
            sb.Append("</ul>" & vbCrLf)
        End If

        Return sb.ToString
    End Function
End Class
```

--------------------------------

### Initialize SmartMenus with jQuery

Source: https://www.smartmenus.org/docs

Initialize the SmartMenus plugin on your menu element using jQuery's document ready function.

```javascript
$(function() {
  $('#main-menu').smartmenus();
});
```

--------------------------------

### Enable RTL Support

Source: https://www.smartmenus.org/docs

Apply the sm-rtl class to the root ul element to enable right-to-left text support.

```html
<ul id="main-menu" class="sm sm-rtl sm-blue"> ...
<!-- or -->
<ul id="main-menu" class="sm sm-rtl sm-vertical sm-blue"> ...
```

--------------------------------

### Configure collapsibleShowFunction

Source: https://www.smartmenus.org/docs

Customizes the show animation for collapsible sub menus. Ensure the complete() callback is executed after the animation finishes.

```javascript
collapsibleShowFunction: function($ul, complete) { $ul.slideDown(250, complete); }
```

--------------------------------

### Show a Popup Menu

Source: https://www.smartmenus.org/docs

Shows a popup menu instance at specified coordinates. This method is only applicable to menus initialized with `isPopup: true`.

```javascript
// 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());
```

--------------------------------

### Include SmartMenus CSS Files

Source: https://www.smartmenus.org/docs

Include the core SmartMenus CSS and an optional theme like 'sm-blue' in the head section of your HTML.

```html
<!-- SmartMenus core CSS (required) -->
<link href='sm-core-css.css' rel='stylesheet' type='text/css' />

<!-- "sm-blue" menu theme (optional, you can use your own CSS, too) -->
<link href='sm-blue/sm-blue.css' rel='stylesheet' type='text/css' />
```

--------------------------------

### SmartMenus Initialization Script

Source: https://www.smartmenus.org/docs

This JavaScript code initializes the SmartMenus plugin on an element with the ID 'NavigationMenu'. Ensure jQuery is loaded before this script.

```javascript
$(function () {
    $("#NavigationMenu").smartmenus();
});
```

--------------------------------

### beforeshow Event

Source: https://www.smartmenus.org/docs

Fired right before a sub menu is shown. You can cancel the event with `return false` and the sub menu will not be shown.

```APIDOC
## beforeshow Event

### Description
Fired right before a sub menu is shown. You can cancel the event with `return false` and the sub menu will not be shown.

### Cancelable
Yes

### Arguments
- **e** (jQuery.Event) - The jQuery.Event object.
- **menu** (HTMLElement) - The sub menu `<ul>` element.

### Code Example
```javascript
$("#main-menu").on("beforeshow.smapi", function(e, menu) {});
```
```

--------------------------------

### Handle Submenu Shown Event

Source: https://www.smartmenus.org/docs

Fired right after a sub menu is shown.

```javascript
$("#main-menu").on("show.smapi", function(e, menu) {});
```

--------------------------------

### activate Event

Source: https://www.smartmenus.org/docs

Fired when an item is activated, right before its sub menu (if the item has a sub menu) is shown. You can cancel the event with `return false` and the item's sub menu will not be shown.

```APIDOC
## activate Event

### Description
Fired when an item is activated, right before its sub menu (if the item has a sub menu) is shown. You can cancel the event with `return false` and the item's sub menu will not be shown.

### Cancelable
Yes

### Arguments
- **e** (jQuery.Event) - The jQuery.Event object.
- **item** (HTMLElement) - The menu item `<a>` element.

### Code Example
```javascript
$("#main-menu").on("activate.smapi", function(e, item) {});
```
```

--------------------------------

### Include SmartMenus JavaScript Files

Source: https://www.smartmenus.org/docs

Include jQuery and the SmartMenus jQuery plugin JS files before the closing </body> tag.

```javascript
<!-- jQuery -->
<script src="jquery.js" type="text/javascript"></script>

<!-- SmartMenus jQuery plugin -->
<script src="jquery.smartmenus.js" type="text/javascript"></script>
```

--------------------------------

### Define custom theme HTML structure

Source: https://www.smartmenus.org/docs

Use the sm class combined with your custom theme class on the root ul element.

```html
<ul id="main-menu" class="sm sm-mytheme"> ...
```

--------------------------------

### Configure horizontal sub menus with data-sm-horizontal-sub

Source: https://www.smartmenus.org/docs

Apply to <li> elements containing a sub-menu to enable horizontal layout. Requires additional CSS for proper styling.

```html
<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>
```

```css
@media (min-width: 768px) {
  /* horizontal sub menus */
  li[data-sm-horizontal-sub] {
    position: static;
  }
  li[data-sm-horizontal-sub] > ul {
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  li[data-sm-horizontal-sub] > ul > li {
    float: left;
  }
  li[data-sm-horizontal-sub] > .scroll-up, li[data-sm-horizontal-sub] > .scroll-down {
    display: none !important;
  }

  /* if you like, add more rules to tweak the look of horizontal sub menus... */
}
```

--------------------------------

### Handle Item Activation Event

Source: https://www.smartmenus.org/docs

Fired when an item is activated, before its sub menu is shown. Can be canceled to prevent the sub menu from appearing.

```javascript
$("#main-menu").on("activate.smapi", function(e, item) {});
```

--------------------------------

### show Event

Source: https://www.smartmenus.org/docs

Fired right after a sub menu is shown. This event is not cancelable.

```APIDOC
## show Event

### Description
Fired right after a sub menu is shown.

### Cancelable
No

### Arguments
- **e** (jQuery.Event) - The jQuery.Event object.
- **menu** (HTMLElement) - The sub menu `<ul>` element.

### Code Example
```javascript
$("#main-menu").on("show.smapi", function(e, menu) {});
```
```

--------------------------------

### Handle Submenu Show Event

Source: https://www.smartmenus.org/docs

Fired right before a sub menu is shown. Can be canceled to prevent the sub menu from appearing.

```javascript
$("#main-menu").on("beforeshow.smapi", function(e, menu) {});
```

--------------------------------

### Handle Hide All Event

Source: https://www.smartmenus.org/docs

Fired when the entire menu tree is reset, such as on document click or mouseout.

```javascript
$("#main-menu").on("hideAll.smapi", function(e) {});
```

--------------------------------

### Activate and Focus a Menu Item

Source: https://www.smartmenus.org/docs

Activates a menu item, which shows its submenu if one exists. The item can also be focused using the `focus` method.

```javascript
// 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();
```

--------------------------------

### Handle Item Focus Event

Source: https://www.smartmenus.org/docs

Fired when an item is focused. Use the event namespace to differentiate from regular DOM events.

```javascript
$("#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
  }
});
```

--------------------------------

### Mobile Menu Toggle CSS

Source: https://www.smartmenus.org/docs

Styles for the hamburger icon, toggle animations, and responsive visibility handling.

```css
.main-menu-btn {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 28px;
  text-indent: 28px;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
/* hamburger icon */
.main-menu-btn-icon, .main-menu-btn-icon:before, .main-menu-btn-icon:after {
  position: absolute;
  top: 50%;
  left: 2px;
  height: 2px;
  width: 24px;
  background: #bbb;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}
.main-menu-btn-icon:before {
  content: '';
  top: -7px;
  left: 0;
}
.main-menu-btn-icon:after {
  content: '';
  top: 7px;
  left: 0;
}
/* x icon */
#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon {
  height: 0;
  background: transparent;
}
#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:before {
  top: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:after {
  top: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
/* hide menu state checkbox (keep it visible to screen readers) */
#main-menu-state {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
}
/* hide the menu in mobile view */
#main-menu-state:not(:checked) ~ #main-menu {
  display: none;
}
#main-menu-state:checked ~ #main-menu {
  display: block;
}
@media (min-width: 768px) {
  /* hide the button in desktop view */
  .main-menu-btn {
    position: absolute;
    top: -99999px;
  }
  /* always show the menu in desktop view */
  #main-menu-state:not(:checked) ~ #main-menu {
    display: block;
  }
}
```

--------------------------------

### Configure collapsibleHideFunction

Source: https://www.smartmenus.org/docs

Customizes the hide animation for collapsible sub menus. Ensure the complete() callback is executed after the animation finishes.

```javascript
collapsibleHideFunction: function($ul, complete) { $ul.slideUp(250, complete); }
```

--------------------------------

### click Event

Source: https://www.smartmenus.org/docs

Fired when an item is clicked. You can cancel the event with `return false` and the item will not be selected (i.e. its link won't be loaded) and if there is a sub menu which should appear on click, it won't be shown, too. This event is fired even for disabled items so you may want to check the `select` event, too.

```APIDOC
## click Event

### Description
Fired when an item is clicked. You can cancel the event with `return false` and the item will not be selected (i.e. its link won't be loaded) and if there is a sub menu which should appear on click, it won't be shown, too. This event is fired even for disabled items so you may want to check the `select` event, too.

### Cancelable
Yes

### Arguments
- **e** (jQuery.Event) - The jQuery.Event object.
- **item** (HTMLElement) - The menu item `<a>` element.

### Code Example
```javascript
$("#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
  }
});
```
```

--------------------------------

### Handle Mouse Enter Event

Source: https://www.smartmenus.org/docs

Fired when the mouse pointer enters an item. Use the event namespace to differentiate from regular DOM events.

```javascript
$("#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
  }
});
```

--------------------------------

### Configure hideFunction

Source: https://www.smartmenus.org/docs

Customizes the hide animation for standard sub menus. Ensure the complete() callback is executed after the animation finishes.

```javascript
hideFunction: function($ul, complete) { $ul.fadeOut(250, complete); }
```

--------------------------------

### Enable a Disabled Menu Instance

Source: https://www.smartmenus.org/docs

Re-enables a SmartMenus instance that was previously disabled.

```javascript
$('#main-menu').smartmenus('enable');
```

--------------------------------

### Focus a Menu Item

Source: https://www.smartmenus.org/docs

Sends keyboard focus to a specific menu item's `<a>` element using the native JavaScript focus method. Ensure the menu is visible before focusing.

```javascript
$('a#myItem')[0].focus();
```

--------------------------------

### select Event

Source: https://www.smartmenus.org/docs

Fired when an item is selected, right before its link is loaded. You can cancel the event with `return false` and the item will not be selected (i.e. its link won't be loaded). This event is not fired for disabled items so you may want to check the `click` event, too.

```APIDOC
## select Event

### Description
Fired when an item is selected, right before its link is loaded. You can cancel the event with `return false` and the item will not be selected (i.e. its link won't be loaded). This event is not fired for disabled items so you may want to check the `click` event, too.

### Cancelable
Yes

### Arguments
- **e** (jQuery.Event) - The jQuery.Event object.
- **item** (HTMLElement) - The menu item `<a>` element.

### Code Example
```javascript
$("#main-menu").on("select.smapi", function(e, item) {});
```
```

--------------------------------

### Navigation Menu Placeholder

Source: https://www.smartmenus.org/docs

This HTML snippet uses an asp:Literal control to dynamically insert the navigation menu generated by the CleanMenu.vb class into the body of your MasterPage.

```html
<nav>
</nav>
```

--------------------------------

### Handle Item Select Event

Source: https://www.smartmenus.org/docs

Fired when an item is selected, before its link is loaded. Can be canceled to prevent selection. Not fired for disabled items.

```javascript
$("#main-menu").on("select.smapi", function(e, item) {});
```

--------------------------------

### Destroy All SmartMenus Instances

Source: https://www.smartmenus.org/docs

Call this global method to destroy all initialized menu instances on the page and clean up associated resources.

```javascript
$.SmartMenus.destroy();
```

--------------------------------

### beforehide Event

Source: https://www.smartmenus.org/docs

Fired right before a sub menu is hidden. You can cancel the event with `return false` and the sub menu will not be hidden.

```APIDOC
## beforehide Event

### Description
Fired right before a sub menu is hidden. You can cancel the event with `return false` and the sub menu will not be hidden.

### Cancelable
Yes

### Arguments
- **e** (jQuery.Event) - The jQuery.Event object.
- **menu** (HTMLElement) - The sub menu `<ul>` element.

### Code Example
```javascript
$("#main-menu").on("beforehide.smapi", function(e, menu) {});
```
```

--------------------------------

### Hide All Submenus Across All Instances

Source: https://www.smartmenus.org/docs

Use this global method to hide all submenus for every SmartMenus instance currently active on the page.

```javascript
$.SmartMenus.hideAll();
```

--------------------------------

### ASP.NET MasterPage CodeBehind Integration

Source: https://www.smartmenus.org/docs

Integrate this VB.NET code into your MasterPage CodeBehind to dynamically load the SmartMenus navigation. Ensure your script and link files are correctly bound in your ASPX pages.

```vb
Private Sub LoadPage(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    ' This makes sure that your script and link files are bound correctly in your aspx pages
    Page.Header.DataBind()

    Dim SitemapMenu = New CleanMenu("NavigationMenu", "sm sm-blue")
    Me.SitemapList.Text = SitemapMenu.GetCleanMenu
End Sub
```

--------------------------------

### Reverse sub menu alignment with data-sm-reverse

Source: https://www.smartmenus.org/docs

Apply to <li> elements with sub-menus to override the default horizontal alignment direction.

```html
<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>
```

--------------------------------

### focus Event

Source: https://www.smartmenus.org/docs

Fired when an item is focused. This event is not cancelable.

```APIDOC
## focus Event

### Description
Fired when an item is focused.

### Cancelable
No

### Arguments
- **e** (jQuery.Event) - The jQuery.Event object.
- **item** (HTMLElement) - The menu item `<a>` element.

### Code Example
```javascript
$("#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
  }
});
```
```

--------------------------------

### Handle Submenu Hide Event

Source: https://www.smartmenus.org/docs

Fired right before a sub menu is hidden. Can be canceled to prevent the sub menu from being hidden.

```javascript
$("#main-menu").on("beforehide.smapi", function(e, menu) {});
```

--------------------------------

### Mobile Menu Toggle HTML

Source: https://www.smartmenus.org/docs

Define the checkbox and label structure required for the mobile menu toggle. Ensure the checkbox and menu root are siblings.

```html
<!-- Mobile menu toggle button (hamburger/x icon) -->
<input id="main-menu-state" type="checkbox" />
<label class="main-menu-btn" for="main-menu-state">
  <span class="main-menu-btn-icon"></span> Toggle main menu visibility
</label>

<!-- Sample menu definition -->
<ul id="main-menu" class="sm sm-blue"> ...
```

--------------------------------

### Handle Item Click Event

Source: https://www.smartmenus.org/docs

Fired when an item is clicked. Can be canceled to prevent item selection and sub menu display. This event is fired even for disabled items.

```javascript
$("#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
  }
});
```

--------------------------------

### SmartMenus SCSS Theme Upgrade (New)

Source: https://www.smartmenus.org/docs

This SCSS code shows the updated default styling for the 'sm-blue' theme's sub-arrow indicators in SmartMenus version 1.1.x and later, reflecting changes in sub-indicator positioning and content.

```scss
// Toggle buttons (sub menu indicators)
.sub-arrow {
  position: absolute;
  top: 50%;
  margin-top: -(ceil($sm-blue__toggle-size / 2));
  left: auto;
  right: $sm-blue__toggle-spacing;
  width: $sm-blue__toggle-size;
  height: $sm-blue__toggle-size;
  overflow: hidden;
  font: bold #{$sm-blue__font-size-small}/#{$sm-blue__toggle-size} monospace !important;
  text-align: center;
  text-shadow: none;
  background: $sm-blue__collapsible-toggle-bg;
  border-radius: $sm-blue__border-radius-small;
}
.sub-arrow::before {
  content: '+';
}
&.highlighted .sub-arrow::before {
  content: '-';
}
```

--------------------------------

### Handle Mouse Leave Event

Source: https://www.smartmenus.org/docs

Fired when the mouse pointer leaves an item. Use the event namespace to differentiate from regular DOM events.

```javascript
$("#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
  }
});
```

--------------------------------

### Define a custom show function for sub menus

Source: https://www.smartmenus.org/docs

Use this to override the default jQuery show animation. Ensure the complete callback is invoked after the animation finishes.

```javascript
showFunction: function($ul, complete) { $ul.fadeIn(250, complete); }
```

--------------------------------

### Handle Item Blur Event

Source: https://www.smartmenus.org/docs

Fired when an item loses focus. Use the event namespace to differentiate from regular DOM events.

```javascript
$("#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
  }
});
```

--------------------------------

### Mobile Menu Toggle JavaScript

Source: https://www.smartmenus.org/docs

Optional JavaScript to add slide animation effects when toggling the menu.

```javascript
$(function() {
  var $mainMenuState = $('#main-menu-state');
  if ($mainMenuState.length) {
    // animate mobile menu
    $mainMenuState.change(function(e) {
      var $menu = $('#main-menu');
      if (this.checked) {
        $menu.hide().slideDown(250, function() { $menu.css('display', ''); });
      } else {
        $menu.show().slideUp(250, function() { $menu.css('display', ''); });
      }
    });
    // hide mobile menu beforeunload
    $(window).on('beforeunload unload', function() {
      if ($mainMenuState[0].checked) {
        $mainMenuState[0].click();
      }
    });
  }
});
```

--------------------------------

### SmartMenus SCSS Theme Upgrade (Old)

Source: https://www.smartmenus.org/docs

This SCSS code represents the old default styling for the 'sm-blue' theme's sub-arrow indicators in SmartMenus versions prior to 1.1.x.

```scss
// Toggle buttons (sub menu indicators)
span.sub-arrow {
  position: absolute;
  top: 50%;
  margin-top: -(ceil($sm-blue__toggle-size / 2));
  left: auto;
  right: $sm-blue__toggle-spacing;
  width: $sm-blue__toggle-size;
  height: $sm-blue__toggle-size;
  overflow: hidden;
  font: bold #{$sm-blue__font-size-small}/#{$sm-blue__toggle-size} monospace !important;
  text-align: center;
  text-shadow: none;
  background: $sm-blue__collapsible-toggle-bg;
  @include border-radius($sm-blue__border-radius-small);
}
// Change + to - on sub menu expand
&.highlighted span.sub-arrow:before {
  display: block;
  content: '-';
}
```

--------------------------------

### hideAll Event

Source: https://www.smartmenus.org/docs

Fired when the whole menu tree is reset (e.g. on document click, onmouseout). This event is not cancelable.

```APIDOC
## hideAll Event

### Description
Fired when the whole menu tree is reset (e.g. on document click, onmouseout).

### Cancelable
No

### Arguments
- **e** (jQuery.Event) - The jQuery.Event object.

### Code Example
```javascript
$("#main-menu").on("hideAll.smapi", function(e) {});
```
```

--------------------------------

### Disable collapsible behavior with data-sm-skip-collapsible-behavior

Source: https://www.smartmenus.org/docs

Apply to a Bootstrap navbar's ul.navbar-nav to maintain standard Bootstrap behavior in mobile view instead of SmartMenus' toggle logic.

```html
<ul class="nav navbar-nav" data-sm-skip-collapsible-behavior="true">...
```

--------------------------------

### Hide All Submenus for a Specific Instance

Source: https://www.smartmenus.org/docs

Hides all submenus associated with a particular SmartMenus instance.

```javascript
$('#main-menu').smartmenus('menuHideAll');
```

--------------------------------

### Vertical Menu HTML Structure

Source: https://www.smartmenus.org/docs

To create a vertical main menu, add the 'sm-vertical' class to your unordered list in addition to 'sm'.

```html
<ul id="main-menu" class="sm sm-vertical sm-blue"> ...
</ul>
```

--------------------------------

### Skip SmartMenus processing with data-sm-skip

Source: https://www.smartmenus.org/docs

Apply to a Bootstrap navbar's ul.navbar-nav to prevent SmartMenus features from being applied.

```html
<ul class="nav navbar-nav" data-sm-skip="true">...
```

--------------------------------

### Handle Submenu Hidden Event

Source: https://www.smartmenus.org/docs

Fired right after a sub menu is hidden.

```javascript
$("#main-menu").on("hide.smapi", function(e, menu) {});
```

--------------------------------

### hide Event

Source: https://www.smartmenus.org/docs

Fired right after a sub menu is hidden. This event is not cancelable.

```APIDOC
## hide Event

### Description
Fired right after a sub menu is hidden.

### Cancelable
No

### Arguments
- **e** (jQuery.Event) - The jQuery.Event object.
- **menu** (HTMLElement) - The sub menu `<ul>` element.

### Code Example
```javascript
$("#main-menu").on("hide.smapi", function(e, menu) {});
```
```

--------------------------------

### mouseenter Event

Source: https://www.smartmenus.org/docs

Fired when an item is hovered. This event is not cancelable.

```APIDOC
## mouseenter Event

### Description
Fired when an item is hovered.

### Cancelable
No

### Arguments
- **e** (jQuery.Event) - The jQuery.Event object.
- **item** (HTMLElement) - The menu item `<a>` element.

### Code Example
```javascript
$("#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
  }
});
```
```

--------------------------------

### blur Event

Source: https://www.smartmenus.org/docs

Fired when an item loses focus. This event is not cancelable.

```APIDOC
## blur Event

### Description
Fired when an item loses focus.

### Cancelable
No

### Arguments
- **e** (jQuery.Event) - The jQuery.Event object.
- **item** (HTMLElement) - The menu item `<a>` element.

### Code Example
```javascript
$("#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
  }
});
```
```
Tokens:
Raw