Як найкраще зробити навігаційну панель наведення курсору? - javascript, html5, css3

Як зробити навігаційну панель на зразок лямки, що падає на наведення курсору?

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

Зверніть увагу, як при наведенні миші на "Усі" це відображаєтьсящоб впасти вгорі сторінки. Я знаю, що це можливо, зробивши два діви з позицією css абсолютними таким чином, що "all" та "content" розміщуються приблизно:

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

Потім використовуйте jquery, щоб прикріпити події наведення курсоруанімувати "всіх" і використовувати анімацію, щоб викликати "all" та "content" css до спаду (у мене є два оновлення позиції двох окремих елементів dom). Чи є якийсь кращий спосіб структурувати його у домі та потенційно використовувати CSS3 лише для досягнення цього, ніж описано та / або кращий спосіб структурувати dom, таким чином, що мені не доведеться оновлювати як контент, так і все?

Відповіді:

Я, безумовно, не робив би це за допомогою JavaScript або jQuery, тому що все це можливо лише для CSS3

ось приклад або перевірте загадку 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>

Це працює, тому що елемент кнопки - це дитинаобертки, тож, якщо навести навігаційну кнопку, вона викличе наведення курсору на елемент обгортки, який анімує запити, наведені у верхній частині стилів css.