html里面的导航栏,怎么做出,都鼠标移上时,缓慢展开下部分内容,,鼠标移开时又缓慢收缩回去
Jquery 有相应的控件,去看看懒人之家里面的开源导航组件
可以参考下bootstrap或者pintur等开源框架
http://www.runoob.com/try/try.php?filename=trycss3_transition1
把这个例子第二个样式的width 值的改变换成height 就可以实现
学习下bootstrap吧,里面有很多封装好的方法
加点css3动画 $("#xx").animate({height:"300px"},300);
<style type="text/css">
ul,li{
padding: 0;
}
ul>li{
list-style: none;
float: left;
width: 65px;
}
a{
cursor: default;
text-decoration: none;
}
li>ul{
display: none;
}
ul>li:hover>ul{
display: block;
}
</style>
<div class="nav">
<ul>
<li>
<a href="">菜单1</a>
<ul>
<li><a href="">子菜单1</a></li>
</ul>
</li>
<li>
<a href="">菜单2</a>
<ul>
<li><a href="">子菜单1</a></li>
</ul>
</li>
</ul>
</div>
随手用伪类写了个滑过显示,滑出隐藏的,然后结合animate 就可以做个动画效果了
1.css houver
2.事先写好div将其定位隐藏,使用js或jquery为元素绑定鼠标滑动事件,当你的鼠标移过去的时候触发该事件,在事件处理中显示隐藏的div