CODEWITHSUNDEEP
htmlcss
joebegborg07
joebegborg07

Reputation: 839

CSS - Slow Hover effect

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>&nbsp;</p>

</body>

</html>

Thanks in advance :)

Regards,

Joseph

Upvotes: 18

Views: 111181

Answers (6)

Sandeep Sherpur
Sandeep Sherpur

Reputation: 2802

Check this working DEMO

.transition{
    transition: all .4s;
    -moz-transition: all .4s;
    -webkit-transition:all .4s;
    -o-transition: all .4s;
    
    margin-top:20px;
    border:1px solid gray;   
    width:80px;
    padding:10px;
    margin-left:50px;
    position:relative; 
    cursor:pointer;
}

.hover_top{ 
    top:0;
}
.hover_top:hover{
    top:-10px;
}

.hover_left{    
    left:0;
}
.hover_left:hover{
    left:-10px;
}

.hover_right{   
    right:0;
}
.hover_right:hover{
    right:-10px;
}
 <div class="hover_top transition"> Hover Top </div>
 <div class="hover_left transition"> Hover Left </div>
 <div class="hover_right transition"> Hover Right </div>

Upvotes: 0

Edward
Edward

Reputation: 2359

You can add an ease in the transition.

transition: all .4s ease;
-webkit-transition: all .4s ease;

Upvotes: 30

Joe
Joe

Reputation: 6416

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

Upvotes: 8

Aaron Gray
Aaron Gray

Reputation: 11703

If you want the sub menu to take 1 second to drop down, rather than it delaying for 1 second before it drops down, one option for complete control over acceleration and movement (if you want to get fancy) is to use CSS animations and @keyframes.

Here is a cool demo showing off the level of control you have with CSS animations.

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115045

Because you are using visibility:hidden, this cannot be transitioned as you might think...it only has an on and off state.

What you can do is combine it with opacity and use transition delays to offset the appearance until the opacity has kicked in.

Here. http://www.greywyvern.com/?post=337

Upvotes: 0

Maxim Ershov
Maxim Ershov

Reputation: 1284

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

Upvotes: 13

Related Questions