PDA

View Full Version : HV Menu - Flash animation hiding / overlapping



diannajacobsen
10-16-2006, 08:05 PM
1) Script Title: HV Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/hvmenu/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
01-15-2007, 06:04 PM
I would love to see if any has solved this... I am having the same issue.

jscheuer1
01-15-2007, 07:09 PM
Follow the detailed information at:

http://www.macromedia.com/cfusion/knowledgebase/index.cfm?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
01-31-2010, 08:33 PM
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
01-31-2010, 10:17 PM
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
01-31-2010, 10:25 PM
I'm just not sure where I'm supposed to put the z-index, etc. Any suggestions for a newbie to CSS?

jscheuer1
02-01-2010, 02:17 PM
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/csslibrary/item/jquery_multi_level_css_menu_horizontal_blue/

and:

http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/

jscheuer1
02-01-2010, 02:52 PM
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
02-01-2010, 03:00 PM
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
02-01-2010, 06:17 PM
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.