:: All Levels Navigational Menu - Add onclick event to main menu bar

[JohninAustria]

1) Script Title: All Levels Navigational Menu (v2.2)

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

3) Describe problem:

I am using v2.2 of the All Levels Navigational Menu on a website, but I have this issue that when users "click" on the main menu bar the drop-down menu closes. This behaviour upsets the users as they would expect either a page to open (which I do not offer as they are all set href="#"), or the drop-down menu to at least stay open.

I have looked at the code in ddlevelsmenu.js but it is quite complex and would like some expert advice on what to change. I would like the drop-down to appear "onclick" in addition to "mouseover" for the main menu (top bar) items. When the mouse moves away, then the drop-down should close, unless the user moves the mouse down over the drop-down menu.

[mstombs]

There was a patch to V1.5 to replace the mouseover with a click

http://www.dynamicdrive.com/forums/s...25&postcount=1

but it doesn't work reliably (and not at all on an Androd mobile), the drop down often disappears before the user can select something - possibly due to the screen alignment changing to accommodate the dropdown.

[JohninAustria]

My requirement is that the menu drops down with both an "onclick" or "mouseover" event on the top bar, not replacing one with the other.

[mstombs]

But won't the mouseover trigger the dropdown first if both enabled? There seems to be some sensitivity issue with the timeout or onmouseout event which auto hides the dropdown. There is reference to this in the old thread - need to enlarge some regions to avoid, but I don't have the original 1.5 to see what exactly needs to be changed!

[JohninAustria]

Currently the mouseover event drops down the menu, but then the click closes the drop down menu. I want the click event to either behave the same as the mouseover or be ignored, so the menu remains dropped down, but only on the main menu bar. I don't care about the order of these events but I can't imagine a situation where the click would not follow the mouseover.

Just for clarification, I am using a horizontal version of the script and if you want see it in action look here http://www.zimo.at/web2010/

[cindylou]

oh...ryt, do you want it to have a drop down even when clicked...well, basically, the mouseover event comes first so there's a drop down..if you click it, it won't stay dropped...it must be a default action...try to check it... it's sort of a confusing command for the compiler to follow since it's a doubled procedure...try putting page links on the main menu cotaining the rest or the drop downs...so that you'll have an event...if not, try trapping it to stay locked but still have mousover event..

[mstombs]

Studying the script I find there is a specific function for a click on the header bar to hide the dropdown menu, so I think changing the "hidemenu" to "showmenu" on line 143 in ddlevelsmenu.js

From:-

	if (istoplevel){
		this.addEvent(header, function(e){
		ddlevelsmenu.hidemenu(ddlevelsmenu.subuls[this._master][parseInt(this._pos)])
		}, "click")
	}

To:-

	if (istoplevel){
		this.addEvent(header, function(e){
		ddlevelsmenu.showmenu(ddlevelsmenu.subuls[this._master][parseInt(this._pos)])
		}, "click")
	}

may fix our problem?

[JohninAustria]

Many thanks for that idea. It seems obvious now I look at the code. I have also modified a statement at line 351 in the same way :-

this.addEvent(dropul, function(){ddlevelsmenu.showmenu(this)}, "click")

I have tested it and now implemented it in production :- ZIMO Website

[mstombs]

Great that it works for you - the second link is for for menus that dropdown from dropdown items (sub-sub menus)?

I can also confirm this makes your site accessible to Android mobile phone - which would not previously have triggered the drop-down.

BUT - I'm not actually sure it is working the way I intended - I now see showmenu and hidemenu have different calling parameters!

hidemenu:function(submenu){
showmenu:function(header, submenu, dir){

A safer fix is just to comment out the lines!

[mstombs]

Great that it works for you - the second link is for for menus that dropdown from dropdown items (sub-sub menus)?

I can also confirm this makes your site accessible to Android mobile phone - which would not previously have triggered the drop-down.

BUT - I'm not actually sure it is working the way I intended - I now see showmenu and hidemenu have different calling parameters!

hidemenu:function(submenu){
showmenu:function(header, submenu, dir){

A safer fix is just to comment out the lines!