Dynamically applying flex menu to a link

A typical setup of Flex Menu calls for applying a flex menu to a link by inserting the attribute "data-flexmenu" inside the link, such as:

<a href="http://www.dynamicdrive.com" data-flexmenu="flexmenu1">Dynamic Drive</a>

where the attribute points to the ID of the flex menu on the page. This method of associating a menu with a link is static, and done when the page loads. You can also dynamically reference a link using the power of jQuery Selectors and apply a flex menu to it. The syntax is:

$(elementselector).addflexmenu('menuid', options)

where "menuid" is the ID of the flex menu to add to the link(s), and options is an optional object that can contain one or more of the below settings to fine tune the behavior of the menu:

Options parameter:

  • dir: Enter "h" to cause the menu to drop down horizontally, or to the right of the anchor link. This is typically useful for side bar anchor links that's located in the very left or right column on the page. Default value is "v", which is to drop down.
  • offsets: Enter two numbers in the format [x,y] to specify the x and y offset of the drop down menu relative to its normal position. Default value is [0,0]. For example, lets say you want to move the drop down menu 5px over to the right and 3px downwards- enter the value [5,3].

For example:

$('#myanchor').addflexmenu('flexmenu1') //apply menu to link with ID="myanchor"

$('.home').addflexmenu('flexmenu1', {dir:"h"}) //apply horizontal menu to links with class="home"

$('.home').addflexmenu('flexmenu1', {dir:"h", offsets:[5,5]}) //apply horizontal menu with custom offsets to links with class="home"

If you're setting up your links when the page loads, you'll need to call the above after the page has loaded, by wrapping it inside jQuery's DOM ready function for example:

jQuery(document).ready(function($){
 $('#myanchor').addflexmenu('flexmenu1') //apply menu to link with ID="myanchor"
})

Dynamically defining your flex menu contents

You can also define the HTML markup of your flex menus dynamically using JavaScript, so the menu contents are embedded inside a .js file. This is useful if multiple pages across your site all use the same flex menus, and you can't easily define the menus on each page as HTML markup. To do this, follow the below 3 steps:

1) Define your menu contents inside a .js file and using the helper function dlistmenu(). Take a look at flexdropdowncontents.js, which redefines the contents of the two flex menus seen in the demos on the main script page as JavaScript code. Function dlistmenu() consists of 3 functions that together let you create a UL menu of any levels:

  1. new ddlistmenu('menuid', 'menuclass'): Call this function and assign it to variable to create the main UL of your Flex Menu. Enter the desired ID and CSS class to be added to the UL.

  2. addItem(url, text, optionaltarget): Call this function to add a new LI to its parent UL.

  3. addSubMenu(): Call this function on top of addItem() to add a new LI and also create a new sub UL beneath this LI at the same time. Assign the result to a variable to reference this newly added sub UL.

All this may seem a bit confusing, though simply study the structure of at flexdropdowncontents.js for a little while, and a pattern should emerge as far as how to use this function.

2) Then on the pages that will use these menus, modify your page from the original set up of Flex Menu with the changes in red:

<html>/
<head>
<link rel="stylesheet" type="text/css" href="flexdropdown.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="flexdropdown.js">

/***********************************************
* Flex Level Drop Down Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript" src="flexdropdowncontents.js"></script>

<script type="text/javascript">

jQuery(document).ready(function($){
 $(document.body).append(flexmenu1.menu) //append menu with variable name "flexmenu1" to document
 $(document.body).append(flexmenu2.menu) //append menu with variable name "flexmenu2" to document

 $('#link1').addflexmenu('flexmenu1') //apply flex menu with ID "flexmenu1" to link with ID="link1"
 $('#link2').addflexmenu('flexmenu2', {dir:'h', offsets:[8,0]}) //apply flex menu with ID "flexmenu2" to link with ID="link2"
})

</script>
</head>

<body>


<a id="link1" href="http://www.dynamicdrive.com">Dynamic Drive</a>

<a id="link2" href="http://www.cnn.com">Webmaster Resources</a>

</body>
</html>

First, include a reference to your menu contents .js file (ie:flexdropdowncontents.js) in the HEAD section of your page following the core Flex Menu .js file. Then, append the menu to the page once the page has loaded by calling:

$(document.body).append(flexmenuvar.menu)

"flexmenuvar" should be the primary variable assigned to your Flex menu inside flexdropdowncontents.js. And finally, dynamically bind the flex menu to the desired link by calling:

$(elementselector).addflexmenu('flexmenuid', options)

where ""flexmenuid" is the ID of the flex menu given to it when it was created inside flexdropdowncontents.js. Note that in the BODY of your page, all that should be present are the anchor links themselves, and no flex menu markup.

Here's the result:

Dynamic Drive

Webmaster Resources

Table Of Contents

This script consists of an index page plus two supplementary pages:

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post