Board Logo

2 Menus on the same page OR different images
BigDDunc - 8/16/2007 at 02:46 PM

I'm not sure what the easiest way to go about this would be, but I have achieved what I want to do with Tigra Menu (that is an image for level 0 menu items, and normal css formatting for other levels).

I would like to have different images for each level 0 item (and also corresponding rollovers)

Would it be easiest to Have multiple instances of the menu changing the current CSS to each image, or somehow change the css/js so that I could use a different image for each level 0 item?

I am unsure how to do either of the above... I've tried calling 2 instances of the menu like so

new menu (MENU_ITEMS, MENU_TPL);
new menu (MENU_ITEMS1, MENU_TPL1);

But that didn't bear any fruit.

Any help is greatly appreciated.


tigra - 8/16/2007 at 04:45 PM

You can try that with multiple menu instances (
Alternatively Tigra Menu GOLD and Tigra Menu PRO allow you to specify the HTML for different states of each item.

BigDDunc - 8/18/2007 at 12:36 PM

Is there anyway of combining the feature in "Demo 6" that lets you set the properties for each menu singularly with the Demo 1 (which uses the images) as I Need?

BigDDunc - 8/18/2007 at 02:04 PM

Ignore the above post. I have successfully combined 4 different occurences of the menu. And using V2.0 as well, below is how the code for it (if you might want to link to this in the future for v2.0 - but for reference the only difference from the earlier version is in the tpl files, where the old version you had to change MENU_POS and MENU_STYLES you simply change MENU_TPL).


<title>JavaScript Menu - Demo #1</title>
<!-- styles for demo menu #1-->
<link rel="stylesheet" href="menu1.css">
<!-- styles for demo menu #2-->
<link rel="stylesheet" href="menu2.css">
<!-- styles for demo menu #1-->
<link rel="stylesheet" href="menu3.css">
<!-- styles for demo menu #2-->
<link rel="stylesheet" href="menu4.css">


<!-- comments begin -->
<p style="margin-top:200px">Above you can see the same Tigra Menu configuration as on the product page at our website. This sample demonstrates:</p>
<li>Background image is applied to the root menu items (blue gradient repeated horizontally) via CSS property. Different image is specified to the rollover state of the item which creates the rollover effect (see menu.css)</li>
<li>Background image is applied to hover state of sub-menus (white arrow on the left) via CSS property (see menu.css)</li>
<li>Borders, fonts faces, font decorations etc. - all configured in CSS file for the menu levels independently (see menu.css)</li>
<li>Item sizes, item offsets within menu block and block offsets are configured for the menu level independently (see menu_tpl.js)</li>
<li>Properties omitted for the levels of the menu are inherited from the parent level (see menu_tpl.js)</li>
<!-- comments end -->

<!-- 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>
<script language="JavaScript" src="menu3_items.js"></script>
<script language="JavaScript" src="menu4_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>
<script language="JavaScript" src="menu3_tpl.js"></script>
<script language="JavaScript" src="menu4_tpl.js"></script>
<script language="JavaScript">
// Make sure the menu initialization is right above the closing </body> tag
// Moving it inside other tags will not affect the position of the menu on
// the page. If you need this feature please consider Tigra Menu GOLD.

// each menu gets two parameters (see demo files)
// 1. items structure
// 2. geometry structure

new menu (MENU1_ITEMS, MENU1_TPL);
new menu (MENU2_ITEMS, MENU2_TPL);
new menu (MENU3_ITEMS, MENU3_TPL);
new menu (MENU4_ITEMS, MENU4_TPL);

// If you don't see the menu then check JavaScript console of the browser for the error messages
// "Variable is not defined" error indicates that there's syntax error in that variable's definition
// or the file with that variable isn't properly linked to the HTML document


menu2.css (menu1.css doesn't need to be changed so theres no point pasting code)

menu styles
note: not all browsers render styles the same way so try out your style sheet
in different browsers before publishing

/* level 0 inner */
.m1l0iout {
font-family: sans-serif, Tahoma, Verdana, Geneva, Arial, Helvetica;
font-size: 11px;
text-decoration: none;
margin: 4px 0 0 8px;
color: #FFFFFF;
.m1l0iover {
font-family: sans-serif, Tahoma, Verdana, Geneva, Arial, Helvetica;
font-size: 11px;
text-decoration: underline;
margin: 5px 0 0 8px;
color: #FFFFFF;

/* level 0 outer */
.m1l0oout {
text-decoration : none;
background-image: url(img/pumptest2.jpg);
border: 0px solid #336699;
background-color: #2C5F93;
.m1l0oover {
text-decoration : none;
background-image: url(img/pumptest2Over.jpg);
background-color: #2C5F93;
border: 0px solid #336699;

/* level 1 inner */
.m1l1iout {
font-family: sans-serif, Tahoma, Verdana, Geneva, Arial, Helvetica;
font-size: 11px;
margin: 4px 0 0 17px;
color: #FFFFFF;
.m1l1iover {
font-family: sans-serif, Tahoma, Verdana, Geneva, Arial, Helvetica;
font-size: 11px;
margin: 4px 0 0 17px;
color: #FFFFFF;

/* level 1 outer */
.m1l1oout {
text-decoration : none;
background-color: #4d803e;
border: 1px solid #004A00;
padding: 0;
.m1l1oover {
text-decoration : none;
background-color: #345e34;
background-image: url(img/lev1_arrow.gif);
background-repeat: no-repeat;
border: 1px solid #004A00;
padding: 0;


// level scope settins structure
var MENU2_TPL = [
// root level configuration (level 0)
// item sizes
'height': 145,
'width': 64,
// absolute position of the menu on the page (in pixels)
// with centered content use Tigra Menu PRO or Tigra Menu GOLD
'block_top': 30,
'block_left': 375,
// offsets between items of the same level (in pixels)
'top': 0,
'left': 331,
// time delay before menu is hidden after cursor left the menu (in milliseconds)
'hide_delay': 30,
// submenu expand delay after the rollover of the parent
'expd_delay': 30,
// names of the CSS classes for the menu elements in different states
// tag: [normal, hover, mousedown]
'css' : {
'outer' : ['m1l0oout', 'm1l0oover'],
'inner' : ['m1l0iout', 'm1l0iover']
// sub-menus configuration (level 1)
// any omitted parameters are inherited from parent level
'height': 24,
'width': 150,
// position of the submenu relative to top left corner of the parent item
'block_top': 145,
'block_left': 0,
'top': 23,
'left': 0,
'css' : {
'outer' : ['m1l1oout', 'm1l1oover'],
'inner' : ['m1l1iout', 'm1l1iover']
// sub-sub-menus configuration (level 2)
'block_top': 5,
'block_left': 160
// the depth of the menu is not limited
// make sure there is no comma after the last element

I'm pretty sure you can just copy all the css from files 2, 3 and 4 and have them all in the same CSS file, I'll experiment with this later.
Thanks for a wonderful and free menu.

Back to forum: