Menu Usability Problem

[mirianderl]

Hi, thanks for the theme! I’m using it for our study programme’s website: http://www.online-redakteure.com/de/

I have one big issue with the menu: If I resize my browser window or use a low resolution screen, the items in the main menu break into a second line — behaviour as expected, no problem with that. But, if one of the first main menu items has submenu items, I can’t “reach” them with the mouse due to the line break. What happens is that anytime I hover a main menu item and see its submenu items, I move the cursor down to click them, but they vanish because another main menu item is in the way. I attached a screenshot to illustrate.

I searched for solutions, and found that slowing down the js dropdown menu sounds most promising. I found this: https://wordpress.org/support/topic/slow-down-drop-down-menu and applied their suggestion to the theme’s main.js file in the /js folder.

Here’s what they did to the js menu:

}, function(){
$(this)
.removeClass(‘hover’)
.children(‘ul’)
.delay(‘900’)
.slideUp()
;
$(this).find(‘div.menu-header-menu-container’)
.children(‘ul’)
.delay(‘900’)
.slideUp()
;
});

Unfortunately, it had no effect on my menu. Since I’m not familiar with js, can you help me with this?

Or do you have any other solution to this menu bug, assuming I can’t be the first to encounter this?

Thank you very much in advance!

Best, Miriam

Attachments:

You must be logged in to view attached files.

[Marco]

HI Miriam, please write which device are you doing the test?(screenshot)
Regards
Marco

[mirianderl]

I’m on a Macbook 13” with an external display. The problem does not occur on mobile devices, since there you don’t have the :hover and anything that follows…

[mirianderl]

Meanwhile, I figured that what I described above is maybe not really what I need, since it would only slow down the fade in and out of the menu (and submenu) as a whole. What I do need is that the mouse hovering is less ” sensitive”, meaning that the sub menu stays expanded while the mouse has already left the concurring main menu item.

[Marco]

Hi Mirianderl, attached new main js file with SLOW hover on menu items…

Open the file and replace with your existing one…

Best Regards
Marco

Attachments:

You must be logged in to view attached files.

[mirianderl]

Thanks! That worked, but it didn’t fix my problem. I still can’t click any sub menu item as soon as the main menu items break into two lines (when resizing the browser window or when using a lot of them in a row).
Say, I have this main men:

A // B // C // D // E // F

C has children C1, C2, C3, which are toggled when hovering C and displayed underneath it.

A // B // C // D // E // F.

C1 // C2 // C3

Consequently, I move my cursor down from C to C2 and then I click.

Now, in small windows, the menu looks like this:

A // B // C
// D // E // F

and correspondingly like this when I hover C:

A // B // C
// D // E // F

C1 // C2 // C3

Whenever I move my cursor down from C to C2 (because I want to reach C2), I — involuntarily but necessarily — toggle items E or F, and C1, C2 and C3 vanish. I can never really reach C2.

I’m trying to find a way now to display sub menu items directly underneath its corresponding main menu item. So, instead of

A // B // C
// D // E // F

C1 // C2 // C3

I need to have:

A // B // C

C1 // C2 // C3

// D // E // F

 

Is that possible?

Thank you!
Best, Miriam

[Marco]

HI Mirian, your question is very hard :))) this menu is for only 3 levels… if you need a complex menu take a look at this Mega menu plugin:
http://codecanyon.net/item/ubermenu-wordpress-mega-menu-plugin/154703?WT.oss_phrase=&WT.oss_rank=3&WT.z_author=sevenspark&WT.ac=search_list

Best Regards
Marco