Support Forum Softcomplex logo
About Us  | Services  | Download  | Order  | Support  | |
| Search | Today's Posts | Stats | Board Rules | Not logged in [ Login | Register ]
go to bottom
Last active: Never

Printable Version | Subscribe | Add to Favourites   Post new thread
Author: Subject: Inserting two Tigra Menus on the single page
tigra
Administrator

Posts: 2049
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
View User's Profile View All Posts By User U2U Member
Post new thread

Related Links:
Product Page Tigra Menu
Product Demonstrations Live Demos:
Traditional Blue
White Steps
Inner HTML
All Together
Frames Targeting
Free Download Free Download
Free Download Menu Builders
Online Builder
Builder for Windows
Product Documentation Documentation:
Documenation Page
Change Log
Menus Comparison Table
Support Forum Support Forum
 
Tigra Menu PRO
Product Demonstrations Live Demos
Alignment & Multimenus
Unlimited Depth
Item sizing and positioning
Inner HTML
Frames, Targeting
Static Positioning
Free Download Menu Builders
Online Builder
Product Documentation Documentation
Documenation Page
Tigra Menu PRO FAQ
Change Log
Menus Comparison Table
Support Forum Technical Support
Support Forum
Customer Care System
Order Now ORDER NOW!
Add to Cart
View Cart
 
Product Page Tigra Menu GOLD
Functionality demos Functionality demos
Multiple
Cross-framed
Select-boxes
Effects
Design demos Design demos
Icons & arrows
Idea!
Hi there!
Matrix
MS Style
XP Style
Dots
3D-Buttons
Product Documentation Documentation
Documenation Page
Change Log
Menus Comparison Table
Support Forum Technical Support
Support Forum
Customer Care System
Order Now ORDER NOW!
Add to Cart
View Cart
 

Go To Top


Powered by XMB 1.9.1 Nexus
Developed By Aventure Media & The XMB Group © 2002-2004