Could you please help me? I'm trying to delay 2 seconds my dropdown after user leaving mouse, I tried insert several transition in every CSS selector for many hours but without any success.
/* Navbar container */
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
/* Links inside the navbar */
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
}
<div >
<a href="#home">Home</a>
<a href="#news">News</a>
<div >
<button >Dropdown
<i ></i>
</button>
<div >
<div >
<h2>Mega Menu</h2>
</div>
<div >
<div >
<h3>Category 1</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div >
<h3>Category 2</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div >
<h3>Category 3</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</div>
</div>
I tried to insert transition-delay: 0s;
and transition-duration: 2s;
on .navbar a:hover, .dropdown:hover .dropbtn {
but didnt work.
I want something like this => http://jsfiddle.net/odsb86o2/1/
Test my code here => https://jsfiddle.net/foks8bt5/
Could you please help me?
CodePudding user response:
TL;DR. display
cannot be animated. Use opacity
instead.
As the others mentioned in the comments, you cannot animate between display: none;
and display: block;
. In this scenario, a typical CSS solution is to use opacity
instead.
Please see the slightly tweaked code sample below. The only critical changes are replacing display: none;
/display: block;
with opacity:0;
/opacity:1;
.
Note I've also added pointer-events: none;
to invisible state and put pointer-events: all;
back when it's visible. This is to avoid the invisible mega menu blocking any elements below it while it's inactive.
/* Navbar container */
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
/* Links inside the navbar */
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
cursor: pointer;
}
/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
/* Dropdown content (hidden by default) */
.dropdown-content {
opacity: 0;
pointer-events: none;
transition: opacity .5s;
transition-delay: .5s;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Mega Menu header, if needed */
.dropdown-content .header {
background: red;
padding: 16px;
color: white;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
opacity: 1;
pointer-events: all;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
/* Style links inside the columns */
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a background color on hover */
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
<div >
<a href="#home">Home</a>
<a href="#news">News</a>
<div >
<button >Dropdown
<i ></i>
</button>
<div >
<div >
<h2>Mega Menu</h2>
</div>
<div >
<div >
<h3>Category 1</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div >
<h3>Category 2</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div >
<h3>Category 3</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</div>
</div>