jquery带动画的二级下拉列表

最新推荐文章于 2021-07-07 16:37:29 发布

lucky芬

最新推荐文章于 2021-07-07 16:37:29 发布

阅读量905

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/daimomo000/article/details/53760242

版权

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

带动画的二级下拉列表

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
*{padding:0; margin:0;}
li{ list-style:none}
a{ text-decoration:none;}
.nav{ width:100%; height:40px; background:#222; margin-top:100px;}
.nav .list{ width:1000px; height:40px;margin:0 auto;}
.list li{ float:left; position:relative;}
.list li>a{ padding:0 30px; line-height:40px; display:block; color:#aaa; font-size:16px;}
.list li:hover>a{ background:#333; color:#fff;}
.list li .down{ width:150px; background:#333; position:absolute; top:40px;left:0; display:none;}
.list li .down a{ display:block; line-height:30px; color:#aaa; font-size:14px; padding-left:30px;}
.list li .down a:hover{ color:#fff;}
</style>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

<script type="text/javascript">
$(function(){
    $(".nav .list li").hover(function(){
        $(this).find(".down").stop().slideDown({duration:1000,easing:'easeOutBounce'})  
    },function(){
        $(this).find(".down").stop().slideUp({duration:1000,easing:'easeOutBounce'})    
    })  
})
</script>
</head>


<body>
<div class="nav">
	<ul class="list">
    	<li><a href="#">首页</a></li>
        
        <li>
        	<a href="#">职业课程</a>
            <div class="down">
            	<a href="#">课程库</a>
                <a href="#">知识体系图</a>
                <a href="#">职业路径图</a>
                <a href="#">系列课程</a>
            </div>
         </li>
        
        <li>
        	<a href="#">就业学习</a>
            <div class="down">
            	<a href="#">Web前端开发</a>
                <a href="#">Android开发</a>
                <a href="#">JavaWeb开发</a>
            </div>
        </li>
        
        <li>
        	<a href="#">我的社区</a>
            <div class="down">
            	<a href="#">wiki</a>
                <a href="#">技术问答</a>
                <a href="#">社群</a>
                <a href="#">资源分享</a>
            </div>
         </li>
        
        <li>
        	<a href="#">更多+</a>
            <div class="down">
                <a href="#">兴趣爱好</a>
                <a href="#">职业经历</a>
            </div>
        </li>
    </ul>
</div>
</body>
</html>

需要下载jquery-1.11.3.min.js，jquery.easing.1.3.js。