 |
Load Menu from HTML Structure
NlsMenu Professional - Advanced Javascript Drop Down Menu Control
|
||||
|
1. Includes Menu Script and Stylesheet
To be able to generate menu from HTML, you will need to include NlsMenu Pro extension library for HTML nlsmenuext_htm.js in addition to core libraries.
<html>
<head>
<title>Implementing NlsMenu Pro</title>
<link rel="StyleSheet" href="styles/basic-h.css" type="text/css">
<link rel="StyleSheet" href="styles/basic-v.css" type="text/css">
<script src="nlsmenu/lib/nlsmenu.js"></script>
<script src="nlsmenu/lib/nlsmenueffect.js"></script>
<script src="nlsmenu/lib/nlsmenuext_htm.js"></script>
</head>
</html>
Note that the basic-h.css is stylesheet for menubar and basic-v.css for all the submenus. All rules in basic-h.css have special prefix horz_. This prefix is defined for menubar in the following steps.
2. Creates Menu from HTML Structure
Starting version 3.0, NlsMenu Pro support loading menu from HTML as alternative to Javascript.
Loading menu from HTML enables you to specify menu structure in HTML UL/LI format. The main advantage over menu with Javascript
is the links in the HTML can be indexed by search engine.
Below is the example to create menu from HTML.
<html>
<head>
<title>Implementing NlsMenu Pro</title>
<link rel="StyleSheet" href="styles/basic-h.css" type="text/css">
<link rel="StyleSheet" href="styles/basic-v.css" type="text/css">
<script src="nlsmenu/lib/nlsmenu.js"></script>
<script src="nlsmenu/lib/nlsmenueffect.js"></script>
<script src="nlsmenu/lib/nlsmenuext_htm.js"></script>
</head>
<body>
<div id="menudiv" style='display:none'>
<ul id="main">
<li><a href="http://www.mydomain.com" title="Home">Home</a></li>
<li><a href="http://www.mydomain.com" title="Products">Products</a>
<ul id="subProducts">
<li><a href="http://www.mydomain.com" title="Computers">Computers</a>
<ul id="subComputers">
<li><a href="http://www.mydomain.com" title="Servers">Servers</a>
<li><a href="http://www.mydomain.com" title="Workstation and Desktop">Workstation and Desktop</a>
<li><a href="http://www.mydomain.com" title="NOtebook">Notebook</a>
</ul>
</li>
<li><a href="http://www.mydomain.com" title="Accessories">Accessories</a></li>
<li><a href="http://www.mydomain.com" title="Others" target="_blank">Others</a></li>
</ul>
</li>
<li><a href="http://www.mydomain.com" title="Services">Services</a>
<ul id="subServices">
<li><a href="http://www.mydomain.com" title="Networking Solution">Networking Solution</a></li>
<li><a href="http://www.mydomain.com" title="Custom Software Development">Custom Software Development</a></li>
</ul>
</li>
<li><a href="http://www.mydomain.com" title="About Us">About Us</a></li>
</ul>
</div>
<script>
var menuMgr = new NlsMenuManager("MyMenu");
menuMgr.defaultEffect="fade";
//Create menu from HTML
menuMgr.loadMenuFromHTML("menudiv", true, false);
//Setup the menu
var menuBar = menuMgr.menubar;
menuBar.orient="H";
menuBar.stlprf="horz_";
//Render the menu
menuMgr.renderMenubar("menudiv");
</script>
</body>
</html>
As shown in example above, menu structure is defined in regular HTML tags such as UL/LI and A. Function used to create menu from HTML is loadMenuFromHTML(). This function takes 4 paremeters to determine how the menu will be generated:
- elmId, this is an id of element in which the menu structure is defined. This element can be DIV or SPAN
- incMbar, if true, the first UL element will be the menubar. If this parameter is false, the menu doesn't have menubar for example when you creating context menu/popup menu
- renderMenu, if true, menu will be generated and rendered in the element which the id specified in first parameter.
- opts, menu and item property in JSON text. This argument is optional.
Once the menu is created, you will be able to expose menubar and submenus (including menu items) object using standard functions provided in NlsMenu Pro to set menu and menu items property. Later sections will explain more about loading menu from HTML.
The HTML Format
Below is the format of HTML used to define menu:
<div id="menudiv">
<ul id="">
<li id=""><a href="url" target="" title=""><img src="itemicon"><span>item text</span></a>
<ul id="">
<li id=""><a href="url" target="" title="">item text</a></li>
<li id=""><a href="url" target="" title=""><span><strong><item></strong> text</span></a></li>
...
</ul>
</li>
<li id=""><a href="url" target="" title="">item text</a></li>
<li id=""><span>-</span></li>
<li id=""><a href="url" target="" title="">item text</a></li>
<li id=""><div>Custom item</div></li>
...
</ul>
<ul>
...
</ul>
....
</div>
The format is simple and easy to understand. Basically UL represents menubar/submenu and LI represents menu item.
-
UL, the only attribute you need to specify is id.
The id will be used as menu id, it must be unique in the page.
Note that this attribute is required.
Insite UL you can only define item (LI). - LI, also has only 1 attribute that is id which is optional. If the id is omitted, NlsMenu Pro will automatically assigns an id to its items. The auto generated item id will be sequence number unique to the menu for example 1, 2, 3... and so on.
-
Insite LI tag you can define menu item, separator and custom menu item.
- Menu Item. To create menu item, specify A tag in LI. For example:
<li><a href="url" target="" title=""></a></li>
Inside A, you can only specify IMG and menu text. For example:<li><a href="url" target="" title="">Menu Item Text</a></li> <li><a href="url" target="" title=""><img src="icon.gif">Menu Item Text</a></li> or <li><a href="url" target="" title=""><img src="icon.gif"><span>Menu Item Text</span></a></li>
The icon (IMG) will be parsed as item icon. Please note that NlsMenu Pro supports hover icon. Hover icon cannot be defined in HTML, to specify hover icon, you will need to set the icon using NlsMenu Pro javascript functions. Later section describes about this function in detail.The menu text can be formatted HTML. Any HTML defined in SPAN tag will be parsed as menu text. For example:
<li> <a href="url" target="" title=""> <img src="icon.gif"> <span><strong style='color:#ff9900'>Menu Item</strong> Text</span> </a> </li> - Separator, to add menu item separator:
<li><span>-</span></li>
- Custom menu item. To create custom menu item, just put the custom HTML inside DIV in LI tag. For example:
<li><div>CUSTOM HTML HERE</div></li>
- Menu Item. To create menu item, specify A tag in LI. For example:
Setting Menu and Item Property
The HTML only defines menu structure and basic properties. To set other properties such as style prefix, menu orientation, etc, you can expose the menubar/submenu object from NlsMenuManager after creating menu structure by using loadMenuFromHTML() function. Below is the example:
<div id="menudiv" style='display:none'>
<ul id="main">
<li><a href="http://www.mydomain.com" title="Home">Home</a></li>
<li><a href="http://www.mydomain.com" title="Products">Products</a>
<ul id="subProducts">
<li><a href="http://www.mydomain.com" title="Computers">Computers</a>
<ul id="subComputers">
<li><a href="http://www.mydomain.com" title="Servers">Servers</a>
<li><a href="http://www.mydomain.com" title="Workstation and Desktop">Workstation and Desktop</a>
<li><a href="http://www.mydomain.com" title="NOtebook">Notebook</a>
</ul>
</li>
<li><a href="http://www.mydomain.com" title="Accessories">Accessories</a></li>
<li><a href="http://www.mydomain.com" title="Others" target="_blank">Others</a></li>
</ul>
</li>
<li><a href="http://www.mydomain.com" title="Services">Services</a>
<ul id="subServices">
<li><a href="http://www.mydomain.com" title="Networking Solution">Networking Solution</a></li>
<li><a href="http://www.mydomain.com" title="Custom Software Development">Custom Software Development</a></li>
</ul>
</li>
<li><a href="http://www.mydomain.com" title="About Us">About Us</a></li>
</ul>
</div>
<script>
var menuMgr = new NlsMenuManager("MyMenu");
menuMgr.defaultEffect="fade";
//Create menu from HTML
menuMgr.loadMenuFromHTML("menudiv", true, false);
//Get menubar object and set the properties
var menuBar = menuMgr.menubar;
menuBar.orient="H";
menuBar.stlprf="horz_";
...
//Get submenu object and set the properties
var products = menuMgr.getMenu("subProducts");
products.showIcon=true;
//Get item from products menu and set the properties.
var prodIt1 = products.getItemById("1");
prodIt1.ico = ["normalicon.gif", "hovericon.gif"];
//Render the menu
menuMgr.renderMenubar("menudiv");
</script>
As shown in example above, use NlsMenuManager.menubar to reference to menubar object and use NlsMenuManager.getMenu(mId) function to get reference to a submenu. For complete list of properties and functions supported by NlsMenu Pro, please check Reference.
Also important from the example is the getItemById() function is used to get reference to a menu item. The item id '1' in the example is not defined in any items of Products menu, so where is it come from ? As described earlier, the item id is optional and if omitted, the menu will automatically assign sequence number to its items. The first item will have an id 1 and so on. Separator and Custom Item are also considered as menu item and therefore have an id too. If the id is defined, you can use the id to get reference to the item for example:
<li id="itProduct">Product</li>
To get reference to the item:
var prodIt1 = products.getItemById("itProduct");
Alternative Functions to Set Menu and Item Property
NlsMenu Pro supports alternative functions to set menu and item property using JSON text.
- NlsMenuManager.setMenusProperties(). Set properties of all menus and items defined in the menu manager.
Format:{ menuid_1: { property_1:value, property_2:value,..., property_n:value, items:{ itemid_1:{itemproperty_1:value, itemproperty_2:value, ...}, itemid_2:{itemproperty_1:value, itemproperty_2:value, ...}, itemid_n:{itemproperty_1:value, itemproperty_2:value, ...}, } }, menuid_2: {same as menuid_1 }, menuid_3: {same as menuid_1 }, menuid_n: {same as menuid_1 } }
Example:<script> var menuMgr = new NlsMenuManager("MyMenu"); menuMgr.defaultEffect="fade"; //Create menu from HTML menuMgr.loadMenuFromHTML("menudiv", true, false); //Set menu and item properties. var opts = { main: {orient:"H", stlprf:"horz_", showIcon:true, showSubIcon:false, items: { "2": {ico:["item2normal.gif","item2hover.gif"]}, //properties for Products item. "3": {ico:["item3normal.gif","item3hover.gif"]}, //properties for Services item. } }, subProducts: {showIcon:true, itemIco:["normal.gif","hover.gif"]}, subComputers: {showIcon:true, itemIco:["normal.gif","hover.gif"]}, subServices: {showIcon:true, itemIco:["normal.gif","hover.gif"]} }; menuMgr.setMenusProperties(opts); menuMgr.renderMenubar("menudiv"); </script>
- NlsMenu.setProperties().
Same as setMenusProperties() function
except this function only set property for specific submenu or menubar.
Example:<script> var menuMgr = new NlsMenuManager("MyMenu"); menuMgr.defaultEffect="fade"; //Create menu from HTML menuMgr.loadMenuFromHTML("menudiv", true, false); //Get the menubar object var menuBar=menuMgr.menubar; menuBar.setProperties ( { orient:"H", stlprf:"horz_", showIcon:true, showSubIcon:false, items: { "2": {ico:["item2normal.gif","item2hover.gif"]}, //properties for Products item. "3": {ico:["item3normal.gif","item3hover.gif"]}, //properties for Services item. } } ); //Get products submenu. var products=menuMgr.getMenu("subProducts"); products.setProperties ( { showIcon:true, itemIco:["normal.gif","hover.gif"] } ); menuMgr.renderMenubar("menudiv"); </script>
- NlsMenu.setItemProperties().
Set menu item properties.
Example:<script> var menuMgr = new NlsMenuManager("MyMenu"); menuMgr.defaultEffect="fade"; //Create menu from HTML menuMgr.loadMenuFromHTML("menudiv", true, false); //Get the menubar object var menuBar=menuMgr.menubar; menuBar.orient="H"; menuBar.showIcon=false; menuBar.setItemProperties("2", {ico:["item2normal.gif","item2hover.gif"]} ); menuBar.setItemProperties("3", {ico:["item2normal.gif","item2hover.gif"]} ); menuMgr.renderMenubar("menudiv"); </script>
Some special properties such as shadow and advanced borders can be specified in JSON text too. For example:
var menuBar=menuMgr.menubar;
menuBar.setProperties (
{
orient:"H", stlprf:"horz_", showIcon:true, showSubIcon:false,
shadow:new NlsMenuShadow("bottomright", "5px", "main"), //"main" is menubar id
customBorder:new NlsMenuBorder(true,true,true,true),
items: {
"2": {ico:["item2normal.gif","item2hover.gif"]}, //properties for Products item.
"3": {ico:["item3normal.gif","item3hover.gif"]}, //properties for Services item.
}
}
);