如何使像dabblet这样的导航栏在悬停时下降?
http://sampsonblog.com/289/of-dice-dabblet-and-css
请注意当您将鼠标悬停在“全部”上时,它似乎从页面顶部下拉。我知道可以通过制作两个带有绝对位置的div来实现“所有”和“内容”的位置:
<div id="content">-All content that would come with the dropdown here/div>
<div id="all">All</div>
然后使用jquery将悬停事件附加到动画“all”并使用动画使“all”和“content”css下拉(我有两个更新两个独立dom元素的位置)。是否有更好的方法在dom中构造它并且可能只使用CSS3来实现这个而不是描述和/或更好的方式来构造dom,这样我就不必更新内容的位置和所有内容?
答案 0 :(得分:1)
我肯定不会使用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>
这是有效的,因为button元素是包装器的子元素,所以在将鼠标悬停在naviButton上时,它会在包装器元素上调用悬停,该元素通过css样式顶部给出的查询进行动画处理。 p>