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