Accordion Menu Help

[sjm133]

1) Script Title:
Accordion Menu script (v1.3) -- "Glossy" version

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

3) Describe problem:
I've implemented the accordion menu script and have it working pretty well. I am experiencing one issue I need some help with that occurs on all sub-section items. When I expand a section, my list of links is presented fine. When I click the item my new page loads and the menu persists with the correct section still open. But now to select a different item in the open list I must put the mouse directly over the text to select it instead of anywhere in the item border as happens normally. If I close the section the re-open it the mouseover clicking works fine. Several users have brought this to my attention so I would really like to get it resolved. The menu is great and I have not found anything else that works as well.
I'm not a javascript or css expert, working towards it...., so any help here is of course greatly appreciated.

Oh, this only appears to happen in IE. I'm using IE 6 but it does not happen with Safari or IE 7. IE 6 is our company standard and I need to find a solution.

[ddadmin]

I've noticed this with many CSS menus actually. That is to say, if my mouse is over a menu item and I click it to navigate to another page with the exact same menu in the same location without moving my mouse, IE doesn't know the mouse is over the link until I move out then back again over the link. It just seems to be the way IE behaves when it comes to this.

If I'm mistaken on what you're describing, you may wish to include a link to the problem page.

[sjm133]

This only happens in IE6. I only have access to IE 7 and Safari for Windows. What you describe is only partially correct. Even if you move the mouse out of the "hover" area and then move it back to anywhere within the open section you have to place the cursor over the item text to get the hover bgcolor and href. I'm afraid I don't have access to an external site so you can see it but I've outlined the steps below.
1) From the script page, url at top of thread, I downloaded the glossy version js scripts, images, etc.
2) I just copied the HTML example direct from the page and pasted it in 2 separate HTML files on my local machine; menu1.htm and menu2.htm
3) edit each .htm and in one of the sections, same one in each, change the URL to link to the other .htm file. For example, in menu1.htm, for section CSS Examples, change the url for Horizontal CSS Menus to "menu2.htm" and in menu2.htm change the same URL to "menu1.htm".
4) Open menu1.htm in IE6. Open section CSS Examples. When you move the mouse over any part of the menu item, text or empty area, the bgcolor highlights and you can also click outside of the text area and reach the target page. When menu2.htm loads after you click the item move your mouse into the blank area of the page. Now move it back and you have to have the mouse over just the text to get the highlight and also to get back to menu1.htm. When that page loads back the same issues occur. In order to get the hover to happen again you must close the section and then reopen it. This is bad.

I know this is an IE6 CSS issue, fixed apparently in IE7, but there must be some hack to make it behave correctly and my company cannot use IE7, or anything else, yet. I don't want to scrap using this because I can't find a suitable replacement. It looks good, it's free, plus it looks good and is free.
Someone please help!! Thanks.

[ddadmin]

I see what you mean now, which is different than the issue I was referring to actually then. I'll see if I have some time later today to explore this some more.

[sjm133]

That sounds great. I was hoping it wasn't something I was doing wrong or, somehow, our implementation of IE6. Thanks for your efforts.

[ddadmin]

I've narrowed it down (not the problem per say, but the solution) to the below setting inside the configuration file:

	animatedefault: false, //Should contents open by default be animated into view?

As an immediate fix, setting it to true should do the trick:

	animatedefault: true, //Should contents open by default be animated into view?

Can you live with the sub menus being animated into view by default when the page loads?

[sjm133]

That indeed does work around it. I've also been doing some testing myself, trial and error stuff, mostly error. First what I did what take the code sample straight from the script page. I then added a property to the CSS class ".glossymenu div.submenu". To my amazement this seemed to correct the problem. So in my site page code I did the same thing. But here it did not correct it. So next I returned to the sample code and started rebuilding the menu items one at a time from my site code thinking I was missing a tag or misspelled a class or something like that. I got down to replacing the last section in the sample code and found that once I removed the item that contained the "<img src" tag it stopped working. So, in my code I have the following:

.glossymenu div.submenu{ /*DIV that contains each sub menu*/
background: white;
display: block; /*added this to "fix" hover on IE6 page reload */
}

Using this method I also MUST have the image somewhere in the structure. If I remove it it no longer works. It's like the fetching of the image from the server triggers an event that reinitializes the block???

Bottom line, both your method and mine do work, but I have no idea why either actually does.... Maybe my method gives you some new ideas on the issue. I do appreciate the help. When my server becomes available to me again I will try using your method and see how it works; if the aninmation is too distracting. Please keep me posted on your findings.

[sjm133]

Any updates on this?

[ddadmin]

To be honest I haven't had a chance to look into this some more since we left off. You didn't mention whether the existing method I mentioned turned out to be too distracting?

[sjm133]

You are correct, I didn't mention it. So far I have not heard any grumblings, other than the usual stuff, so I guess it's ok. Thanks for reminding me and all your help.