Controlling menu z-index

[mcarlson]

I'm having trouble adjusting the menu z-index so that it appears above some other divs on the page. If you look at http://www.patmetheny.com/tours.cfm you can see an example of what I am talking about.

The multicolored menu on the left is an HTML table in a div with a z-index of 1. The strip of artwork that separates the menu from the page content is a transparent PNG in a div with a z-index of 2 so that it sits on top of the menu and the page content, giving their edges the torn paper look. If you roll over the "Listen" button, you will see that the popup menu appears under that artwork. Is there any way to set the menu so it appears above that layer? I've tried using the "zindex" property in the menu, but that does not appear to have any effect. Any thoughts?

[Ruth]

Hi,

You have the submenus on the page inside a div. Take all that and put it into its own data file without the script tags of course and call the milonic, mmenudom, mmenuns4, and subs file the first thing after the body tag before anything else on the page. Then the submenus will open on top of the torn image and right next to the parent menu item and you have no need of the zindex.

Code: Select all

fixMozillaZIndex=true; //Fixes Z-Index problem  with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=150;
_menuOpenDelay=150;
_subOffsetTop=4;
_subOffsetLeft=0;

with(AllImagesStyle=new mm_style()){
styleid=1;
bordercolor="#000000";
borderstyle="solid";
fontstyle="normal";
fontweight="normal";
padding=3;
}

with(listenStyle=new mm_style()){
fontfamily="comic sans ms, verdana, Arial, Helvetica, sans-serif";
fontsize="14px";
fontstyle="normal";
fontweight="bold";
offbgcolor="#f79239";
offcolor="#000000";
onbgcolor="#f9a861";
oncolor="#000000";
padding=3;
separatorcolor="#E8E8E8";
separatorsize=1;
//subimage="/images/arrow.gif";
//subimagepadding=2;
}

with(watchStyle=new mm_style()){
fontfamily="comic sans ms, georgia, serif";
fontsize="14px";
fontstyle="normal";
fontweight="bold";
offbgcolor="#20b59b";
offcolor="#000000";
onbgcolor="#58c8b4";
oncolor="#000000";
padding=3;
separatorcolor="#E8E8E8";
separatorsize=1;
//subimage="/images/arrow.gif";
//subimagepadding=2;
}

with(pressStyle=new mm_style()){
fontfamily="comic sans ms, georgia, serif";
fontsize="14px";
fontstyle="normal";
fontweight="bold";
offbgcolor="#00d8ff";
offcolor="#000000";
onbgcolor="#40e2ff";
oncolor="#000000";
padding=3;
separatorcolor="#E8E8E8";
separatorsize=1;
subimage="/images/arrow.gif";
subimagepadding=2;
}

with(milonic=new menuname("listenMenu")){
overflow="scroll";
style=listenStyle;
aI("text=PAT METHENY;url=/media.cfm?artistid=1;");
aI("text=PAT METHENY GROUP;url=/media.cfm?artistid=2;");
aI("text=LYLE MAYS;url=/media.cfm?artistid=5;");
}

with(milonic=new menuname("watchMenu")){
overflow="scroll";
style=watchStyle;
aI("text=FILM SCORES;url=/media.cfm?categoryid=4;");
aI("text=LIVE VIDEOS;url=/media.cfm?categoryid=2;");
}

with(milonic=new menuname("pressMenu9")){
overflow="scroll";
style=pressStyle;
aI("text=BIOGRAPHIES;url=/biography.cfm?artistid=9;");
aI("text=CURRENT RECORD BIO;url=/record_bio.cfm?recordbioid=1;");
}
	
with(milonic=new menuname("pressMenu1")){
overflow="scroll";
style=pressStyle;
aI("text=BIOGRAPHIES;url=/biography.cfm?artistid=1;");
aI("text=CURRENT RECORD BIO;url=/record_bio.cfm?recordbioid=4;");
}
	
with(milonic=new menuname("pressMenu2")){
overflow="scroll";
style=pressStyle;
aI("text=BIOGRAPHIES;url=/biography.cfm?artistid=2;");
aI("text=CURRENT RECORD BIO;url=/record_bio.cfm?recordbioid=1;");
}

with(milonic=new menuname("pressMenu")){
overflow="scroll";
style=pressStyle;
//aI("text=CURRENT;url=/record_bio.cfm?recordbioid=1;");

aI("text=CURRENT PROJECT;url=/biography.cfm?artistid=9;showmenu=pressMenu9;");
aI("text=PAT METHENY;url=/biography.cfm?artistid=1;showmenu=pressMenu1;");
aI("text=PAT METHENY GROUP;url=/biography.cfm?artistid=2;showmenu=pressMenu2;");
	
}

drawMenus();

Also, just a note, I'm not sure why you have overflow="scroll"; since these menus aren't really long.

Ruth

[mcarlson]

Perfect, thanks - that did the trick.

[mcarlson]

Ah, I spoke too soon - I knew there was a reason I had the menudata.js inside that div. Since the menu table is in a div that has a position=fixed, it stays in the same place when the page content is scrolled. Removing the menudata script from this div made the popup menus scroll along with the content rather than stay in a fixed position relative to the menu. So what I've done to get around this is create a separate div for the menudata script with the same positioning that the menu has but a z-index of 6 (above everything else). This appears to have everything working properly.

[Ruth]

Hi,

I'm not sure what you mean. If you remove the submenus from the page itself, put them in a file and call that and the program files immediately after the body tag, when the submenus open they open 'outside' of any div on the page. They will open next to the parent item, and in all my tests they always opened next to the parent item, no matter how you scrolled the content area. I just tested that in FF, NN, IE, Opera, Safari 3 for pc. Now, if it works as you have them, fine, but they were not designed to be used that way, the submenus aren't supposed to be inside a div, only the parent 'menu, items' so I don't know what will happen in various browsers.

Ruth

[mcarlson]

These menus are dynamically generated based on information pulled from a database, so the submenus cannot be in an external .js file that is included. Instead, we include a ColdFusion file which queries the database and then generates the submenu javascript code. That is why they appear as part of the page. If I include this file right after the body tag, the submenus scroll along with the content. It seems to be working the way it's set up now and I've tested it across a number of browsers, so I'm not going to mess with it for the moment.

[Ruth]

Well, if it ain't broke, don't fix it

I don't think it makes any differnce about being generated from a data base, a lot of people do that. But, if it is working, that's fine. I have no clue why you are getting a scrolling submenu if you put it after the body tag, I don't in any of the browsers I listed. Just fyi, are you aware you can change the file extension [though you're not using one, but if you ever do] to .cfm? It will then process anything in the file through the cold fusion processor. I know John uses a cfm data file and has cold fusion functions in the menu.

Ruth