flxMenu - jQuery Plugin by LTS

The flxMenu plugin is a responsive, cross-browser jQuery plugin that helps you create dropdown navigation for both desktop and mobile devices.

Features

automatically switches to a mobile-friendly toggle menu when the window width reaches a specified breakpoint.
supports infinite levels of sub menus.
supports multi-column dropdown navigation.
popup menu slides in from top, left or right hand side.
accordion-style menu where all the menu items will be collapsed into a dropdown toggle menu on small screens.
supports keyboard navigation in desktop mode.

Download from GitHub

HTML:


	 						<script src="jquery.flxMenu.min.js"></script>
<link href="flxMenu.css" rel="stylesheet" type="text/css">

JavaScript:


	 						$(function(){

$('#MenuToMove').flxMenu($('#navTrigger'), options);

});

navTrigger is an empty <div> element which is initially hidden.

Property	Default	Description
duration	300	Time in ms to open submenu.
smShowByClick	false	Submenu will not show up on hover but on clicking the main item.
puSlideInFrom	top	The popup menu slides in from the top, left or right hand side. Possible values: "top", "left", "right".
puFullRange	false	If set to true, the popup menu will cover the full viewport width (slide in from the top) or height (slide in horizontally).
puCloseOnSelect	false	If set to true, the popup menu closes when any item is clicked.
puShowActiveItem	true	When the popup menu opens, any submenu which contains the active item will be opened.
puAutoWidth	false	If set to any value > 0, the menu bar switches from desktop mode to popup mode if the width of the menu bar exceeds the framing div element's width.
debug	false	If set to true, there will be debug outputs in the browsers developer console window.

Property	Param	Description
fnInit	menuFrame, buttonFrame	Occurs directly after initialization of the plugin.
fnChanged	toButton, $newFrame, $oldFrame	Triggered when position of the menu has changed.
fnSubmenuClosing	submenu	Occurs before a submenu is closing. Parameter "submenu" is the DOM node of the respective submenu.
fnPopupShowing	showup, $trigger	Triggered when popup menu is opened (showup == true) or closed. Parameter $trigger is the jQuery object of the trigger element.

Name	Param	Description
flxMenuCheck	-none-	Executes a check which mode is appropriate for the current situation.
flxMenuRegisterItem	domItem, unreg	If you create a new menu item by code you can trigger this event to equip the new item with special flxMenu skills. If you want to get rid dynamically of a menu item, set the 'unreg' parameter to true.

Implementation of events:

JavaScript:


	 						function SwitchToDesktopModeExample(){

$('#navTrigger').css("display", "none");

$menu.trigger("flxMenuCheck");

}

JavaScript:


	 						function RegisterItemExample(){

$mainMenu.append($newItem);

$mainMenu.trigger('flxMenuRegisterItem', $newItem[0]);

}

Error: cannot find element for replacement!

Navigation bar
with option "puSlideInFrom: left".

Navigation bar
with options "puSlideInFrom: right, puFullRange: false".

Menu bar
with standard options (popup sliding in from the top).
Special HTML element as switch for the popup menu.

Menu bar
with option "puAutoWidth: 12".
For testing this option the number of menu items can be dynamically increased.

Requires jQuery 1.7+
flxMenu was tested with several browsers on different devices: