CSS3 전환 슬라이드 다운 요소

Question

제 2 차 세계 대전 영화 사이트에서 발견 된 유사한 메뉴 효과를 재현하려고하지만 CSS 전환이 제대로 작동하지 않습니다. 숨겨진 블록을 표시하는 호버 요소를 얻었지만 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 요소가 아닌 제목에 있어야합니다. 그래서 nav 영역이 갑자기 사라지는 것입니다. 메뉴 텍스트를 마우스로 가리키면됩니다.

animate 속성 정의에 대해 약간의 오해가있을 수 있습니다. 애니메이션을 만들려면 특정 속성을 선택해야합니다. 일반적으로 '높이'와 같은 것입니다. 이 경우, 제 해결책은 "최대 높이"를 설정하는 것이 었습니다. 높이를 '자동'과 같은 것으로 설정하는 몇 가지 방법이있을 수 있지만, 그렇다면 나를 잃어 버릴 수 있습니다.

또한 "전환 지점"속성은 '호버링 할 때'가 아니라 항상 개체에 설정됩니다. 이 속성은 "이 속성이 변경 될 때 부드러운 전환을 수행 할 때"를 나타내는 일종의 상수입니다. 그런 식으로, 당신은 다른 높이를주는 일련의 다른 상태를 가질 수 있습니다. 현재

#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} 

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

, 난 그냥 지금 실현하고있어 내 버전으로 하나의 문제는 최대 높이가 200 픽셀로 애니메이션 이후 200에 도달하기 전에 탐색 메뉴가 완전히 확장 될 것이라고합니다 -을 애니메이션이 부드럽지 않습니다. 어쩌면 당신의 필요에 따라 약간 조정할 수 있습니다.