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.
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 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
i have used two components 1) navbar 2) login in mobile view when i click into menu option not able to see menu options Please check image for better understanding i have used bootstrap.
You may forget to trigger toggle function for your menu when you click the menu button. (Also should check element's display property from css.
You may try with add css for your menu element z-index: 1 or position:fixed for your menu.
I have a pure CSS navigation menu with a drop-down section based on some automated menu creation tool and heavily edited.
Previously the drop down was a single column but now, with increased number of pages, it needs to have multiple columns to remain neat looking.
The problem is now the drop-down menu covers my form (where it previously didn't), which is fine, but when moving your mouse over links in the menu the thing closes if you touch any form fields that are behind it.
Menu CSS is probably too long to paste here. Is there a way to stop the drop down from closing when touching elements behind it with the mouse?
Set the z-index of the menu to a high number. Should keep it above other elements.
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/