CSS3 Переход Слайд вниз Элемент

Question

Я пытаюсь воссоздать аналогичный эффект меню, найденный на сайте фильма о мировой войне Z, но я не могу заставить CSS-переход работать правильно. Я получил элемент hover для отображения скрытого блока, но переход CSS не работает. Я пытаюсь получить классный эффект, который будет скользить сверху или снизу, у меня нет особых предпочтений. Также, если я пытаюсь перейти по любой из ссылок, подменю исчезает, прежде чем я могу щелкнуть по нему. Вот Fiddle.

HTML:

<ul id="menutitle">Menu Title</ul> 
     <ul id="submenu"> 
      <li><a href="#">Link 1</a></li> 
      <li><a href="#">Link 2</a></li> 
      <li><a href="#">Link 3</a></li> 
      <li><a href="#">Link 4</a></li> 
     </ul> 
</nav> 

CSS:

#topmenu { 
    background: #000; 
    width: 150px; 
    height: 50px; 
    color: #fff; 
} 

#submenu { 
    display: block; 
    position: absolute; 
    width: 110px; 
    display: none; 
    background: #333; 
    list-style: none; 
    line-height: 2em; 
} 

#menutitle:hover + #submenu { 
    display: block; 
    -webkit-transition: height 1s ease; 
    -moz-transition: ease-in 2s none; 
    -ms-transition: ease-in 2s none; 
    -o-transition: ease-in 2s none; 
    transition: ease-in 2s none; 
} 

#menutitle { color: #ff0000; } 

a { color: #FF0; } 

Answer 1

Несколько вещей:

Ваш селектор :hover должен быть на #topmenu элемент, а не титул. Вот почему область навигации исчезает так внезапно - она ​​только наводит курсор на текст меню.

Возможно, у вас есть небольшое заблуждение относительно определения свойства анимирования. Вам нужно выбрать конкретное свойство для анимации; обычно что-то вроде «высоты». В этом случае моим решением было установить «max-height». Может быть какой-то способ установить высоту на что-то вроде «auto», но если так, то это потеряно на мне.

Кроме того, свойство «переход» всегда устанавливается на объект, а не только «при наведении». Это своего рода постоянное состояние, указывающее «КОГДА это свойство изменяется, совершает плавный переход». Таким образом, вы можете иметь ряд разных состояний, дающих разную высоту.

http://jsfiddle.net/8YHbq/4/

#topmenu {background: #000; width: 150px; height: 50px; color: #fff; } 

#submenu {display: block; 
position: absolute; 
width: 110px; 
background: #333; 
list-style: none; 
line-height: 2em; 
overflow: hidden; 
    max-height:0; 
    transition: max-height 0.7s ease-in; 
} 

#topmenu:hover #submenu { 
max-height: 200px;} 

#menutitle {color: #ff0000;} 
a {color: #FF0} 

В настоящее время одна проблема с моей версией, что я только сейчас реализующей что, поскольку максимальная высота одушевляет до 200px, меню навигации будет полностью расширен, прежде чем он достигнет 200 - делает анимация нет гладкий. Возможно, вы можете немного подкорректировать это в соответствии с вашими потребностями.