HV Menu - Flash animation hiding / overlapping

[diannajacobsen]

1) Script Title: HV Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...menu/index.htm

3) Describe problem: The script works great. But on home page of site the menu drops down over a flash animation and the animation hides the menu. Is there anyway to get the menu to layer over top of the animation? I have tried playing with z-index of the menu div tag. Here is the link http://diannajacobsen.com/joa/index.html
Any ideas or suggestions would be appreciated. Thank you!

[connman21]

I would love to see if any has solved this... I am having the same issue.

[jscheuer1]

Follow the detailed information at:

http://www.macromedia.com/cfusion/kn...fm?id=tn_14201

Or, if this short version (good in most cases) fixes it, so much the better! Add in this language to your object/embed tag:

Add the following parameter to the OBJECT tag:

<param name="wmode" value="transparent">

Add the following attribute to the EMBED tag:

wmode="transparent"

[Pooky]

I did this and it still has not fixed my problem. Can you check my site to see if perhaps I put the code in the wrong place?

http://www.designbyily.com/api/index.html

Thank you so much.

Iliana

[molendijk]

Follow jscheuer's advice AND make sure that your menu has sufficient z-index (plus 'position: absolute' or 'position: relative' plus (maybe) a background-color).
===
Arie Molendijk.

[Pooky]

I'm just not sure where I'm supposed to put the z-index, etc. Any suggestions for a newbie to CSS?

[jscheuer1]

Looks like it's working here, more or less. You are missing the little arrow images for the menu though. And you will need a background color for the menu items in IE, restore that. If you follow the directions on the menu's demo page, they come with background color.

Demo pages for this menu:

http://www.dynamicdrive.com/style/cs...rizontal_blue/

and:

http://www.dynamicdrive.com/style/cs...el_css_menu_2/

[jscheuer1]

I had a closer look at this. Try using:

.jqueryslidemenu{
font: bold 12px Verdana;

width: 100%;

padding: 50px;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #A7BD37; /*background of tabs (default state)*/

color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
 /*tab link background during hover state*/
color: white;
}
	
/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

in place of your current jqueryslidemenu.css contents.

[Pooky]

John,

Thanks so much for your help. I went ahead and changed the colors, but want to take away the bars in between and can't seem to find the code for that. I'd also like to get rid of the arrows all together.

Iliana

[jscheuer1]

To get rid of the bars, get rid of (highlighted):

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;

color: white;
padding: 8px 10px;
border-right: 1px solid #5f8700;
color: #2d2b2b;
text-decoration: none;
}

The arrows are part of the script. I'd try editing them out from here in the jqueryslidemenu.js file (remove the highlighted):

$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
	'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
	+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
	+ '" style="border:0;" />'
)

Make sure to remove all of the highlighted section. If you leave any behind it will cause an error.