28172 sujets

CSS et mise en forme, CSS3

[Résolu] Alternative en css pour le display none

Bonjour
J'essaie d'avoir un effet fade down sur mon menu mais le problème est qu'il ne fonctionne que sur le premier submenu. Il semble que les animations en css ne peuvent fonctionner entre un display none et block mais je n'ai aucune idée pour remplacer mon nav li > ul ul {display: none;}
Le premier lien jsfiddle ici https://jsfiddle.net/5a9gedgt/2/ montre l’absence d'animation sur le dernier submenu. Dans le second https://jsfiddle.net/5a9gedgt/1/ j'ai essayé de remplacer le display none par visibility:hidden; l'animation fonctionne à nouveau sur le dernier submenu mais cette fois il y a un "dédoublement du submenu " qui apparait juste en dessous du lien awesome link nº 3 et à coté pendant un petit lapse de temps.

Voila merci d'avance pour votre aide.
Modifié par micho (04 Aug 2016 - 06:22)
Bonjour,

Je propose une solution. Mon seul souci c'est un petit bug lorsque qu'on passe la souris par dessus le 2eme sous-menu. Si quelqu'un a une idée, n'hésitez pas à partager. 


<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 class="menu-depth-1">
                <li><a href="#">awesome link nº 1</a></li>
                <li><a href="#">awesome link nº 2</a></li>
                <li class="has_children2"><a href="#">awesome link nº 3</a>
                <ul class="menu-depth-2">
                <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>




ul {
list-style: none;
margin:0;     
padding: 0;
border: 1px solid red;
}

.has_children{
  position: relative;
}

ul.nav-menu > li {
  display: inline-block;
}

ul.nav-menu > li:hover{
background-color: red;
}

.menu-depth-1{
position: absolute;
background-color: green;
transition: all 0.3s ease 0s;
opacity: 0;
visibility: hidden;
top:10px;
left: 0px;
height: 60px;
}


.menu-depth-2{

  position: absolute;
  background-color: green;
  transition: all 0.3s ease 0s;
  top: -20px;
  left: 120px;
  width: 120px;
  opacity: 0;
  visibility: hidden;

}

.has_children:hover .menu-depth-1{
  opacity: 1;
  visibility: visible;
  top: 20px;
}

.has_children2:hover  .menu-depth-2{
  opacity: 1;
  visibility: visible;
  top: 40px;
}
Sujet clos
Aller à