PDA

View Full Version : Resolved :: All Levels Navigational Menu - Add onclick event to main menu bar



JohninAustria
01-08-2011, 02:45 PM
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
01-08-2011, 03:26 PM
There was a patch to V1.5 to replace the mouseover with a click

http://www.dynamicdrive.com/forums/showpost.php?p=175225&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
01-08-2011, 05:02 PM
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
01-08-2011, 07:34 PM
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
01-09-2011, 10:14 PM
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
01-10-2011, 05:57 PM
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
01-12-2011, 10:29 PM
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
01-15-2011, 08:40 PM
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 (http://www.zimo.at/)

mstombs
01-15-2011, 11:45 PM
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
01-16-2011, 12:28 AM
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!

JohninAustria
01-16-2011, 11:58 AM
OK, I have commented them both out for now and it still works.

I am not quite sure why it worked the other way, but I can see that the call with the wrong parameters might produced errors in certain circumstances (you can never test all the cases!), so it is probably safer commented out.

JohninAustria
01-17-2011, 07:50 PM
Can I mark this thread as closed?

Do I have to notify a moderator to do this, or what?

I am new to this forum and not sure of the procedure.

djr33
01-17-2011, 08:04 PM
You should be able to edit your original post and mark it as "Resolved" so that others know you have found a solution. Moderators could close this thread and stop further replies, but usually we leave them open in case someone has a related question. Of course if you ever have a question for a moderator feel free to send one of us a PM.

JohninAustria
01-17-2011, 08:39 PM
You might want to add this to the FAQ. I searched the FAQ and could not find any description of how to mark a thread as "Resolved" so I had to make the previous posting in desperation. I could see there was some special marking in certain threads, but not how to do it. I looked and expected this function to be in the "Thread Tools" drop-down.

In the end, after your message, I did find that there is a drop-down field next to the Title field when you edit the first posting. You can select "Resolved" and then this appears in front of the Title of the thread. In my opinion, it's not obvious how to do this and needs to be better documented or added to the "Thread Tools" for the original poster or a moderator (obviously this should not be available to all).

djr33
01-17-2011, 08:42 PM
Thanks for the feedback. I'll make a note of it and discuss it with the other moderators and the administrator. The problem may be that the forum doesn't support this, but it might be something that could be suggested for the next version of the software.

CyberHitler
03-01-2011, 11:01 AM
Wow it looks very nice excuse me guys :) can I have it use on my blog or what should I do to get it works on blog ? sorry for asking it here