CSS Alternatives to style=“display:none”

1
votes

I'm trying to have a fade down animation on menu and submenu but it only works on the first one. I'm using a transition: all 0.3s ease 0s;visibility: hidden;margin-top:-10px; on nav >div> ul > li > ul and margin-top:0px;opacity: 1;visibility: visible; with hover. The problem comes from nav li > ul ul {display: none;}. It seems that CSS can't animate between display: none; and display: block; and i don't know how to replace display: none;

here is the jsfiddle with the display:none and the no animation on the last submenu and here is the jsfiddle with visibility:hidden; the animation works but i've got wired effect

Is there a way to have this animation work on all the submenus ?

2
cssdrop-down-menumenucss-animations

2 Answers

0
votes

Try this, looks like you were one level off:

nav{position: relative;}
nav ul {
  list-style: none;
  margin:0;
  padding: 0;
}
li.has_children{
  position:relative;
}
li.has_children > ul{
  transition: all 0.3s ease 0s;
  visibility:hidden;
  margin-top:-10px;
  opacity:0;
  background-color: green;
}
li.has_children:hover > ul{
  margin-top:0px;
  visibility:visible;
  opacity:1;
}
nav > div > ul> li > ul > li > ul{
  position:absolute;
  top:0;
  left:100%;
  /* You may want to add a width */
}
nav > div > ul > li {
  float: left;
}
nav >div> ul > li  > a:hover{
  background-color: red;
}
<div id="navbar" class="navbar">
<nav id="site-navigation" class="navigation main-navigation" role="navigation">
<div class="menu-mega-container">
<ul id="menu-mega" class="nav-menu">
        <li><a href="#">My awesome button</a></li>
        <li class="has_children"><a href="#">My awesome button</a>
            <ul>
                <li><a href="#">awesome link nº 1</a></li>
                <li><a href="#">awesome link nº 2</a></li>
                <li class="has_children"><a href="#">awesome link nº 3</a>
                <ul>
                <li><a href="#">awesome link nº 1</a></li>
                <li><a href="#">awesome link nº 2</a></li>
                <li><a href="#">awesome link nº 3</a></li>
            </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>
</nav>
</div>
0
votes

You can combine the display property with opacity to get the same animation effect. Even though display doesn't animate, it gets applied unnoticed since opacity's start and end points are being animated.

In your case, it looks like all you need to do is add another rule set like so:

nav#site-navigation li > ul ul {
  display: none;
  opacity: 0;

  /* these will fix your jumping issue */
  position: absolute;
  left: 100%;
  top: 0;
}

nav#site-navigation li > ul ul {
  display: block;
  opacity: 1;
}

Also, you should consider animating only transform properties. When you animate things like margin-top or width/height/etc it causes repaints/reflows in the browser which hinder performance. transform animation is done with the GPU instead.