CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Munch
Munch

Reputation: 779

Drop Down Menu Fade Out

I've created a drop down menu. When the user hovers over the navigation button, using CSS3 Transitions the class 'dropdown-content' fades in as shown in the demo below:

https://jsfiddle.net/4xk78qse/

What I can't figure out is how to fade out the 'dropdown-content' when the user isn't hovering over any of the buttons.

I did try adding

animation fadeout 2s;

@keyframes fadeout {
   from { opacity: 1; }
   to { opacity: 0; }
}

Essentially the opposite of the fade in animations in the jsfiddle example but this didn't work.

In summary, I am looking to fade out when the user isn't hovering over any of the buttons.

Upvotes: 0

Views: 2987

Answers (3)

mhodges
mhodges

Reputation: 11136

The trick here is to use CSS Transitions and not CSS Animations. You will be setting visibility and opacity rather than display. 

.dropdown-content {
    visibility: hidden;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    -webkit-transition: opacity 2s, visibility 2s;
    -moz-transition: opacity 2s, visibility 2s;
    -ms-transition: opacity 2s, visibility 2s;
    -o-transition: opacity 2s, visibility 2s;
    transition: opacity 2s, visibility 2s;
    opacity: 0;
}
.dropdown:hover .dropdown-content {
    visibility: visible;
    opacity: 1;
}

Here is a working demo of what you are trying to accomplish:

.dropbtn {
    background-color: #222222;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    height: 80px;
    font-family: 'Quicksand', sans-serif;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    visibility: hidden;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    -webkit-transition: opacity 2s, visibility 2s;
    -moz-transition: opacity 2s, visibility 2s;
    -ms-transition: opacity 2s, visibility 2s;
    -o-transition: opacity 2s, visibility 2s;
    transition: opacity 2s, visibility 2s;
    opacity: 0;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-family: 'Quicksand', sans-serif;
}

.dropdown-content a:hover {background-color: #2c2c2c; color: #FFF;}

.dropdown:hover .dropdown-content {
    visibility: visible;
    opacity: 1;
}

.dropdown:hover .dropbtn {
    background-color: #2c2c2c;
}
<div class="dropdown">
  <button class="dropbtn">Navigation</button>
  <div class="dropdown-content">
    <a href="index.html">1</a>
    <a href="slimedash.html">2</a>
    <a href="gmod.html">3</a>
    <a href="minecraft.html">4</a>
    <a href="information.html">5</a>
    <a href="contact.html">6</a>
  </div>
</div>

Upvotes: 3

Radulescu Alexandru
Radulescu Alexandru

Reputation: 211

You need this css because when hover end your hover class transform in ".dropdown .dropdown-content". Then you call fadeout only for dropdown-content.

.dropdown .dropdown-content{
  display: block;
    opacity: 1;
    -webkit-animation: fadeout 2s;
    -moz-animation: fadeout 2s;
    -ms-animation: fadeout 2s;
    -o-animation: fadeout 2s;
    animation: fadeout 2s;
    opacity: 0;
}
@keyframes fadeout {
   from { opacity: 1; }
   to { opacity: 0; }
}

Upvotes: 0

Nutshell
Nutshell

Reputation: 8537

You better use transitions to do this instead of keyframes animation like this : 

.dropdown-content {
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    opacity: 0;
    transition: all 1s;
}

Fiddle

Upvotes: 1

Related Questions