Magic jQuery : Free, simple and advanced jQuery templates

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

$("#menu").generateMenu();

note the verticalList and horizontalList classes on the ul, this make the menu behave as you wish (include the css).

Demo :

Full syntax

all parameters are optionals

$("#myElement").generateMenu({
  • 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

$("#myElement").setSubMenu({
  • 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

HTML :
  • <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>
Case 1 : Basic

Javascript

$("#menuItem1").setSubMenu("sebMenuItem1");
$("#menuItem2").setSubMenu("sebMenuItem2");

Result

Case 2 : Different action for each menu item

Javascript

  • $("#menuItem1").setSubMenu("sebMenuItem1");
  • $("#menuItem2").setSubMenu({
    • id:"sebMenuItem2",
    • action:"click"
  • });

Result

Case 3 : Add classes

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

$("#menu").openMenu();

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.

$("#menu").playMenu(optionalTime);

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();
Try Magic jQuery : Add this to your code
  • <script type="text/javascript"
  • var overrideResizable = true; //override resizable function of jQuery UI (if used) to resize in all directions
  • </script>
  • <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  • <script type="text/javascript" src="http://www.jquery-css.com/js/magic.min.js" ></script>
  • <script type="text/javascript" >
  • $(document).ready(function () {
  • //your code here
  • });
  • </script>

Magic jQuery Templates & Layout : give me feedback !