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:
-
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.
-
addItem(url, text, optionaltarget): Call this function to add a new LI to its parent UL.
-
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)
* 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="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: