Menu
I am creating a CSS dynamic menu and would like to delay the on hover action. The reaction of the menu to when hovering over it's links is to provide a sub menu(drop down).
I would like to slow down the drop down process so that the sub menu would not appear instantly, but would take 1 second to drop down. Help is greatly appreciated.
Code is below:
<html>
<head>
<style>
#navMenu{
margin:0;
padding:0;
}
#navMenu ul{
margin:0;
padding:0;
}
#navMenu li{
margin-right:2px;
padding:0;
list-style:none;
float:left;
position:relative;
background:#CCC;
}
#navMenu ul li a{
text-align:center;
font-family:sans-serif, cursive;
text-decoration:none;
height:30px;
width:150px;
display:block;
color:#000;
border:10px;
-webkit-transition: background-color 0.1s;
-moz-transition: background-color 0.1s;
-o-transition: background-color 0.1s;
transition: background-color 0.1s;
}
#navMenu ul ul{
position:absolute;
visibility:hidden;
-webkit-transition: background-color 0.1s;
-moz-transition: background-color 0.1s;
-o-transition: background-color 0.1s;
transition: background-color 0.1s;
}
#navMenu ul li:hover ul{
visibility:visible;
-webkit-transition: background-color 0.1s;
-moz-transition: background-color 0.1s;
-o-transition: background-color 0.1s;
transition: background-color 0.1s;
}
</style>
</head>
<body>
<div id="wrapper"><!--beginning of wrapper div-->
<div id="navMenu"><!--Beginning of Nav Menu-->
<ul><!--Beginning of main UL-->
<li><a href="#">About Us</a>
<ul><!--Begining of Internal UL-->
<li><a href="#">Link item </a></li>
<li><a href="#">Link item </a></li>
<li><a href="#">Link item </a></li>
<li><a href="#">Link item </a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul><!--End of Main UL --></div>
</div>
<p> </p>
</body>
</html>
Thanks in advance :)
Regards,
Joseph
536
HTML, CSS and JavaScript To set the speed of the hover, use the transition-duration property. To set the hover, use the :hover selector.
The transition-property property specifies the name of the CSS property the transition effect is for (the transition effect will start when the specified CSS property changes). Tip: A transition effect could typically occur when a user hover over an element.
You must set an initial left value for form-container . If there is no initial left value the browser doesn't know from where to animate to the set hover value. This should fix your issue.
You can add an ease in the transition.
transition: all .4s ease;
-webkit-transition: all .4s ease;
you can use css transition-delay property as follows:
transition-delay: 1s; /* delays for 1 second */
-webkit-transition-delay: 1s; /* for Safari & Chrome */
Find more info here http://www.w3schools.com/cssref/css3_pr_transition-delay.asp
13
You can use the transition-delay property for this.
fiddle
Update
Since you want the animation to complete in one second, you simply need to state that as your duration. For example: transition: background-color 1s linear;
updated fiddle
8
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
