Easy jQuery menu creation and actions
$(document).ready(function () {
$("#menu").generateMenu();
$("#subMenu4").setSubMenu("subMenu4Content");
//open button toggle :
// $("#open").openMenu();
// $("#open").closeMenu();
//prev button execute : $("#open").openPrevMenu();
//play button execute : $("#open").playMenu();
//next button execute : $("#open").openNextMenu();
});
Menus : Documentation
Magic jQuery include a menu manager. The idea is to generate menu or associate one by one a li element to its submenu. You can specify the openning and closing function, the class added to the li while open and many other parameters described later.
Once you created your menus you can then execute actions on them. You can open a menu (ie open its first li assoiated to a submenu), play a menu (for carrousel for instance), open next item etc...
generateMenu
in most case you just have submenus with this kind of structure :
- <ul id="menu" class="horizontalList">
- <li>
-
- <a href="">menuItem1 link</a>
- </li>
- <li>
-
- <a href="">menuItem2 link</a>
- </li>
- </ul>
Generate this
note the verticalList and horizontalList classes on the ul, this make the menu behave as you wish (include the css).
Full syntax
all parameters are optionals
- openDelay: 300, //number in milliseconds before each submenu upens on mouseover (default : 300)
- action: "over" | "click", // if not specified : click for mobiles, over otherwise
- hover: "classes added when active", //the classe(s) added to the li when activated
- out: "classes removed when not active", //the classe(s) removed from the li when unactivated
- openFunction: function(me){
/* do any stuff you like here, the goal is to show me which is the submenu jQuery object */},
me.removeClass("hidden"); //this is the default function - closeFunction: function(me){
/* do any stuff you like here, the goal is to hide me which is the submenu jQuery object */},
me.addClass("hidden"); //this is the default function - keepOpen: true | false
set Menu of a single li
If you want to dissociate the sub-menu DOM position to its visual position in the web page code for obvious SEO reasons.
Thus you first align the element which will be a subMenu and then associate it to a li (and only a li) and that become its submenu.
Ex : You want to have <div id="mySubMenu"></div> as sub-menu of <li id="anElement"></div>.
$("#anElement").setSubMenu("mySubMenu")setMenu full syntax
Except the id all parameters are optionals
- id :"idOfSubMenu", //the id (without the #) of the subMenu
- /* optional parameters : */
- openDelay: 300, //number in milliseconds before this submenu upens on mouseover (default : 300)
- action: "over" | "click", // if not specified : click for mobiles, over otherwise
- hover: "classes added when active", //the classe(s) added to the li when activated
- out: "classes removed when not active", //the classe(s) removed from the li when unactivated
- openFunction: function(me){
/* do any stuff you like here, the goal is to show me which is the submenu jQuery object */},
me.removeClass("hidden"); //this is the default function - closeFunction: function(me){
/* do any stuff you like here, the goal is to hide me which is the submenu jQuery object */},
me.addClass("hidden"); //this is the default function - keepOpen: true | false
Each menu item is then a <li><a></a></li> (or a <li> containing any element), if the attr href is not empty then in case of "click" action:
- First click : open
- Second click : go to the link
- Third click : close
Else if the href attr is empty ("") or is not defined :
- First click : open
- Second click : close
setMenu : Examples
- <ul id="menu">
- <li id="menuItem1">
-
- <a href="">menuItem1 link</a>
- <div id="sebMenuItem1" class="bkgDarker hidden" >
- this is subMenu item1
- </div>
- </li>
- <li id="menuItem2">
-
- <a href="">menuItem2 link</a>
- <div id="sebMenuItem2" class="bkgDarker hidden" >
- this is subMenu item2
- </div>
- </li>
- </ul>
Javascript
$("#menuItem1").setSubMenu("sebMenuItem1");
$("#menuItem2").setSubMenu("sebMenuItem2");
Result
Javascript
- $("#menuItem1").setSubMenu("sebMenuItem1");
- $("#menuItem2").setSubMenu({
-
- id:"sebMenuItem2",
- action:"click"
- });
Result
Javascript
- $("#menuItem1").setSubMenu("sebMenuItem1");
- $("#menuItem2").setSubMenu({
-
- id:"sebMenuItem2",
- hover:"tLoud bkgDark whiteLink"
- });
Result
Menus actions
Imagine we have :
- <ul id="menu">
- <li id="menuItem1"></li>
- <li id="menuItem2"></li>
- <li id="menuItem3"></li>
- </ul>
To initialize we then did :
$("#menuItem1").setSubMenu("someId");
$("#menuItem2").setSubMenu("someOtherId");
$("#menuItem3").setSubMenu("AgainsomeOtherId");
if the submenus are inside the menu we also may have done :
$("#menu").generateMenu();
Note :
in you use setSubMenu for each menuItem, Each menuItem works with its parameters given. For instance it opens and closes with its openFunction / closeFunction ; see the way to create cool carrousels or menus ?
openMenu
Ex : You want to force-open the menu. It won't close until you call closeMenu().
It will open the first li associated to a subMenu in the ul
Ex : You want to force-open the menu item 2.
$("#menuItem2").openMenu();closeMenu
Ex : You want close the menu
$("#menu").closeMenu();Ex : You want close the menuitem
$("#menuItem1").closeMenu();openNextMenu & openPrevMenu
Ex : You want to open the next menuItem, if none is opened, it will open the first one associated to a subMenu.
$("#menu").openNextMenu();
Ex : You want to open the previous menuItem, if none is opened, it will open the last one associated to a subMenu.
$("#menu").openPrevMenu();playMenu
Ex : You want play the menu, this mean open the first one then the second one .. and start again.
parameter is in milliseconds, if not specified, default value is : 3000.
pauseMenu
Ex : You want to pause the menu play. The active menuItem wsill stay opened. You have to call play() again.
$("#menu").pauseMenu();stopMenu
Ex : You want to stop the menu, close active menuItem.
$("#menu").stopMenu();flushMenu
to un-create a js-menu
$("#menu").flushMenu();