如何最好地制作悬停导航栏？

Question

How to make a navigation bar like dabblet that drops down on hover?

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

Notice how when you mouse over "All" it appears to drop down from the top of the page. I know it is possible by making two divs with css position absolute such that "all" and "content" are positioned approrpiately:

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

Then using jquery to attach hover events to animate "all" and use an animation to cause "all" and "content" css to dropdown (I have two update the position of two separate dom eleements). Is there some better way to structure it in the dom and potentially use CSS3 only to accomplish this than described and/or a better way to structure the dom such that I dont have to update both the position of content and all?

Answer 1

Id surely would not doing it with javascript or jQuery, because its all possible with CSS3 only

here an example or check out the fiddle 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>

This works, because the button element is a child of the wrapper, so on hovering the naviButton, it will call a hover on the wrapper element, which animates through the queries given in on the top of the css styles.