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

js+css简单导航栏特效

2017-06-21 16:40 357 查看

<script src="jquery-1.4.2.js"></script>

<style>
*{ margin:0; padding:0; list-style:none}

.nav{ width:100%; height:45px; background-color:#06F}

.naver{ width:1200px; height:45px; margin:0 auto; position:relative}

.ul{ position:relative}

.naver li{ float:left; padding:0 2px; }

.naver li a{ width:120px; height:45px; display:block; text-align:center; line-height:45px; color:#FFF}

.box{ width:1200px; height:300px; background:#FC3; position:absolute; top:45px; left:0; display:none}

.dis{ display:none}

.bg{ width:120px; height:45px;background:#0CF; position:absolute; top:0; left:0}
</style>
<body>

<div class="nav">
<div class="naver">
<div class="bg"></div>
<ul>

<li>
<a href="#">js特效</a>
<div class="box dis">
<a href="#">哈哈1</a>
<a href="#">哈哈1</a>
<a href="#">哈哈1</a>
<a href="#">哈哈1</a>
</div>

</li>
<li>
<a href="#">js特效</a>
<div class="box">
<a href="#">哈哈2</a>
<a href="#">哈哈2</a>
<a href="#">哈哈</a>
<a href="#">哈哈</a>
</div>

</li>
<li>
<a href="#">js特效</a>
<div class="box">
<a href="#">哈哈33</a>
<a href="#">哈哈333</a>
<a href="#">哈哈</a>
<a href="#">哈哈</a>
</div>

</li>
<li>
<a href="#">js特效</a>
<div class="box">
<a href="#">哈哈4444444</a>
<a href="#">哈哈</a>
<a href="#">哈哈</a>
<a href="#">哈哈</a>
</div>

</li>
<li>
<a href="#">js特效</a>
<div class="box">
<a href="#">哈哈55555</a>
<a href="#">哈哈</a>
<a href="#">哈哈</a>
<a href="#">哈哈</a>
</div>

</li>
<li>
<a href="#">js特效</a>
<div class="box">
<a href="#">哈哈66666</a>
<a href="#">哈哈</a>
<a href="#">哈哈</a>
<a href="#">哈哈</a>
</div>

</li>

</ul>
</div>
</div>

</body>
<script>
$(function(){

$(".naver li").hover(

function(){
$(this).children(".box").css("display","block");
},
function(){
$(this).children(".box").css("display","none");

}

);

});
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航