View Full Version : Closing all menus on click - smooth menu issue

12-03-2013, 07:46 PM
1) Script Title: Smooth Navigational Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm

3) Describe problem: There is an option to close all the menus when the mouse clicks on the area outside of the menu or when the mouse loses focus from the menu but what I need is to close all menus that are open when a menu item is selected. Right now if you set

closeonnonmenuclick: true, //when clicking outside of any "toggle" method menu, should all "toggle" menus close?
closeonmouseout: false, //when leaving a "toggle" menu, should all "toggle" menus close? Will not work on touchscreen

the nested list of menus will remain open until you click on an area outside of the menu. I want all menus to close (invoke the closeall function) when a menu item has been selected. This seems like a logical way to handle menu selections and the "All levels navigational menu" (http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/) works this way but I want the smooth menu to work that same way. What modification do you suggest to make that happen (I *think* I want to trigger the closeAll function when an anchor link is clicked)


12-05-2013, 03:37 PM
It is a pretty hacky solution but I added the following to the executelink function at line 81 (just before the e.stopPropagation(); call) to get what I needed:

e.type = 'mouseleave';

Now when I click on the link, all the other nested menus close.

12-05-2013, 10:22 PM
Are you sure you're using the latest version? Are you having this problem on the demo page?

12-06-2013, 03:13 PM
I just pulled the code and the demo page doesn't demonstrate the problem because it navigates to a different website. In my case, the menu selection inserts and begins to play a video using ajax without navigating away from the page. The open levels of the menu stay open with only the selected item closing. If if you are four levels deep in the menu, after you click on an item on the fourth level, the fourth level closes but the rest stay open.

Here is a demo that demonstrates the issue: http://www.petesworkshop.com/test/smooth-test-2.html . Follow the "Training Videos - STL" menu all the way to the end and select something on the menu. You will see that only the last menu closes, the other levels stay open. (a video isn't inserted in this demo, just the title)

12-06-2013, 05:14 PM
OK, I missed that this was a special case. Setting the event type on an object (e is an object in that code right?*) like that and passing that object to the desired function is perfectly fine. Just make sure you're doing it at the most opportune point or points in your code.

*One can create the object and pass it all on one line:

ddsmoothmenu.closeall({type: 'mouseleave'});

12-06-2013, 06:32 PM
Thanks John..the shorter code is actually a bit more clear so I'll take that approach.