Amiant-CSS3-Menu delay on mouse out
Permalink Browser Info Environment
Hello,
I would like to ask, if a change can be made, so the dropdown menu does not disappear at once when you take mouse away from the button of the menu. I like the Amiant menu but the point is, the first move of the mouse of the main menu to the secon-level works bad, it disappears so you gotta go ninja with the mouse to catch it, second lvl dropdowns etc are fine (the horizontal opening). If there is a way to put a delay, half a second or a second, on mouse out please share, would help a lot.
I would like to ask, if a change can be made, so the dropdown menu does not disappear at once when you take mouse away from the button of the menu. I like the Amiant menu but the point is, the first move of the mouse of the main menu to the secon-level works bad, it disappears so you gotta go ninja with the mouse to catch it, second lvl dropdowns etc are fine (the horizontal opening). If there is a way to put a delay, half a second or a second, on mouse out please share, would help a lot.
| Type: | Discussion |
|---|---|
| Status: | New |
Ok - I found a work around. let me know if you can come up with something cleaner.
I decided the problem is that when the mouse moves down, it goes off the main menu bar and does not connect yet with the drop down menu, so it just drops out. Try this:
go to the
view.css file and then go to here:
see the margin? it was originally set at 0 like this:
margin: 0px;
so I bumped it up a pinch and now you can use the drop down menus.
I hope you can figure out something nicer ;-)
I decided the problem is that when the mouse moves down, it goes off the main menu bar and does not connect yet with the drop down menu, so it just drops out. Try this:
go to the
view.css file and then go to here:
/* level 2 list */ .amiant-css3-menu-navigation-bar .navigation-menu ul { background: #bea472; /* for non-css3 browsers */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bea472', endColorstr='#afa38d'); /* for IE */ background-image: -webkit-linear-gradient(top, #bea472, #afa38d); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bea472), color-stop(100%, #afa38d)); background-image: -moz-linear-gradient(top, #bea472, #afa38d); /* Old Firefox < v10 */ background-image: -moz-linear-gradient(to bottom, #bea472, #afa38d); /* New Firefox > v10 */ background-image: -ms-linear-gradient(top, #bea472, #afa38d); background-image: -o-linear-gradient(top, #bea472, #afa38d); background-image: linear-gradient(top, #bea472, #afa38d); display: none; margin: -5px 0px 0px 0px; padding: 0; width: 200px;
Viewing 15 lines of 18 lines. View entire code block.
see the margin? it was originally set at 0 like this:
margin: 0px;
so I bumped it up a pinch and now you can use the drop down menus.
I hope you can figure out something nicer ;-)
CSS3 Transitions don't work with "display" property.
If you set "display: none;" (hide menu) - menu will disappear immediately even if transition is set to 1 second.
To implement delays for menu it should be not CSS only. It should use JavaScript.
I need inspect this behavior in details to create a solution. Right now I have no time to play with Amiant CSS3 Menu.
Sorry and thank you!
If you set "display: none;" (hide menu) - menu will disappear immediately even if transition is set to 1 second.
To implement delays for menu it should be not CSS only. It should use JavaScript.
I need inspect this behavior in details to create a solution. Right now I have no time to play with Amiant CSS3 Menu.
Sorry and thank you!
Hi Cravener,
thanks for looking at this. I figured it was a java script issue. Just don't know enough yet about it.
I found a work around of sorts, in the mean time - more to learn!
thanks for looking at this. I figured it was a java script issue. Just don't know enough yet about it.
I found a work around of sorts, in the mean time - more to learn!
Yes, you may use negative margins to keep menu visible. But it not adds delay to menus =)
I'm having the same problem and I'm currently looking at this article:
http://www.css3files.com/transition...
I found the css property here:
amiant_css3_menu
> blocks
> amiant_css3_menu
> view.css
I'm hoping the answer is in this - I love this menu bar and have been able to style it to look just right, so hopefully something in this can be helpful. let me know if it works out.