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

Question

如何制作悬停时下拉的类似 dabblet 的导航栏？

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

请注意，当您将鼠标悬停在“全部”上时，它似乎是从页面顶部下拉的。我知道可以通过使两个具有 css 绝对位置的 div 使“所有”和“内容”的位置适当:

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

然后使用 jquery 附加悬停事件以动画化“全部”并使用动画使“全部”和“内容”css 下拉(我有两个更新两个单独的 dom eleements 的位置)。是否有更好的方法在 dom 中构建它并可能仅使用 CSS3 来完成此操作，而不是描述和/或更好的构建 dom 的方法，这样我就不必更新内容和所有内容的位置？

Answer 1

我肯定不会用 javascript 或 jQuery 来做，因为它只用 CSS3 就可以了

这里有一个例子或查看 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>

这是可行的，因为按钮元素是包装器的子元素，所以在悬停 naviButton 时，它将调用包装器元素上的悬停，它通过在 css 样式顶部给出的查询进行动画处理。