![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>监测系统</title>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/common.css" rel="stylesheet" type="text/css" />
<link href="css/top.css" rel="stylesheet" type="text/css" />
<script src="js/menu.js" type="text/javascript"></script>
</head>
<body>
<div class="top">
<div class="fleft"><img src="images/menuleft.png" /></div>
<div class="menubox">
<ul class="menu" id="menu">
<li><a href="#" class="menulink">文件</a></li>
<li><a href="#" class="menulink">性能管理</a></li>
<li><a href="#" class="menulink">拓扑管理</a></li>
<li><a href="#" class="menulink">故障管理</a></li>
<li><a href="#" class="menulink">报表管理</a></li>
<li><a href="#" class="menulink">分级管理</a></li>
<li><a href="#" class="menulink">配置管理</a></li>
<li>
<a href="#" class="menulink">系统管理</a>
<ul>
<li>
<a href="#" class="sub">拓扑管理</a>
<ul>
<li><a href="#">子栏目</a></li>
<li><a href="#">子栏目</a></li>
</ul>
</li>
<li>
<a href="#" class="sub">IP拓扑</a>
</li>
<li><a href="#">设备视图</a></li>
<li>
<a href="#" class="sub">业务视图</a>
<ul>
<li><a href="#">IP拓扑</a></li>
<li><a href="#">拓扑管理</a></li>
<li class="topline">
<a href="#" class="sub">设备视图</a>
<ul>
<li class="topline"><a href="#">123</a></li>
<li><a href="#">IP拓扑</a></li>
<li><a href="#">设备视图</a></li>
<li><a href="#">业务视图</a></li>
<li><a href="#">自定义视图</a></li>
</ul>
</li>
<li><a href="#">业务视图</a></li>
<li><a href="#">自定义视图</a></li>
</ul>
</li>
<li><a href="#">自定义视图</a></li>
<li><a href="#">系统信息部资产管理</a></li>
</ul>
</li>
</ul>
</div>
<div class="fright"><img src="images/menuright.png" /></div>
</div>
<div class="clear"></div>
<div class="btnbox">
<ul>
<li><img src="images/go-previous.png" /> <img src="images/go-next.png" /></li>
<li><img src="images/arrow_refresh.png"</li>
<li><img src="images/go-home.png" /></li>
<li><img src="images/system-search.png" /></li>
<li class="line"><img src="images/line.png" /></li>
<li><img src="images/video-display.png" /></li>
<li><img src="images/Clock.png" /></li>
<li><img src="images/system-search.png" /></li>
<li><img src="images/chart_bar.png" /></li>
<li><img src="images/cog.png" /></li>
<li class="line"><img src="images/line.png" /></li>
</ul>
</div>
<script type="text/javascript">
var menu=new menu.dd("menu");
menu.init("menu","menuhover");
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>监测系统</title>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/common.css" rel="stylesheet" type="text/css" />
<link href="css/top.css" rel="stylesheet" type="text/css" />
<script src="js/menu.js" type="text/javascript"></script>
</head>
<body>
<div class="top">
<div class="fleft"><img src="images/menuleft.png" /></div>
<div class="menubox">
<ul class="menu" id="menu">
<li><a href="#" class="menulink">文件</a></li>
<li><a href="#" class="menulink">性能管理</a></li>
<li><a href="#" class="menulink">拓扑管理</a></li>
<li><a href="#" class="menulink">故障管理</a></li>
<li><a href="#" class="menulink">报表管理</a></li>
<li><a href="#" class="menulink">分级管理</a></li>
<li><a href="#" class="menulink">配置管理</a></li>
<li>
<a href="#" class="menulink">系统管理</a>
<ul>
<li>
<a href="#" class="sub">拓扑管理</a>
<ul>
<li><a href="#">子栏目</a></li>
<li><a href="#">子栏目</a></li>
</ul>
</li>
<li>
<a href="#" class="sub">IP拓扑</a>
</li>
<li><a href="#">设备视图</a></li>
<li>
<a href="#" class="sub">业务视图</a>
<ul>
<li><a href="#">IP拓扑</a></li>
<li><a href="#">拓扑管理</a></li>
<li class="topline">
<a href="#" class="sub">设备视图</a>
<ul>
<li class="topline"><a href="#">123</a></li>
<li><a href="#">IP拓扑</a></li>
<li><a href="#">设备视图</a></li>
<li><a href="#">业务视图</a></li>
<li><a href="#">自定义视图</a></li>
</ul>
</li>
<li><a href="#">业务视图</a></li>
<li><a href="#">自定义视图</a></li>
</ul>
</li>
<li><a href="#">自定义视图</a></li>
<li><a href="#">系统信息部资产管理</a></li>
</ul>
</li>
</ul>
</div>
<div class="fright"><img src="images/menuright.png" /></div>
</div>
<div class="clear"></div>
<div class="btnbox">
<ul>
<li><img src="images/go-previous.png" /> <img src="images/go-next.png" /></li>
<li><img src="images/arrow_refresh.png"</li>
<li><img src="images/go-home.png" /></li>
<li><img src="images/system-search.png" /></li>
<li class="line"><img src="images/line.png" /></li>
<li><img src="images/video-display.png" /></li>
<li><img src="images/Clock.png" /></li>
<li><img src="images/system-search.png" /></li>
<li><img src="images/chart_bar.png" /></li>
<li><img src="images/cog.png" /></li>
<li class="line"><img src="images/line.png" /></li>
</ul>
</div>
<script type="text/javascript">
var menu=new menu.dd("menu");
menu.init("menu","menuhover");
</script>
</body>
</html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
// JavaScript Document
var menu = function(){
var t = 15,
z = 50,
s = 6,
a;
function dd(n){
this.n = n;
this.h = []; // 存取有子菜单的项目
this.c = [] // 存取子菜单
}
dd.prototype = {
init: function(p,c)
{
a = c;
var w = document.getElementById(p),
s = w.getElementsByTagName('ul'),
l = s.length, //二级菜单的个数
i = 0;
for(i; i < l; i++)
{
var h = s[i].parentNode;
this.h[i] = h;
this.c[i] = s[i];
h.onmouseover = new Function(this.n+'.st('+i+',true)');
h.onmouseout = new Function(this.n+'.st('+i+')');
}
},
st: function(x,f)
{
var c = this.c[x],
h = this.h[x],
p = h.getElementsByTagName('a')[0];
clearInterval(c.t);
c.style['overflow'] = 'hidden';
if( f )
{
p.className += ' '+a;
if( !c.mh )
{
c.style.display='block';
c.style.height='';
c.mh=c.offsetHeight;
c.style.height=0;
}
if( c.mh == c.offsetHeight )
{
c.style.overflow='visible';
}else
{
c.style.zIndex = z;
z++;
c.t = setInterval(function(){sl(c,1)}, t );
}
}else
{
p.className = p.className.replace(a,'');
c.t = setInterval(function(){ sl(c,-1)}, t );
}
}
}
function sl(c,f)
{
var h = c.offsetHeight;
if((h <= 0 && f != 1)||(h >= c.mh && f==1))
{
if(f==1){
c.style.filter='';
c.style.opacity=1;
c.style.overflow='visible';
}
clearInterval(c.t); return
}
var d=(f==1) ? Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
c.style.opacity = o;
c.style.filter='alpha(opacity='+(o*100)+')';
c.style.height = h + (d * f) + 'px';
}
return {dd:dd};
}();
var menu = function(){
var t = 15,
z = 50,
s = 6,
a;
function dd(n){
this.n = n;
this.h = []; // 存取有子菜单的项目
this.c = [] // 存取子菜单
}
dd.prototype = {
init: function(p,c)
{
a = c;
var w = document.getElementById(p),
s = w.getElementsByTagName('ul'),
l = s.length, //二级菜单的个数
i = 0;
for(i; i < l; i++)
{
var h = s[i].parentNode;
this.h[i] = h;
this.c[i] = s[i];
h.onmouseover = new Function(this.n+'.st('+i+',true)');
h.onmouseout = new Function(this.n+'.st('+i+')');
}
},
st: function(x,f)
{
var c = this.c[x],
h = this.h[x],
p = h.getElementsByTagName('a')[0];
clearInterval(c.t);
c.style['overflow'] = 'hidden';
if( f )
{
p.className += ' '+a;
if( !c.mh )
{
c.style.display='block';
c.style.height='';
c.mh=c.offsetHeight;
c.style.height=0;
}
if( c.mh == c.offsetHeight )
{
c.style.overflow='visible';
}else
{
c.style.zIndex = z;
z++;
c.t = setInterval(function(){sl(c,1)}, t );
}
}else
{
p.className = p.className.replace(a,'');
c.t = setInterval(function(){ sl(c,-1)}, t );
}
}
}
function sl(c,f)
{
var h = c.offsetHeight;
if((h <= 0 && f != 1)||(h >= c.mh && f==1))
{
if(f==1){
c.style.filter='';
c.style.opacity=1;
c.style.overflow='visible';
}
clearInterval(c.t); return
}
var d=(f==1) ? Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
c.style.opacity = o;
c.style.filter='alpha(opacity='+(o*100)+')';
c.style.height = h + (d * f) + 'px';
}
return {dd:dd};
}();
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
@charset "utf-8";
.top {
background:url(../images/menubg.png) repeat-x;
height:29px;
width:100%;
}
.menubox{
float:left;
height:29px;
}
/*多级菜单样式*/
ul.menu {
list-style:none;
}
ul.menu * {
margin:0; padding:0
}
ul.menu a {
display:block;
color:#000;
text-decoration:none;
height: 25px;
line-height: 25px;
}
ul.menu li {
position:relative;
float:left;
margin-right:2px;
}
ul.menu ul {
position:absolute;
top:28px;
left:0;
background:#E5F8FC;
display:none;
opacity:0;
list-style:none
}
ul.menu ul li {
position:relative;
border:1px solid #8CC6DA;
border-top:none;
width:130px;
margin:0
}
ul.menu ul li a {
display:block;
padding:3px 7px 5px;
background-color:#E5F8FC;
color:#4789AC;
}
ul.menu ul li a:hover {
background-color:#FAFBFD;
color:#FE8431;
}
ul.menu ul ul {
left:130px;
top:-1px;
}
ul.menu .menulink {
background:url(../images/noactive.png) no-repeat;
text-align:center;
width:80px;
height:29;
line-height:29px;
color:#66CCFD;
margin-right:10px;
}
ul.menu .menulink:hover, ul.menu .menuhover {
background:url(../images/active.png) no-repeat;
color:#FFF;
}
ul.menu .sub {
background:#fff url(../images/arrow.gif) 100% 3px no-repeat;
color:#FE8333;
}
ul.menu .topline {
border-top:1px solid #aaa;
}
/*按钮层*/
.btnbox{
background:url(../images/btnbg.png) repeat-x;
height:45px;
padding-left:10px;
}
.btnbox ul li{
float:left;
margin:5px 8px;
cursor:pointer;
}
.line{
float:left;
margin:5px 8px;
}
.subbg{
background: url(../images/subbg.png) repeat-x;
width:100%;
height:28px;
}
.user{
height:28px;
line-height:28px;
color:#4889A7;
padding-left:10px;
_padding-top:4px;
}
.user img{
vertical-align:middle;
padding-right:8px;
}
.top {
background:url(../images/menubg.png) repeat-x;
height:29px;
width:100%;
}
.menubox{
float:left;
height:29px;
}
/*多级菜单样式*/
ul.menu {
list-style:none;
}
ul.menu * {
margin:0; padding:0
}
ul.menu a {
display:block;
color:#000;
text-decoration:none;
height: 25px;
line-height: 25px;
}
ul.menu li {
position:relative;
float:left;
margin-right:2px;
}
ul.menu ul {
position:absolute;
top:28px;
left:0;
background:#E5F8FC;
display:none;
opacity:0;
list-style:none
}
ul.menu ul li {
position:relative;
border:1px solid #8CC6DA;
border-top:none;
width:130px;
margin:0
}
ul.menu ul li a {
display:block;
padding:3px 7px 5px;
background-color:#E5F8FC;
color:#4789AC;
}
ul.menu ul li a:hover {
background-color:#FAFBFD;
color:#FE8431;
}
ul.menu ul ul {
left:130px;
top:-1px;
}
ul.menu .menulink {
background:url(../images/noactive.png) no-repeat;
text-align:center;
width:80px;
height:29;
line-height:29px;
color:#66CCFD;
margin-right:10px;
}
ul.menu .menulink:hover, ul.menu .menuhover {
background:url(../images/active.png) no-repeat;
color:#FFF;
}
ul.menu .sub {
background:#fff url(../images/arrow.gif) 100% 3px no-repeat;
color:#FE8333;
}
ul.menu .topline {
border-top:1px solid #aaa;
}
/*按钮层*/
.btnbox{
background:url(../images/btnbg.png) repeat-x;
height:45px;
padding-left:10px;
}
.btnbox ul li{
float:left;
margin:5px 8px;
cursor:pointer;
}
.line{
float:left;
margin:5px 8px;
}
.subbg{
background: url(../images/subbg.png) repeat-x;
width:100%;
height:28px;
}
.user{
height:28px;
line-height:28px;
color:#4889A7;
padding-left:10px;
_padding-top:4px;
}
.user img{
vertical-align:middle;
padding-right:8px;
}