호버 navbar를 만드는 가장 좋은 방법은 무엇입니까?

Question

호버에 떨어지는 dabblet과 같은 탐색 모음을 만드는 방법은 무엇입니까?

http://sampsonblog.com/289/of-dice-dabblet-and-css

공지 방법은 마우스 오버 "모든"은 페이지 상단에서 드롭 다운 나타납니다. 나는 두 개의 div가함으로써 가능하다 알고 CSS 위치 절대 예 : "모든"과 "내용"approrpiately 배치됩니다 :

<div id="content">-All content that would come with the dropdown here/div> 
<div id="all">All</div> 

그런 다음 "모든"애니메이션과에 애니메이션을 사용하여 이벤트를 가져 첨부 할 jQuery를 사용하여 "all"과 "content"CSS를 드롭 다운 시키십시오 (두 개의 서로 다른 dom eleements의 위치를 ​​업데이트합니다). 거기에 더 나은 방법은 dom에서 그것을 구조화하고 CSS3를 사용하여 설명 및/또는 더 나은 방법은 dom과 같은 콘텐츠 및 모두 위치를 업데이트 할 필요가없는 것보다이를 달성하기 위해?

Answer 1

ID가 반드시에만

여기 CSS3와의 모든 때문에 가능한 자바 스크립트 또는 jQuery를 함께 예를 그 일을하거나 바이올린 http://jsfiddle.net/mpaas/ 체크 아웃 할 것이다 :

#naviWrapper { 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -ms-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 

    position:absolute; 
    top:-200px; 
    height:200px; 
    left:0px; 
    right:0px; 
    background:#ccc; 
} 

#naviWrapper:hover { 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -ms-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 

    top:0px; 
} 

#naviButton { 
    position:absolute; 
    bottom:-60px; 
    left:50%; 
    margin-left:-50px; 
    width:100px; 
    height:60px; 
    background:#000; 
    color:#fff; 
    text-align:center; 
} 


<div id="naviWrapper"> 

    <div id="naviButton">Hover!</div> 

</div> 

이 작동을 버튼 요소 때문에 래퍼의 자식이므로 naviButton을 가져 가면 CSS 스타일의 맨 위에있는 쿼리를 통해 움직이는 래퍼 요소에 마우스를 올려 놓습니다.