 |
Quick Start: Using NlsMenu Pro
NlsMenu Professional - Advanced Javascript Drop Down Menu Control
|
||||
|
1. Installing NlsMenu Files
Unzip the package into your website folder. The package contains 4 main folders:
- lib, contains all the menu scripts.
- nlsmenu.js,
the main menu script. - nlsmenueffect.js,
NlsMenu effect library. Includes this file when you activate the menu effect. - nlsmenu_nlstree_intg.js,
integration to NlsTree Pro. Use this when you are using NlsMenu as integrated context menu for NlsTree Pro. - nlsmenuext_dyn.js,
dynamic functions library. Includes this when you enable selection path, using menu as toolbar (with toggle button), show/hide and delete menu item. - nlsmenuext_xml.js,
NlsMenu XML functions library. Includes this when you load menu from XML or using AJAX menu. - nlsmenuext_htm.js,
NlsMenu HTML functions library. Includes this when you load menu from HTML. With this feature you can create menu from regular UL/LI structure. - float.js,
additional library to create floating menu.
- nlsmenu.js,
- themes, contains predefined themes for the menu. Each theme is organized into individual folder. When implementing menu in website or application, it would be easier to use one of the predefined theme and then customize it to match the page layout.
- examples, contains ready to use menu examples.
- docs, contains documentation files.
Basically you only need the scripts lib folder, stylesheet and icons from one of the predefined theme. For better explanation of the menu implementation, we use the following diretory structure as example.
The http://myserver.com is mapped to c:\myserver as document root.
NlsMenu is installed under the document root c:\myserver\nlsmenu. The menu will be implemented in page under document root named default.htm.
So the directory structure will be:
Here is the sample directory structure used in this example:
c:\myserver
\nlsmenu
\lib
\themes
\examples
\docs
\styles
\default.htm
\about.htm
...
2. Includes Menu Script and Stylesheet
The very first step in implementing the menu is includes the menu script and stylesheet. You can browse through the example, and use the style that looks similar (match) to your website layout. In this example we use the basic theme (which is used in Menu Orientation example). Copy the stylesheet and icons (img folder) from themes/basic folder (or examples/orient) into your stylesheet folder, which in this example is styles folder.
<html>
<head>
<title>Implementing NlsMenu</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>
</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.
3. Creating Menu Instance
Starting version 3.0, NlsMenu Pro support loading menu from HTML structure as an alternative to create menu from Javascript.
Loading menu from HTML enables you to specify menu structure in HTML UL/LI structure. The main advantage over menu with Javascript
is the links in the HTML can be indexed by search engine.
For more information about loading menu from HTML, please goto Load Menu From HTML.
Below is the example to create menu using Javascript.
<html>
<head>
<title>Implementing NlsMenu</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>
//first create the NlsMenuManger object
var menuMgr = new NlsMenuManager("MyMenu");
menuMgr.defaultEffect="fade";
//use the menuMgr object to create menubar
var mbar = menuMgr.createMenubar("main");
mbar.stlprf="horz_";
mbar.orient="H";
mbar.addItem("1", "Home", "http://www.myserver.com", "", true, null, "", "Home");
mbar.addItem("2", "Products", "http://www.myserver.com", "", true, null, "subProducts", "Products");
mbar.addItem("3", "Services", "http://www.myserver.com", "", true, null, "subServices", "Services");
mbar.addItem("4", "About Us", "http://www.myserver.com", "", true, null, "", "About Us");
//create the submenu for Products item
var prodMenu = menuMgr.createMenu("subProducts");
prodMenu.addItem("1", "Computers", "http://www.myserver.com", "", true, null, "subComputers", "Computers");
prodMenu.addItem("2", "Accessories", "http://www.myserver.com", "", true, null, "", "Accessories");
prodMenu.addItem("3", "Others", "http://www.myserver.com", "", true, null, "", "Others");
//create the submenu for Services item
var servMenu = menuMgr.createMenu("subServices");
servMenu.addItem("1", "Networking Solution", "http://www.myserver.com");
servMenu.addItem("2", "Custom Software Development", "http://www.myserver.com");
//create the submenu for Computers item
var compMenu = menuMgr.createMenu("subComputers");
compMenu.addItem("1", "Servers", "www.myserver.com");
compMenu.addItem("2", "Workstation and Desktop", "www.myserver.com");
compMenu.addItem("3", "Notebook", "www.myserver.com");
</script>
</head>
</html>
The first line in the example above creates an instance on NlsMenuManager object and the set the effect for the menu (fading effect). There are many predefined effects you can choose from (Please check NlsMenu Effect). The NlsMenuManger also support other properties you can set, please check NlsMenu Options and Reference for more Information. Example below shows you how to set the menu timeout and make the menu flow over from's element/ActiveX object such as Flash.
var menuMgr = new NlsMenuManager("MyMenu");
menuMgr.defaultEffect="fade";
//set menu timeout, in miliseconds, the default value is 1000 (1s)
menuMgr.timeout=500;
//set the menu flow over the top of ActiveX or form's element.
menuMgr.flowOverFormElement=true;
Next in the example is creating the menubar. Use createMenubar() function to create menubar. The only parameter for the function is menubar id. The id can be any string and must be unique. The id cannot contains space and underscore (_) character.
var mbar = menuMgr.createMenubar("main");
mbar.stlprf="horz_";
mbar.orient="H";
Please note the example set the style prefix for the menubar. This means the menubar use the stylesheet with rules that have special prefix "horz_" (as in the basic-h.css). In the example the menubar orientation is set to "H" (horizontal menu), the default value is "V" (vertical menu). Next chapter (NlsMenu Options) describes more about menu options.
To add items to the menu, use addItem() function. The function has 8 parameters. You don't need to supply all the parameters. Only the first two are required.
The syntax is:
menu_object.addItem(id, item text, url, icons, enable, xtra, submenu id, title);
- id, the id of the item, can be any string and must be unique to the menu. The id cannot contains underscore ("_") character and space.
- item text, the item text.
- url, the url when the item is clicked. Set it to empty "" if it doesn't link to any other page.
- icons, the icons for the item, the format is ["normal icon file", "on over icon file", "disabled icon file"],
for example ["img/product.gif", "img/productover.gif", "img/productdisabled.gif"] - enable, enable/disable item, by default is always true.
- xtra, extra information about the item, for developer use only. Set it to null if you don't use it.
- submenu id, the id of the submenu assigned to the item.
- title, tooltip text that will be displayed when mouse move over the menu item.
//create menu item 'Home'
mbar.addItem("1", "Home", "http://www.myserver.com", "", true, null, "", "Home");
//create menu item 'Products'.
//note that the submenu id is pointed to 'subProducts' which is an id of Products submenu.
mbar.addItem("2", "Products", "http://www.myserver.com", "", true, null, "subProducts", "Products");
//this example create menu item with 3 parameter only and let the other parameters with default value.
compMenu.addItem("1", "Servers", "www.myserver.com");
Creating submenus is the same as creating menubar except you use createMenu() function to create submenu.
//create the Products submenu with id = "subProducts".
//Please note that the id is refer by Products item in the menubar.
var prodMenu = menuMgr.createMenu("subProducts");
prodMenu.addItem("1", "Computers", "http://www.myserver.com", "", true, null, "subComputers", "Computers");
prodMenu.addItem("2", "Accessories", "http://www.myserver.com", "", true, null, "", "Accessories");
prodMenu.addItem("3", "Others", "http://www.myserver.com", "", true, null, "", "Others");
4. Displaying the Menu
Menubar and all the submenus are rendered separately. The best (recommended) location to generates all submenus is directly under page <body>, and for the menubar you can place it whereever you want on the page. To render submenu menus, use renderMenus() function and to render menubar use renderMenubar() function as shown in example below.
<html>
<head>
<title>Implementing NlsMenu</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>
//first create the NlsMenuManger object
var menuMgr = new NlsMenuManager("MyMenu");
menuMgr.defaultEffect="fade";
//use the menuMgr object to create menubar
var mbar = menuMgr.createMenubar("main");
mbar.stlprf="horz_";
mbar.orient="H";
mbar.addItem("1", "Home", "http://www.myserver.com", "", true, null, "", "Home");
mbar.addItem("2", "Products", "http://www.myserver.com", "", true, null, "subProducts", "Products");
mbar.addItem("3", "Services", "http://www.myserver.com", "", true, null, "subServices", "Services");
mbar.addItem("4", "About Us", "http://www.myserver.com", "", true, null, "", "About Us");
//create the submenu for Products item
var prodMenu = menuMgr.createMenu("subProducts");
prodMenu.addItem("1", "Computers", "http://www.myserver.com", "", true, null, "subComputers", "Computers");
prodMenu.addItem("2", "Accessories", "http://www.myserver.com", "", true, null, "", "Accessories");
prodMenu.addItem("3", "Others", "http://www.myserver.com", "", true, null, "", "Others");
//create the submenu for Services item
var servMenu = menuMgr.createMenu("subServices");
servMenu.addItem("1", "Networking Solution", "http://www.myserver.com");
servMenu.addItem("2", "Custom Software Development", "http://www.myserver.com");
//create the submenu for Computers item
var compMenu = menuMgr.createMenu("subComputers");
compMenu.addItem("1", "Servers", "www.myserver.com");
compMenu.addItem("2", "Workstation and Desktop", "www.myserver.com");
compMenu.addItem("3", "Notebook", "www.myserver.com");
</script>
</head>
<body>
<script>
menuMgr.renderMenus();
</script>
...
Your HTML goes here
...
<!--You can put the menubar whereever you want in the page-->
<script>
menuMgr.renderMenubar();
</script>
...
Your HTML goes here
...
</body>
</html>
Now you have the menu embeded in your web page and you can starts using the menu. NlsMenu also supports loading menu from XML file. Please check Loading Menu From XML for more information.