您的位置：首页 > Web前端 > CSS

JQ-CSS-实现导航菜单效果

2015-09-18 12:06 816 查看
先看效果（配色方便，还请多多包涵....^_^）



.nav {
width: 720px;
background: #3B5998;
height: 60px;
color: white;
margin: 8px auto;
}
.nav ul {
list-style: none;
margin: 0px;
}
.nav ul li {
float: left;
margin-right: 50px;
position: relative;
z-index: 100;
width: 100px;
text-align: center;
margin-top: 12px;
line-height: 30px;
}
.nav ul li a {
text-decoration: none;
font-weight: 700;
background: #EEEEEE;
display: block;
height: 30px;
}
.nav ul li a:hover {
background: none;
color: #6F0;
}
.nav ul li ul {
position: absolute;
width: 100px;
overflow: hidden;
display: none;
list-style: none;
padding: 0px;
background: none;
}
.nav ul li:hover ul {
background-color: #EEEEEE;
position: absolute;
width: 100px;
display: block;
}
.nav ul li ul li {
border-bottom: 1px solid #BBB;
text-align: left;
width: 100%;
margin: 0px;
text-align: center;
}


View Code
[b] 第二种方式（jq）

在IE7和FireFox浏览器上可以使用伪劣:hover来显示导航效果，但IE6并不支持除超链接之外的元素使用这个伪类，因此使用上述的CSS代码并不能再IE6下正常运行，解决方法是用脚本来弥补这个不足。

$(function (){
$("#nav ul li:has(ul)").hover(function (){
$(this).children("ul").stop(true,true).slideDown(400);
},function (){
$(this).children("ul").stop(true,true).slideUp("fast");
})
})


注意：

在两个动画效果之前都添加了stop(true,true)方法，这样做的好处是能把未执行的完的动画队列清空，并且将正在执行的动画跳转到末状态。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航