New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
  • IE5+: IE 5 and above
  • FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
  • Opr7+: Opera 7 and above.
Bookmark online:

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-popupmenu" inside the link, such as:

<a href="http://www.dynamicdrive.com" data-popupmenu="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).addpopupmenu('menuid')

where "menuid" is the ID of the flex menu to add to the link(s). For example:

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

$('.home').addpopupmenu('flexmenu1') //apply horizontal menu to links with class="home"

$('#nav a').addpopupmenu('flexmenu1') //apply menu to links within the DIV with ID="nav"

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').addpopupmenu('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 flexpopupcontents.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 flexpopupcontents.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="popupmenu.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="popupmenu.js">

/***********************************************
* Flex Level Popup Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript" src="flexpopupcontents.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').addpopupmenu('flexmenu1') //apply flex menu with ID "flexmenu1" to link with ID="link1"
 $('#link2').addpopupmenu('flexmenu2') //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:popupmenu.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 popupmenu.js. And finally, dynamically bind the flex menu to the desired link by calling:

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

where ""flexmenuid" is the ID of the flex menu given to it when it was created inside popupmenu.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:

  • Script Index Page
  • Dynamically applying flex menu to a link, defining your flex menu contents