Page 1 of 2 12 LastLast
Results 1 to 10 of 16

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

  1. #1
    Join Date
    Jan 2011
    Location
    Probstdorf, Austria
    Posts
    9
    Thanks
    2
    Thanked 1 Time in 1 Post

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

    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.
    Last edited by JohninAustria; 01-17-2011 at 08:25 PM.

  2. The Following User Says Thank You to JohninAustria For This Useful Post:

    mstombs (01-08-2011)

  3. #2
    Join Date
    Jan 2011
    Posts
    7
    Thanks
    1
    Thanked 2 Times in 2 Posts

    Default

    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.

  4. #3
    Join Date
    Jan 2011
    Location
    Probstdorf, Austria
    Posts
    9
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default

    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.

  5. #4
    Join Date
    Jan 2011
    Posts
    7
    Thanks
    1
    Thanked 2 Times in 2 Posts

    Default

    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!

  6. #5
    Join Date
    Jan 2011
    Location
    Probstdorf, Austria
    Posts
    9
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default

    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/

  7. #6
    Join Date
    Jan 2011
    Posts
    50
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    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..

  8. #7
    Join Date
    Jan 2011
    Posts
    7
    Thanks
    1
    Thanked 2 Times in 2 Posts

    Default

    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:-
    Code:
    	if (istoplevel){
    		this.addEvent(header, function(e){
    		ddlevelsmenu.hidemenu(ddlevelsmenu.subuls[this._master][parseInt(this._pos)])
    		}, "click")
    	}
    To:-
    Code:
    	if (istoplevel){
    		this.addEvent(header, function(e){
    		ddlevelsmenu.showmenu(ddlevelsmenu.subuls[this._master][parseInt(this._pos)])
    		}, "click")
    	}
    may fix our problem?

  9. The Following User Says Thank You to mstombs For This Useful Post:

    JohninAustria (01-15-2011)

  10. #8
    Join Date
    Jan 2011
    Location
    Probstdorf, Austria
    Posts
    9
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default

    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 :-

    Code:
    this.addEvent(dropul, function(){ddlevelsmenu.showmenu(this)}, "click")
    I have tested it and now implemented it in production :- ZIMO Website
    Last edited by JohninAustria; 01-15-2011 at 08:48 PM.

  11. #9
    Join Date
    Jan 2011
    Posts
    7
    Thanks
    1
    Thanked 2 Times in 2 Posts

    Default

    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!

    Code:
    hidemenu:function(submenu){
    showmenu:function(header, submenu, dir){
    A safer fix is just to comment out the lines!

  12. #10
    Join Date
    Jan 2011
    Posts
    7
    Thanks
    1
    Thanked 2 Times in 2 Posts

    Default

    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!

    Code:
    hidemenu:function(submenu){
    showmenu:function(header, submenu, dir){
    A safer fix is just to comment out the lines!

  13. The Following User Says Thank You to mstombs For This Useful Post:

    JohninAustria (01-17-2011)

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •