kafe.plugin.menu

Class

Version 1.1.0

Attaches javascript behaviors to an HTML menu structure to create a dropdown style navigation.

To preserve flexibility, the plugin only controls events, speeds, delays and callbacks. It will only manage a single custom class (kafemenu-open) on the handle elements upon opening or closing, leaving the positioning, visibility and other asthetic responsabilities to its css.

Source: dist/plugin/menu.js

Methods

init

Attach behaviors to the menu structure.

init
  • options

Parameters:

  • options Object

    Initial configurations.

    • selector String|jQueryObject|DOMElement

      Root element of the menu structure.

    • [handle = 'li'] String Optional

      Children element of the container that will serve as a handle to open and close the submenu.

    • [submenus = 'ul'] String Optional

      Children element of the handle that will serve as a submenu, opening and closing when the handle is used.

    • [animation = 'slide'] String Optional

      Animation used when opening and closing the submenus.

    • [openSpeed = 200] Number Optional

      Duration (in milliseconds) of the opening animation.

    • [openDelay = 500] Number Optional

      Delay (in milliseconds) used when entering the handle before starting the opening animation.

    • [closeSpeed = 150] Number Optional

      Duration (in milliseconds) of the closing animation.

    • [closeDelay = 400] Number Optional

      Delay (in milliseconds) used when exiting the handle before starting the closing animation.

    • [enterCallback] Function Optional

      Upon entering a handle, will be triggered after the delay but before the animation. The current submenu is passed as a first argument.

    • [leaveCallback] Function Optional

      Upon exiting a handle, will be triggered after the delay but before the animation. The current submenu is passed as a first argument.

Example:

// Sample menu structure
					<nav id="main-menu">
					    <ul>
					        <li><a href="#">Menu 1</a>
					            <ul>
					                <li><a href="#">Submenu 1.1</a></li>
					                <li><a href="#">Submenu 1.2</a></li>
					                <li><a href="#">Submenu 1.3</a></li>
					            </ul>
					        </li>
					        <li><a href="#">Menu 2</a>
					            <ul>
					                <li><a href="#">Submenu 2.1</a></li>
					                <li><a href="#">Submenu 2.2</a></li>
					                <li><a href="#">Submenu 2.3</a></li>
					            </ul>
					        </li>
					    </ul>
					</nav>
// Attach behaviors using...
					kafe.plugin.menu.init({ selector: '#main-menu > ul' });
// Or use the jQuery alternative...
					$('#main-menu > ul').kafeMenu('init', {});