Accordion Apple Style, OnMouseOut collapse All

Apple style Accordion Menu

http://www.dynamicdrive.com/dynamici...menu-apple.htm

My problem is, that i want onMouseOut from the header (where the header is already expanded) that will collapse the Header or All Headers...

i hope anybody can help me, please..

p.s: sorry for my bad-english, im from germany.

If you mean have the expanded header collapse when the mouse rolls out of it, even if into open space on the page, inside ddaccordion.js, try adding the lines in red to the existing code:

Code:

---

                        else{
                                $(this).trigger("evt_accordion")
                                return false //cancel default click behavior
                        }
                })
                if (config.revealtype=="mouseenter"){
                        $('.'+config["headerclass"]).bind("mouseleave", function(){
                        ddaccordion.collapseone(config["headerclass"], parseInt($(this).attr("headerindex")))
                })
                }

---

Or if you want, just use the modified ddaccordion.js file attached below instead.

hey, ddadmin, thats perfect... thank you very much.

but i have a second problem "now", when i Mouseover the Header it will be expanded, thats okay, and wenn i mouseout that will be collapsed, thats perfect...

but wenn i go with the mouse of the expanded DIV ("submenu", by apple style) that will be collapse it too, because the mouseover function, i think the mouseover function is only for the header,thats right?? hwo can i realize that, that if i mouseover also from the submenu, THAN will be collapsed...?

i hope you or anybody understand my bad-english!? =) =(

Ah yes. Try the below .js file then in place of what I posted above.

yeah, thats it. I thank you so much ddadmin.

Hi ddadmin, I need something like zero3.... and can't quite figure it out.

I need the content to reveal when mousing over the header and to hide when the user mouses out. However, there are links in the content so I need it to stay expanded (revealed) while the user is in the content area.

So
expand when mouse over header and content.
Collapse when mouse goes out of header or content.

English is my first language and I still have trouble explaining. I hope you understand and I sure thank you for any assistance. This is a great script!

Actually blueginko, the 2nd attached file above should do this already.

I think did try that, but when I moved out of the header down into the content area, the content collapsed. Did I need to change the html as well? I've put back the original so that a manager could see the original way it but will (if I get chance) try again tonight. Otherwise it will be Monday, but I will definitely try it again.

Thanks!!
Blueginko

Nope, no changes to the HTML should be required. Please post a link to the page on your site that contains the problematic script so we can check it out.

Hi, it's http://www2.creighton.edu/testing/m-...cultyandstaff/.

mouse over the "BlueSuite" button on the upper right of the content area just below the weather.

Thanks so much!!!!
blue

Hmmm everything looks right. As part of trying to visually see where the ".submenu" areas are, I saved a local copy of your page and gave that area an explicit background via CSS:

Code:

---

<style type="text/css">
.submenu{background: yellow}
</style>

---

I don't see this being applied to your expanded content area, however. Is there something in your CSS that's causing this?

could be....okay to test this I threw the whole script on a page by itself. And then put back in the original CSS. It is something to do with the CSS.
I can't promise I'll get it figured out today (am battling flu) but will let you know when it's settled.

Thanks so (SOOOO) much for the quick responses and all the help. I'll let you know what it was that buggered the script. If you are interested the script is at http://www2.creighton.edu/testing/m-...yandstaff/one/.

Thanks again, I'll let you know

Quote:

---

Originally Posted by ddadmin

Ah yes. Try the below .js file then in place of what I posted above.

---

I've tried this and I have the same outcome as the first .js file: the menus collapse when the submenu is moused over:

http://dev.eller.arizona.edu/index_menu1.aspx

Thoughts?

Thanks much!

Wow this one's got me running around in circles. Ok, try the below .js file instead.

Thanks much for the quick turnaround. Well, I have to say I'm not sure what's going on with it now. It seemed to work for the first three nav items, but not the next five, and then if I mouseover them again, it's back to the original behavior of not staying open at all. Or at least I don't see any consistency.

Perhaps it's something to do with the images I've inserted between the menuheaders?

No, that doesn't seem to make a difference:

http://dev.eller.arizona.edu/index_menu2.aspx

I also toggled the persiststate to see if that makes a difference, but doesn't appear to. On the latest .js, the menu will both open on the mouseover and, next time moused over (or so it seems) close.

Any assistance is of course greatly appreciated.

Also, a follow-up question:

Is it possible to trigger the closing/opening only on the text itself and not the full area or line?

Obviously I'm not much of a CSS expert, so perhaps that's an easy solution.

Thanks.

For me I found it was the padding in

.applemenu div.submenu{
background: white;
padding: 2px;
height:165px;
}

to get it to match the buttons below it, I had it set to 0. That is what caused the content to collapse after the mouse moved off the header. Now why this would occur is beyond me, I did play with it a little and it indeed seemed to be the padding.

No luck with that on my end, but I definitely appreciate the suggestion.

Is is possible for this script to accomplish the same thing as the menu on this page

That Wilson site is using Flash to drive its menus.

Stumbled on another problem. The page I did the main testing on is fine but one of the other pages it is on has another javascript menu sitting above it. The Accordion script bleeds through and makes it impossible to use the other menu.

Page. http://www2.creighton.edu/students/index.php

Accordion script is "BlueSuite". The offending (I mean offended) script is the Quick links above it.

Is there a way to avoid this? I tried z-index to no avail. FF of course is fine, it's just in IE that it's doing this.

Thanks so much for your help!
Blue

I don't see a problem with it in IE7. As soon as I mouse off the quicklinks dropdown the BlueSuite appears again, so I'm not seeing a conflict.

By the way, have you tried a menu with multiple flydowns (i.e., if N.E.S.T. and CUmail). Just curious; that's what I cannot get to work properly.

thanks for taking a look, you probably caught it after I figured it out. It was the position:relative of the anchor.

The page isn't mine (thank goodness). I just added the accordion script to it.

thanks for getting back to me, sorry I didn't get back here quick enough.

Blue