I have a WordPress mega menu and only the top level menu items seem to be selectable by tabbing to change the focus. All the sub menu items have tabindex="0" on the link but it seems like if the menu items aren't visible on page load, focus skips over them when the parent elements are visible. Any suggestions?
Looks like the same issue this user experienced:
Change focus to mega menu
Related
i wanted to know is there any chance to make for example a Dropdown and when i click it, it will apear like a dropdown menu.
Inside the dropdown it has to be a navigation bar to chossee what kind of data to display in the dropdown menu.
I'm trying to create a mega menu using a guide I've found by Valeriu Timbuc here: https://designmodo.com/create-css3-mega-menu/
I've found out while playing around with it that when a menu item is selected to show the menu div (menu 1), then when you select another menu (menu 2) to show it's menu div, if you move your mouse below the selected menu div (menu 2 - as you would when you're trying to select an item from the newly selected div), the selected menu jumps back to your first selected menu item (menu 1).
This only happens for menu items going right to left - it does not happen for items going from left to right. on the web demo it looks like it happens going both ways, on my personal test it only occurs going right to left
To reproduce the behaviour, perform the following on the demo page here: https://designmodo.com/demo/css3megamenu/
hover on the "Earnings" menu item
hover on any menu items to it's left - say "Top Rated" or "What's New", (for this example, we will use the "What's New" link as this has items in the drop down menu)
as soon as the "What's New" items are displayed, move your mouse down to select an item from the "What's New" drop down menu
the screen jumps back to the "Earnings" menu.
Doing the same thing but in the opposite direction from left to right, that is, having the "What's New" menu item selected first, then hovering on the "Earnings" menu item will show the correct behaviour where moving the mouse will not jump back to the previously selected menu item.
To view what is happening in action, please have a look at the video here: https://imgur.com/a/3Jg4w0b
This mega menu is perfect for what I need to do apart from this medium issue. Any help regarding this would be appreciated.
After going through multiple mega menu solutions, I've figured out what seems to be causing this issue.
When defining menu items in the menu dropdown section, the CSS for the display should be set to "None" (instead of "Block" shown in the demo) to prevent the div from being accessible at all.
Even though the div seems hidden as the visibility and overflow is set to "Hidden", it looks like the div area still exists which is why hovering below the menu item still acts as if the previous drop down menu item has been selected as that drop down still has a div showing on screen.
On the hover CSS, the display should be set to "Block" which will only draw the element while you hover on the link.
In Polymer 2 I would like to create an app-toolbar with menu buttons that on-click show a dropdown menu, similar to a classical desktop application. The app-toolbox seems to be a great start for a responsive solution and there are examples for creating toolbars with simple navigation buttons/links.
What I don't find are examples on creating dropdown menus in the toolbar.
My questions:
Which component should I use to show a dropdown menu in the app-toolbar? Maybe iron-dropdown? Is there any example?
What would happen to the dropdown menu when on narrow screens the app-toolbar collapses to the single menu button? Would the drawer that is shown by the menu button allow me to show the dropdown menus?
You could use paper-dropdown-menu, or iron-dropdown or some similar.
But you should pay attention for the iron-overlay-behavior dropdown content max-height.
I have this menu that when I hover on certain items, it dropsdown a list of new items. Sometimes this list is bigger than the browser window, so user need to scroll the page down to be able to see the whole list. The problem is that when the mouse reacher the scrollbar naturaly the menu lose it's hover function. I need to fix that asap, any suggestions?
Thanks.
Instead of doing hover on the menu item, maybe you should do an onclick event. This would allow the menu to appear on click and then when the user clicks the menu again it could make the sub-menu hide. This would allow you to scroll down the page and still have the sub-menu showing.
BTW, this assumes you cannot break the menu down into sub-menus like Nathan MacInnes mentioned.
Well if the user has to move the mouse off of the menu, it naturally should close. Maybe you should try making the menu shorter, or try making the menu itself scroll?
I created a css dropdown menu so my site will work with iphones. The dropdown is working correctly except for when you hover over a dropdown the sub items in the menu expand but when you hover over them the image on the main dropdown item looses it's color. I have it setup so that a different image is displayed when the mouse is hovering over it. Here is a link to pretty much the same code I have on my website. I just want the image to stay the same whether I am hovering over the main menu item or the subitems. Any help would be much appreciated.
http://jsfiddle.net/h5xZT/5/
To update your code it's simple. That should set you on your way. There is no need to use the "button" within a li item.
http://jsfiddle.net/h5xZT/19/