Jquery制作下拉菜单实现二级菜单缓慢淡出入效果-CSDN博客

本文介绍如何使用JQuery实现两种不同的下拉菜单效果：一种是带出入动画的菜单，利用了JQuery的slideDown和slideUp方法；另一种是简单的二级菜单，在鼠标经过时显示。这两种方法都可以为网站导航提供更好的用户体验。

1.实现出入效果--Jquery

<html>
<title>nav</title>
<head>
<style>
*{margin:0; padding:0}
ul{margin:0, auto;list-style:none}
#nav{background:#eee; width:572px; height:60px;margin:0 auto;}
ul li{float:left; text-align:center; line-height:60px;padding:0px;position:relative;}
a{text-decoration:none; color:#000;display:block;padding:0 45px;}
a:hover{color:#FFF;background-color:#666;}
ul li ul li{float:none;background-color:#eee;margin-top:2px;}
ul li ul{position:absolute;left:0px;top:60px;display:none}
ul li ul li a{padding:0 25px}

</style>
<script src="C:\Users\aaron.li01\Desktop\review dev\jquery-3.1.1.min.js"></script>
<script type="text/javascript">


    $(document).ready(function(){
       $(".top-nav li").mousemove(function(){
         $(this).find("ul").slideDown("1000");
       });
       $(".top-nav li").mouseleave(function(){
         $(this).find("ul").slideUp("slow");
       });
    });
</script>
</head>
<body>
<div id="nav">
<ul class="top-nav">
<li class="navmenu"><a href="#">Home</a>
 <ul>
     <li><a href="#">BlueSea</a></li>
     <li><a href="#">WhiteHouse</a></li>
 </ul>
</li>
   
<li><a href="#">Species</a>
<ul>
     <li><a href="#">BlueSea</a></li>
     <li><a href="#">WhiteHouse</a></li>
 </ul>
</li>
<li><a href="#">Management</a>
<ul>
     <li><a href="#">BlueSea</a></li>
     <li><a href="#">WhiteHouse</a></li>
 </ul>
</li>
<li><a href="#">About</a></li>
</ul>
</div>


</body>
</html>

2.普通的二级菜单的显示（鼠标经过时）

<html>
<title>nav</title>
<head>
<style>
*{margin:0; padding:0}
ul{margin:0, auto;list-style:none}
#nav{background:#eee; width:572px; height:60px;margin:0 auto;}
ul li{float:left; text-align:center; line-height:60px;padding:0px;position:relative;}
a{text-decoration:none; color:#000;display:block;padding:0 45px;}
a:hover{color:#FFF;background-color:#666;}
ul li ul li{float:none;background-color:#eee;margin-top:2px;}
ul li ul{position:absolute;left:0px;top:60px;display:none}
ul li ul li a{padding:0 25px}

</style>
<script src="C:\Users\aaron.li01\Desktop\review dev\jquery-3.1.1.min.js"></script>
<script type="text/javascript">
  $(function(){
    $(".navmenu").mouseover(function(){
      $(this).children("ul").show();
    })
    
    $(".navmenu").mouseout(function(){
      $(this).children("ul").hide();
    })  
}); 

</script>
</head>
<body>
<div id="nav">
<ul class="top-nav">
<li class="navmenu"><a href="#">Home</a>
 <ul>
     <li><a href="#">BlueSea</a></li>
     <li><a href="#">WhiteHouse</a></li>
 </ul>
</li>
   
<li><a href="#">Species</a>
<ul>
     <li><a href="#">BlueSea</a></li>
     <li><a href="#">WhiteHouse</a></li>
 </ul>
</li>
<li><a href="#">Management</a>
<ul>
     <li><a href="#">BlueSea</a></li>
     <li><a href="#">WhiteHouse</a></li>
 </ul>
</li>
<li><a href="#">About</a></li>
</ul>
</div>


</body>
</html>