<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DIV+CSS+JS二级菜单</title> <style type="text/css"> <!-- * { margin:0; padding:0; border:0; } body { background-color: #636562 } #nav { line-height: 24px; list-style-type: none; text-align:left;/*定义整个ul菜单的行高和背景色*/ } /*==================一级目录===================*/ #nav a { font-family: Arial; font-size:11px; color:white; height:20px; padding-left:20px; font-weight:bold; text-decoration:none; padding-left:20px;/*Width(一定要)，否则下面的Li会变形*/ } #nav li { font-family: Arial; font-size:11px; color:white; height:20px; padding-left:20px; font-weight:bold; } #nav li a:hover { font-family: Arial; font-size:11px; color:white; height:20px; padding-left:20px; font-weight:bold; } #nav a:link { font-family: Arial; font-size:11px; color:#ff9c12; height:20px; padding-left:20px; font-weight:bold; } #nav a:visited { font-family: Arial; font-size:11px; color:w#ff9c12; height:20px; padding-left:20px; font-weight:bold; } #nav a:hover { font-family: Arial; font-size:11px; color:#ff9c12; height:20px; padding-left:20px; font-weight:bold; } /*==================二级目录===================*/ #nav li ul { list-style:none; text-align:left; } #nav li ul li {
} #nav li ul a { font-family:Arial; font-weight:Normal; font-size:11px; color:white; height:20px; FONT-STYLE: normal; FONT-VARIANT: normal } /*下面是二级目录的链接样式*/
#nav li ul a:link { font-family:Arial; font-weight:Normal; font-size:11px; color:#c2c2c2; height:20px; FONT-STYLE: normal; FONT-VARIANT: normal } #nav li ul a:visited { font-family:Arial; font-weight:Normal; font-size:11px; color:#c2c2c2; height:20px; FONT-STYLE: normal; FONT-VARIANT: normal
} #nav li ul a:hover { font-family:Arial; font-weight:Normal; font-size:11px; color:#ff9900; height:20px; FONT-STYLE: normal; FONT-VARIANT: normal } /*==================三级目录===================*/ ul.third { padding-left:0px; width:181px; background:#000000!important; color:#FF0000; text-decoration:none; } /*==============================*/
#nav li:hover ul { left: auto; } #nav li.sfhover ul { left: auto; } #content { clear: left; } #nav ul.collapsed { display: none; } --> #PARENT { width:181px; } </style>
</head> <body> <div id="PARENT"> <ul id="nav"> <li><a href="#Menu=ChildMenu1" οnclick="DoMenu('ChildMenu1')">General Servers </a> <ul id="ChildMenu1" class="collapsed"> <li><a href="code/city.do" target="mainFrame">System Board </a></li> <li><a href="code/saltUsage.do" target="mainFrame">1U Rackmount </a></li> </ul> </li> <li><a href="#Menu=ChildMenu2" οnclick="DoMenu('ChildMenu2')">Blade Servers</a> <ul id="ChildMenu2" class="collapsed"> <li><a href="city/cityStore.do" target="mainFrame">IB4002</a></li> <li><a href="city/planTransport.do" target="mainFrame">IB4000</a></li> <li><a href="hello.jsp" target="mainFrame">ATCA</a></li> </ul> </li> <li><a href="#Menu=ChildMenu3" οnclick="DoMenu('ChildMenu3')">Storage</a> <ul id="ChildMenu3" class="collapsed"> <li><a href="hello.jsp" target="mainFrame">SAN Storage</a></li> <li><a href="hello.jsp" target="mainFrame">Server Storage</a></li> <li><a href="hello.jsp" target="mainFrame">JBOD</a></li> </ul> </li> </ul> </div> </body> </html> <script type=text/javascript> <!-- var lastThirdElemnet; var LastLeftID = "";
function changeSubStyle(obj) { var objSubChild = obj.parentNode.getElementsByTagName("ul")[0]; var isDisplay = objSubChild.style.display == "none"; objSubChild.style.display = isDisplay ? "block" : "none"; if (lastThirdElemnet != null) { lastThirdElemnet.style.display = "none"; lastThirdElemnet = null; } if (isDisplay) { lastThirdElemnet = objSubChild; } }
function menuFix() { var obj = document.getElementById("nav").getElementsByTagName("li");
for (var i = 0; i < obj.length; i++) { obj[i].οnmοuseοver=function() { this.className += (this.className.length > 0 ? " " : "") + "sfhover"; } obj[i].onMouseDown = function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } obj[i].onMouseUp = function() { this.className += (this.className.length > 0 ? " " : "") + "sfhover"; } obj[i].onmouseout = function() { this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), ""); } } }
function DoMenu(emid) { var obj = document.getElementById(emid);
if (obj != null) { obj.className = (obj.className.toLowerCase() == "expanded" ? "collapsed" : "expanded"); } //关闭上一个Menu if ((LastLeftID != "") && (emid != LastLeftID)) { document.getElementById(LastLeftID).className = "collapsed"; } LastLeftID = emid; }
function GetMenuID() { var MenuID=""; var _paramStr = new String(window.location.href); var _sharpPos = _paramStr.indexOf("#");
if (_sharpPos >= 0 && _sharpPos < _paramStr.length - 1) { _paramStr = _paramStr.substring(_sharpPos + 1, _paramStr.length); } else { _paramStr = ""; }
if (_paramStr.length > 0) { var _paramArr = _paramStr.split("&"); if (_paramArr.length>0) { var _paramKeyVal = _paramArr[0].split("="); if (_paramKeyVal.length>0) { MenuID = _paramKeyVal[1]; } } }
if(MenuID != "") { DoMenu(MenuID) } }
GetMenuID(); //*这两个function的顺序要注意一下，不然在Firefox里GetMenuID()不起效果 menuFix(); --> </script>
转载于:https://www.cnblogs.com/nanshouyong326/archive/2008/04/24/1168930.html
相关资源：CSS3鼠标经过显示二维码和二级菜单特效.zip