HTML导航菜单_navigationmanager html-CSDN博客

本文链接：https://blog.csdn.net/bytxl/article/details/7991595

-------------------------------------------------------------------

"frameset.html"文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<FRAMESET cols="15%,*" framespacing="0" frameborder="0" border="0" borderColor="black">
<FRAME src="left.html" name="leftFrame" scrolling="no" noresize="noresize" framespacing="0" frameborder="0" border="0" />
<FRAME src="" name="rightFrame" scrolling="no" framespacing="0" frameborder="0" border="0" />

</FRAMESET>

-------------------------------------------------------------------

"left.html"文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312" />
<LINK href="tree.css" type="text/css" rel="stylesheet">
<TITLE>左侧导航页面</TITLE>
</HEAD>
<body id="body">
<table class="container" border="0" cellspacing="0" cellpadding="0" id="tbmenu">
<tr>
    <td class="sideBar" valign="top">
           <div id="menu_firewall">test</div>
      <ul class="subMenu" id="sMenu_firewall" style="height:auto">
        <li id="1" οnclick="javascript: onClick(this)" href="main.html">自定义树</li>
        <li id="2" οnclick="javascript: onClick(this)" href="frameset1.html">菜单</li>
        <li id="3" οnclick="javascript: onClick(this)" href="arrow_menuClosed.gif">箭头</li>
        <li id="4" οnclick="javascript: onClick(this)" href="tabBg_active.gif">图块</li>
      </ul>
    <td>
   </tr>
</table>
</HTML>
<SCRIPT language="JavaScript" type="text/JavaScript">

   var curmenu = "network";
   function onClick(e)
   {
       parent.rightFrame.location.href = e.getAttribute('href');
       if (this.curmenu) {
           this.curmenu.className = '';
       }
       this.curmenu = e;
       e.className = 'active';

   }

</SCRIPT>

-------------------------------------------------------------------

"tree.css"文件：
BODY {
   FONT: 12px song, verdana; COLOR: #6b6b6b
}
TD {
   FONT: 12px song, verdana; COLOR: #6b6b6b
}
DIV {
   FONT: 12px song, verdana; COLOR: #6b6b6b
}
* {
   PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
LI {
   LIST-STYLE-TYPE: none
}

.container {
   CLEAR: both; WIDTH: 100%; HEIGHT: 1600px; TEXT-ALIGN: left
}
.sideBar {
   BACKGROUND: #E6EFF7; WIDTH: 167px
}
.sideBar DIV {
   PADDING-LEFT: 28px; BACKGROUND: #8CA5DE no-repeat 8px 5px; MARGIN-BOTTOM: 1px; COLOR: #ffffff; LINE-HEIGHT: 25px; HEIGHT: 25px
}
.sideBar .opened {
   FONT-WEIGHT: bold; BACKGROUND: #8CA5DE no-repeat 8px 5px; CURSOR: pointer
}
.sideBar .closed {
   CURSOR: pointer
}
.sideBar .menuOver {
   FONT-WEIGHT: bold; BACKGROUND: #A9C7EC no-repeat 8px 5px; CURSOR: pointer
}
.sideBar .subMenu {
   OVERFLOW: hidden; HEIGHT: 0px
}
.sideBar LI {
   PADDING-LEFT: 40px; BACKGROUND: #FFFFFF; MARGIN-BOTTOM: 1px; CURSOR: pointer; COLOR: #083AA5; LINE-HEIGHT: 25px; HEIGHT: 25px
}
.sideBar .active {
   FONT-WEIGHT: bold; BACKGROUND: url(/images/arrow_menuActive.gif) #FFFFFF no-repeat right 5px
}
.sideBar .subMenuOver {
   BACKGROUND: #e8e3d9
}