一个简单的2级菜单

最新推荐文章于 2023-11-05 20:49:09 发布

iteye_2555

最新推荐文章于 2023-11-05 20:49:09 发布

阅读量126

点赞数

分类专栏： javascript 文章标签： Microsoft HTML

javascript 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

[code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta name="generator" content="Bluefish 1.0.7">
<meta name="author" content="root">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
a {
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#666;
text-decoration:none;
}

a:hover {
color:#F90;
text-decoration:underline;
}

a:vistied {
color:#666;
text-decoration:none;
}

#tree li {
color:#666;
font-size:10px;
font-family:Arial, Helvetica, sans-serif;
line-height:180%;
list-style:none;
}

#tree ul {
margin-left:16px;
padding-left:0px;
display:none;
}

</style>
<script type="text/javascript">
var lastSubMenuID;
//记录最后点击的子菜单
function doRecord(subMenuID) {
document.getElementById(subMenuID).style.display = "none";
//alert(subMenuID);
lastSubMenuID = subMenuID;
}

//隐藏子菜单
function hideLastSubMenu() {
if(lastSubMenuID == undefined || lastSubMenuID == "") {
return;
} else {
var lastSubMenu = document.getElementById(lastSubMenuID);
// alert(lastSubMenu);
lastSubMenu.style.display = "none";
}
}

//显示子菜单
function showSubMenu(subMenuID) {
//alert(subMenuID);
if(lastSubMenuID == subMenuID) {
if(document.getElementById(lastSubMenuID).style.display == "block") {
document.getElementById(lastSubMenuID).style.display = "none";
return;
}
}

if(lastSubMenuID == undefined) {
doRecord(subMenuID);
}else{
hideLastSubMenu();
doRecord(subMenuID);
}
changeMenuState(subMenuID);
}

//改变子菜单的样式
function changeMenuState(subMenuID) {
//alert(subMenuID);
var subMenu = document.getElementById(subMenuID);
//subMenu.style.filter = "progidXImageTransform.Microsoft.Wipe()";
//subMenu.filters[0].apply();
subMenu.style.display = "block";
//subMenu.filters[0].play();
}
</script>
</HEAD>

<BODY>
<ul id="tree">
<li id="mainMenu1">
<a href="#" onClick="showSubMenu('main1SubMenu');">Syringes</a>
<ul id="main1SubMenu">
<li><a href="#" class="link1">Safety Syringes</a></li>
<li><a href="#" class="link1">0.1ml Safety...</a></li>
<li><a href="#" class="link1">0.5ml Safety...</a></li>
</ul>
</li>

<li id="mainMenu2">
<a href="#" onClick="showSubMenu('main2SubMenu');">Moulds</a>
<ul id="main2SubMenu">
<li><a href="#" class="link1">Hot Runner...</a></li>
<li><a href="#" class="link1">Semi-Hot...</a></li>
<li><a href="#" class="link1">Cold Runner...</a></li>
</ul>
</li>

<li id="mainMenu3">
<a href="#" onClick="showSubMenu('main3SubMenu');">Moulds</a>
<ul id="main3SubMenu">
<li><a href="#" class="link1">Hot Runner...</a></li>
<li><a href="#" class="link1">Semi-Hot...</a></li>
<li><a href="#" class="link1">Cold Runner...</a></li>
</ul>
</li>

<li id="mainMenu4">
<a href="#" onClick="showSubMenu('main4SubMenu');">Moulds</a>
<ul id="main4SubMenu">
<li><a href="#" class="link1">Hot Runner...</a></li>
<li><a href="#" class="link1">Semi-Hot...</a></li>
<li><a href="#" class="link1">Cold Runner...</a></li>
</ul>
</li>
</ul>
</BODY>
</HTML>[/code]