jQuery实现下拉菜单jQuery实现下拉菜单
需要加载jQuery类库
<script src="WEB-INF/js/jquery-1.12.4.js"></script>
⿏标移⼊⼀级菜单则显⽰⼆级菜单
完整代码
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
.nav {
list-style: none;
width:300px;
height:50px;
background: #dbdbdb;
margin:100px auto;
}
.nav > li {
width:100px;
height:50px;
line-height:50px;
text-align: center;
float: left;
}
.sub {
list-style: none;
background: palevioletred;
display: none;
}
</style>
<script src="WEB-INF/js/jquery-1.12.4.js"></script>
<script>
$(function(){
$(".nav>li").mouseenter(function(){
var $sub =$(this).children(".sub");
//停⽌当前的动画
$sub.stop();
$sub.slideDown(1000);
})
$(".nav>li").mouseleave(function(){
var $sub =$(this).children(".sub");
$sub.stop();
$sub.slideUp(1000);
})
});
html下拉菜单的制作方法</script>
</head>
<body>
<ul class="nav">
<li>⼀级菜单
<ul class="sub">
<li>⼆级菜单</li>
<li>⼆级菜单</li>
<li>⼆级菜单</li>
</ul>
</li>
<li>⼀级菜单
<ul class="sub">
<li>⼆级菜单</li>
<li>⼆级菜单</li>
<li>⼆级菜单</li>
</ul></li>
<li>⼀级菜单
<ul class="sub">
<li>⼆级菜单</li>
<li>⼆级菜单</li>
<li>⼆级菜单</li>
</ul></li>
</ul>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。