JS+CSS简单树形菜单实现方法
网络编程 发布日期：2024/10/6 浏览次数：1
正在浏览：JS+CSS简单树形菜单实现方法
本文实例讲述了JS+CSS简单树形菜单实现方法。分享给大家供大家参考。具体如下：
这是一款不错的CSS树形菜单，树状列表，当然不全是CSS实现，部分功能还使用了JavaScript代码进行配合，删减了修饰用的菜单图片，大家用的时候自己图片加进去，IMG标签大部分都预留了出来，稍懂Html语法的朋友很容易就看懂的。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-css-simple-tree-menu-style-codes/
具体代码如下：
<!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>
<title>树状列表</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<style>
*{margin:0px;padding:0px;}
A:link{color: #000000; TEXT-DECORATION: none;}
A:visited {COLOR: #000000; TEXT-DECORATION: none}
A:active {COLOR: #3333ff; TEXT-DECORATION: none}
A:hover {COLOR: #ff0000; TEXT-DECORATION: none}
.panel{ BACKGROUND: #DDE4EA; COLOR:#654125;}
ul {
list-style: none;
margin: 0;
padding: 0;
}
img{
border:0px;
width:16px;
height:16px;
}
#menu{
margin-top: 0px;
}
.U1 {
background: #FFFFFF;
border-bottom:1px #9D9D9D solid;
}
.L1 a:link, .L1 a:visited{
color: #476074;
background: url("");
font-size:9pt;
display: block;
text-decoration: none;
height: 24px;
}
.L1 a:link span, .L1 a:visited span{
background: url("") no-repeat left;
padding-left: 15px;
height:24px;
vertical-align:middle;
padding:7px 0px 0px 16px;
cursor:pointer;
width:100%;
}
.L1 a:hover{
color: #000000;
font-weight:bold;
background: url("");
background-position: 0 -24px;
}
/* 一级菜单 active 效果 */
.L1 a:link.active, .L1 a:hover.active, .L1 a:active.active, .L1 a:visited.active{
background: url("");
background-position: 0 -24px;
}
.L1 a:link.active span, .L1 a:hover.active span, .L1 a:active.active span, .L1 a:visited.active span{
color: #000000;
font-weight:bold;
background: url("") no-repeat left;
}
.L21 a:link, .L21 a:visited, .L22 a:link, .L22 a:visited, .L3 a:link, .L3 a:visited{
color: #444659;
background: none;
height: 24px;
font-size:9pt;
display: block;
text-decoration: none;
padding-left: 13px;
background: none;
}
.L21 a:link span, .L21 a:visited span, .L22 a:link span, .L22 a:visited span, .L3 a:link span, .L3 a:visited span{
vertical-align:middle;
padding:7px 0px 0px 16px;
background: url("") no-repeat left center;
cursor:pointer;
width:100%;
}
.L22 a:link span, .L22 a:visited span, .L3 a:link span, .L3 a:visited span{
background:none;
}
.L21 a:hover, .L22 a:hover, .L3 a:hover{
background: url("") no-repeat top left;
font-weight:bold;
}
.L3 a:link span, .L3 a:visited span{
padding:7px 0px 0px 26px;
}
.L4 a:link span, .L4 a:visited span{
padding:7px 0px 0px 36px;
}
/* 二级菜单 active 效果 */
.L21 a:link.active, .L21 a:hover.active, .L21 a:active.active, .L21 a:visited.active{
background: none;
}
.L21 a:link.active span, .L21 a:hover.active span, .L21 a:active.active span, .L21 a:visited.active span{
color: #000000;
font-weight:bold;
background: url("") no-repeat left center;
}
/* 二、三级菜单 active */
.L22 a:link.active, .L22 a:hover.active, .L22 a:active.active, .L22 a:visited.active,
.L3 a:link.active, .L3 a:hover.active, .L3 a:active.active, .L3 a:visited.active{
background: url("") no-repeat left;
background-position: 0 -24px;
}
.L22 a:link.active span, .L22 a:hover.active span, .L22 a:active.active span, .L22 a:visited.active span,
.L3 a:link.active span, .L3 a:hover.active span, .L3 a:active.active span, .L3 a:visited.active span{
color: #FFFFFF;
font-weight:bold;
background: none;
}
.Ls{
text-align:right;
padding-top:4px;
height:20px;
font-size:9pt;
}
.setting:link, .setting:visited{
text-decoration: underline;
display:block;
}
</style>
</head>
<body class="panel" onLoad="init();">
<div id="sub_tabs" class="sub_tabs"></div>
<div id="body">
<!-- OA树开始-->
<ul id="menu">
<!--路政报表菜单 -->
<li class="L1"><a href="javascript:c('m01');" id="m01"><span><img src="/UploadFiles/2021-04-02/">
希望本文所述对大家的JavaScript程序设计有所帮助。
在去年的5月23日，借助Intel Bridge Technology以及Intel Celadon两项技术的驱动，Intel为PC用户带来了Android On Windows（AOW）平台，并携手国内软件公司腾讯共同推出了腾讯应用宝电脑版，将Windows与安卓两大生态进行了融合，PC的使用体验随即被带入到了一个全新的阶段。