Может ли раскрывающееся меню CSS3 исчезать и исчезать?

Question

Я реализовал выпадающее меню с CSS3, которое красиво исчезает в раскрывающемся списке, когда парит родительский li. Но выпадение не исчезнет, ​​и вот почему. Поскольку вы не можете перенести свойство отображения, затухание достигается путем перехода непрозрачности. Так как только непрозрачность перешла, вам нужно переместить sub ul в сторону - иначе невидимое подменю появится при наведении курсора.

Я создал скрипт JS, который демонстрирует это - без правила left:1000px; на ul#mainNav li ul, он будет исчезать просто отлично. Но тогда вы можете навести невидимое меню. - http://jsfiddle.net/YZvdm/

Так как же я могу сделать его постепенным, не делая его случайно не парящим? height:0; также устранит затухание, так что это не вариант.

Answer 1

Ключ к созданию этой работы использует visibility:hidden вместо display:none и не используя transition-delay на видимость, пока opacity идет к 0.

.nav li ul { 
    visibility: hidden; 
    opacity: 0; 
    -prefixes-transition-property: opacity, visibility; 
    -prefixes-transition-duration: .4s, 0s; 
    -prefixes-transition-delay: 0s, .4s; 
} 

.nav li:hover ul { 
    visibility: visible; 
    opacity: 1; 
    -prefixes-transition-delay: 0s, 0s; 
} 

Fiddle: http://jsfiddle.net/YZvdm/29/

Answer 2

Я на самом деле не проверял это, но вы должны быть в состоянии обойти его, указав свою собственную специальную «задержанную» анимацию и применив ее к подменю.

#mainNav > li > ul { 
    -moz-animation-duration: 3s; 
    -moz-animation-name: delaySlide;  
} 

@-moz-keyframes delaySlide { 
    from { 
     height: auto; 
    } 

    95% { 
     height: auto; 
    } 
    to { 
     height: 0; 
    }  
} 

Это, и сроки его должным образом, следует сделать высоту анимации меню случаются после FADEOUT.

Пример кода снят https://developer.mozilla.org/en/CSS/CSS_animations#Defining_the_animation_sequence_using_keyframes

Answer 3

Оказывается есть был далеко лучшее решение для меня, чтобы просто реализовать JQuery плавному и снаружи, например, так:

$(function() { 

    $('#topNav ul').find('ul').show().hide(); 
    $('#topNav > ul > li').hover(function() { 
     $(this).children('ul').stop().fadeIn(300); 
    }, function() { 
     $(this).children('ul').stop().fadeOut('fast'); 
    }); 

} 

Answer 4

Вот Github Ань вс-CSS с постепенным исчезновением и постепенным исчезновением. Он должен иметь возможность делать все, что вы можете сделать с Javascript.

http://github.com/jmeas/CSS3-Dropdown-With-Fade

Answer 5

I создали демо на Codepen, и это работа над Firefox или другими:

http://codepen.io/hayatbiralem/pen/Gdfie

Надеюсь, это поможет.

Answer 6

Я опаздываю на эту вечеринку, но вот то, что я закончил с сталкивался с подобной перспективой:

Fiddle: https://jsbin.com/bibokaqumi/1/edit?html,css,output

Markup:

<nav> 
    <ul> 
    <li>Link One</li> 
    <li class="sub">Link Two 
     <ul> 
     <li>Sub-Link One</li> 
     <li>Sub-Link Two</li> 
     </ul> 
    </li> 
    <li>Link Three</li> 
    </ul> 
</nav> 

CSS3:

nav li { 
    list-style: none; 
} 

nav > ul > li { 
    height: 100px; 
    padding-right: 50px; 
    float: left; 
} 

    nav > ul > li.sub { 
     position: relative; 
    } 

     nav > ul > li.sub ul { 
      position: absolute; 
      top: 20px; 
      width: 200px; 
      visibility: hidden; 
     } 

     nav > ul > li.sub ul { 
      opacity: 0; 
      transition-property: opacity; 
      transition-duration: 0.3s; 
     } 

     nav > ul > li.sub:hover ul { 
      opacity: 1; 
      transition-delay: 0.1s; 
      visibility: visible; 
     }