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?
Related
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.
This is the site in question: http://www.seven-lakes-exposure.com/
The problem I'm having is the drop down submenu appears over the slideshow, but you can't click on "Landscapes" without it disappearing.
This only occurs when the submenu is overlapping the slideshow. Otherwise, the submenu works fine.
Using pointer-events: none on the slideshow enables you to click on the submenu without it disappearing, but obviously it disables the slideshow events, which I don't want.
How do I keep a clickable event visible over another clickable event?
Thanks for your help!
I have a little issue with a menu on my Joomla 2.5 page. It's a module and I used several CSS properties like:
visibility:visible; z-index:99999!important
Yet, the menu does not delays for me to click it.
I want the menu to be clickable when the reader mouse over and mouse on the second level menu. I don't want it to disappear any more.
A sample of what I want the menu to look like can be found here: http://vitafoam.com.ng
On the css class ul.navi ul.level2 on menustyle.css, remove the top: 91px property. It is throwing your level2 menu down, and keeping you from hovering it.
Removing the top property fixed the problem, at least on my Chrome Debug.
I know this will be a simple fix for all the CSS pros out there but I am fed up with it at the moment and anything I try won't solve it.
When you hover over certain nav items there will be a drop down. I need that little white gap between the drop down and the item but it disappears as soon as i try to go down. Any solution would be greatly appreciated.
There's a gap between the "GM Parts" button and the dropdown menu. You hover over the button then menu shows up. Then you try to drag your mouse to the menu, but while you are doing this you hover over the gap - that's where "GM Parts" looses :hover state and the menu hides. You need to make sure that there's no gap between "GM Parts" and the menu.
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/