CODEWITHSUNDEEP
htmlcss
user3657758
user3657758

Reputation: 37

How to make Drop Down Menu Delay Close

I have created a drop down menu which works fine but what i want to happen is once you hover over Menu Two and move the mouse off of the menu to another part of the screen the menu stays open for five seconds and then closes.

I just cannot figure out the last part. I have tried various transitions so this is what i have so far, can someone assist please?

Thanks

<style type="text/css">
#example1{

width:200px;
height:50px;
background:#FFFFFF;

}

.parent{

position:relative;
display:block;
width:200px;
height:50px;
float:left;

}


.sub{

visibility:hidden; /* This hides the menu until we hover */
position:absolute;
top:50px;
left:0;
width:200px;
height:250px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
overflow:hidden;

}

.parent:hover .sub{

visibility:visible; /* This makes the menu visible when user hovers */
text-align:center;


}

.sub a{

color:#000;
background:#ffc34c;
display:block;
width:200px;
height:50px;
text-align:center;
line-height:50px;

}

.sub a:hover{

background:#f06000;
color:#fff;

}


/* Drop Down Two: Slider */

#two{

visibility:visible!important;
height:0;
transition:height 0.4s ease-in-out;
-moz-transition:height 0.4s ease-in-out;
-webkit-transition:height 0.4s ease-in-out;
-o-transition:height 0.4s ease-in-out;


}

.parent:hover #two{

height:250px;

}



/* Drop Down Two: Slider with Delay */

#two{

background:#FFFFFF;
border: 1px solid #CECECE;
visibility:visible!important;
height:0;
transition:height 0.4s ease-in-out;
-moz-transition:height 0.4s ease-in-out;
-webkit-transition:height 0.4s ease-in-out;
-o-transition:height 0.4s ease-in-out;

}

.parent:hover #two{

height:250px;

}

#two a{

opacity:0;
transition:opacity 0.4s ease-in-out;
-moz-transition:opacity 0.4s ease-in-out;
-webkit-transition:opacity 0.4s ease-in-out;
-o-transition:opacity 0.4s ease-in-out;
transition-delay:0.4s;
-moz-transition-delay:0.4s;
-webkit-transition-delay:0.4s;
-o-transition-delay:0.4s;

}

.parent:hover #two a{

opacity:1;
    transition: all 0.5s ease 0s;
}

</style>

<div id="example1">


<div class="parent"><a href="#" class="button">Menu Two</a>
<div class="sub" id="two">
                               <div class="error_box"></div>


menu 1<br>
menu 1<br>
menu 1<br>
menu 1<br>
menu 1<br>
menu 1<br>
menu 1<br>
</div>


</div>

I have also tried adding:

transition-property: height;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;

to the style below

#two{

background:#FFFFFF;
border: 1px solid #CECECE;
visibility:visible!important;
height:0;
transition:height 0.4s ease-in-out;
-moz-transition:height 0.4s ease-in-out;
-webkit-transition:height 0.4s ease-in-out;
-o-transition:height 0.4s ease-in-out;

transition-property: height;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
}

But this again just opens and closes the menu slowly

Upvotes: 1

Views: 1440

Answers (3)

myfunkyside
myfunkyside

Reputation: 3950

You need two separate classes for the sub-menu.
And then with Javascript, use onmouseover to add the class that shows the sub-menu..
..and onmouseout put in a timeout to add the hidden-class after 5000ms

Upvotes: 0

Milad Ghiravani
Milad Ghiravani

Reputation: 1683

use jQuery. I edited your css and html codes.

<div id="example1">
<div class="parent"><a href="#" class="button" id="btn" onmouseover="document.getElementById('two').style.display = 'block';$('#two').fadeOut(6000);">Menu Two</a>
<div class="sub" id="two" style="display:none;">
                               <div class="error_box"></div>


menu 1<br>
menu 1<br>
menu 1<br>
menu 1<br>
menu 1<br>
menu 1<br>
menu 1<br>
</div>


</div>

visit jsfiddle

Upvotes: 0

Olaf Dietsche
Olaf Dietsche

Reputation: 74018

You have to split the transition with height: 250px 

.parent:hover #two {
    height:250px;
    transition:height 0.4s ease-in-out 0s;
    -moz-transition:height 0.4s ease-in-out 0s;
    -webkit-transition:height 0.4s ease-in-out 0s;
    -o-transition:height 0.4s ease-in-out 0s;
}

This opens the menu immediately, and height: 0 

 #two {
    background:#FFFFFF;
    border: 1px solid #CECECE;
    visibility:visible!important;
    height:0;
    transition:height 0.4s ease-in-out 5s;
    -moz-transition:height 0.4s ease-in-out 5s;
    -webkit-transition:height 0.4s ease-in-out 5s;
    -o-transition:height 0.4s ease-in-out 5s;
}

which closes the menu after a delay of 5 seconds.

See full JSFiddle

Upvotes: 1

Related Questions