jquery实现多级菜单显示效果代码
代码语言:html
所属分类:菜单导航
代码描述:jquery实现多级菜单显示效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background: white;
font-size: 12px;
}
li {
list-style: none;
}
ul.nav li {
width: 100px;
text-align: center;
}
ul.nav > li {
float: left;
margin-right: 10px;
}
ul.nav li h3 {
height: 40px;
line-height: 40px;
}
ul.nav > li > h3 {
background: #e6e6e6;
}
ul.nav > li > ul > li h3 {
background: #ffd9d9;
}
ul.nav > li h3:hover,.choice {
background: #ffc0c0!important;
}
ul > li > ul {
display: none;
}
ul > li.on > ul {
display: block;
}
ul.nav li {
position: relative;
}
ul.nav > li > ul > li ul {
position: absolute;
top: 0;
right: -100px;
}
ul.nav span.sub {
position: absolute;
display: block;
right: 10px;
top: 0;
width: 10px;
height: 40px;
background: url(//repo.bfw.wiki/bfwrepo/image/5f7ab7cfd3599.png) no-repeat center center;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("ul.nav li").hover(function() {
$(this).addClass("on");
},
function() {
$(this).removeClass("on");
})
});
$(document).ready(function() {
$("ul.nav li").hover(function() {
$(this).parent("ul").siblings("h3").addClass("choice");
},
function() {
$(this).parent("ul").siblings("h3").removeClass("choice");
})
});
$(document).ready(function() {
if ($("ul.nav li").find("ul") .html() != "") {
$("ul.nav li").parent("ul").siblings("h3").append("<span class='sub'></span>");
}
});
</script>
</head>
<body>
<ul class="nav">
<li><h3>我的网站</h3>
<ul>
<li><h3>2级分类</h3>
<ul>
<li><h3>3级分类</h3>
<ul>
<li><h3>4级分类</h3>
<ul>
<li><h3>5级分类</h3></li>
<li><h3>5级分类</h3></li>
<li><h3>5级分类</h3></li>
<li><h3>5级分类</h3></li>
</ul>
</li>
<li><h3>4级分类</h3></li>
<li><h3>4级分类</h3></li>
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0