Fade in dropdown menu

HTML & CSS
1

Hi there,

I have set up this very rough fiddle:

What I am trying to do is to have the background of each megamenu fade in when it appears.

I have tried the following, but no luck: (I have applied a red background colour to the first menu only for now)

.megamneu-shops-suppliers .dropdown-menu{
    transition: all .3s ease!important;
    background: #ff0000
    
}
.megamneu-shops-suppliers.open .dropdown-menu{
    transition: all .3s ease!important;     
        display: block;
        opacity: 1;
    
}

Can anyone suggest a way I can have the background fade in?

Thanks!

2

You can’t do any animations from display:none as its not animatable. Instead you need to hide the menu offscreen and then just bring it back to view and then you can animate the opacity.

e.g.

Add this code to the end of your fiddle.


.megamenu .dropdown-menu {
 background:green;
 width:auto;
 display:block!important;
 position:absolute;
 left:-200vw;
 top:-9999px;
 opacity:0;
 transition:opacity 1s ease;
}
.megamenu .dropdown-menu.show{
  top:100%;
  left:0;
  opacity:1;
}

You still haven’t corrected the spelling of megamenu in some places :wink: