tigra
Administrator
Posts: 1916
Registered: 6/17/2002
Location: US, CO
Member Is Offline |
| posted on 10/13/2003 at 06:49 PM |
|
|
Inserting two Tigra Menus on the single page
Please, follow the steps below to insert two independent instances of Tigra Menu generated with Tigra Menu Online Builder in single HTML document.
Note that these steps are valid for Tigra Menus generated with Online Menu builder (v1.0). Approach for Tigra Menu v2.0 is much similar but not
exactly the same.
1. Generate both menus online and save them locally. Make sure you don't overwrite first menu when saving second.
3. Extract both packages to different directories
4. Go to directory with first configuration and rename:
4.1 menu_items.js to menu1_items.js
4.2 menu_tpl.js to menu1_tpl.js
4.3 menu.css to menu1.css
4.4 Don't rename index.html and menu.js files.
5. Open index.html with any plain text editor and modify filenames in links section accordingly.
6. Go to directory with second menu instance and rename:
6.1 menu_items.js to menu2_items.js
6.2 menu_tpl.js to menu2_tpl.js
6.3 menu.css to menu2.css
7. Copy files menu2_items.js, menu2_tpl.js and menu2.css to directory with first menu instance. After that you don't need directory with second
menu instance. All further references are for the files in directory with first menu.
8. Add additional linkage tags to index.html in first directory. Now linkage section of this html document should look like:
<!-- styles for demo menu #1-->
<link rel="stylesheet" href="menu1.css">
<!-- styles for demo menu #2-->
<link rel="stylesheet" href="menu2.css">
and
<!-- menu script itself. you should not modify this file -->
<script language="JavaScript" src="menu.js"></script>
<!-- items structure. you can see same structure is shared by 1-st and 2-nd menu -->
<script language="JavaScript" src="menu1_items.js"></script>
<script language="JavaScript" src="menu2_items.js"></script>
<!-- files with geometry and styles structures for coresponding menus -->
<script language="JavaScript" src="menu1_tpl.js"></script>
<script language="JavaScript" src="menu2_tpl.js"></script>
Basically if you followed instructions above you can just cut and paste this code into your HTML document.
9. Now rename configuration variables:
9.1 in menu1_items.js: MENU_ITEMS to MENU1_ITEMS
9.2 in menu1_tpl.js: MENU_POS to MENU1_POS and MENU_STYLES to MENU1_STYLES
9.3 in menu2_items.js: MENU_ITEMS to MENU2_ITEMS
9.4 in menu2_tpl.js: MENU_POS to MENU2_POS and MENU_STYLES to MENU2_STYLES
9.5 in menu2.css rename all css classes so they start from .m1 (not from .m0 as)
10. update variable names in menu initialization for first instance in index.html.
11. add menu initialization for second menu. Your initialization should look like this:
<script language="JavaScript">
<!--//
// Note where menu initialization block is located in HTML document.
// Don't try to position menu locating menu initialization block in
// some table cell or other HTML element. Always put it before </body>
// each menu gets three parameters (see demo files)
// 1. items structure
// 2. geometry structure
// 3. dynamic styles structure
new menu (MENU1_ITEMS, MENU1_POS, MENU1_STYLES);
new menu (MENU2_ITEMS, MENU2_POS, MENU2_STYLES);
// make sure files containing definitions for these variables are linked to the document
// if you got some javascript error like "MENU_POS1 is not defined", then you've made syntax
// error in menu_tpl.js file or that file isn't linked properly.
// also take a look at stylesheets loaded in header in order to set static styles
//-->
</script>
12. Enjoy your page with two menus. Let us know should you have any questions
|
|
|
|
|
Tigra Menu
Live Demos:
Free Download
Menu Builders
Documentation:
Support Forum
ORDER NOW!