简单树形菜单
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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>Tree Menu - conhome</title>
<script type="text/javascript">
if (!document.getElementById) document.getElementById = function() { return null; }
function initializeMenu(actuatorId, menuId) {
var actuator = document.getElementById(actuatorId);
var menu = document.getElementById(menuId);
if (menu == null || actuator == null) return;
//if (window.opera) return; // I'm too tired
actuator.style.backgroundImage = "url(images/pro_3.jpg)";
actuator.onclick = function() {
var display = menu.style.display;
this.style.backgroundImage = (display == "block") ? "url(images/pro_3.jpg)" : "url(images/pro_2.jpg)";
menu.style.display = (display == "block") ? "none" : "block";
return false;
}
}
window.onload = function() {
initializeMenu("one1", "oneul1");
initializeMenu("two1", "twoul1");
initializeMenu("three1", "threeul1");
initializeMenu("one2", "oneul2");
initializeMenu("four1", "fourul1");
}
function changeMain(obj) {
obj.style.cursor = 'pointer';
obj.style.backgroundColor = "blue";//此颜色被背景图片给覆盖了，在它后面
obj.style.color = "white";
}
function change(obj) {
obj.style.cursor = 'pointer';
obj.style.backgroundColor = "blue";
obj.style.color = "white";
}
function back_color(obj) {
obj.style.cursor = '';
obj.style.backgroundColor = "";
obj.style.color = "#333333";
}
</script>
<style type="text/css">
body {
margin: 0px;
font-family: arial;
}
a { font:normal 12px 宋体; color:#000000; text-decoration:none; }
a:hover { color:#428EFF;text-decoration:underline; }
a:visited{ color:red; vertical-align:middle; }
#mainMenu {
clear: both;
width: 210px;
}
#mainMenu ul {
margin: 0px;
padding: 0px;
}
#mainMenu ul li {
margin: 0px;
padding: 0px;
list-style: none;
}
#mainMenu ul li ul, #mainMenu ul li ul li ul, #mainMenu ul li ul li ul li ul {
display: none;
margin: 0px;
padding: 0px;
}
#mainMenu ul li ul li, #mainMenu ul li ul li ul li, #mainMenu ul li ul li ul li ul li {
list-style: none;
}
#mainMenu ul li div
{
margin-left:10px;
padding-left: 23px;
width: 185px !important;
width: 108px;
font: bold 13px/29px Arial;
color: #333333;
background: url(images/pro_3.jpg) no-repeat 100%;
height: 29px;
border-right: 1px solid #ebebeb;
border-bottom: 1px solid #ebebeb;
border-left: 1px solid #ebebeb;
margin-top:10px;
}
#mainMenu ul li ul li div
{
margin-left:15px;
padding-left: 38px;
width: 160px !important;
width: 108px;
font: 12px/29px Arial;
color: #333333;
background: url(images/pro_.jpg) no-repeat 50%;
height: 20px;
border-right: 1px solid #ebebeb;
border-bottom:1px solid #ebebeb;
border-left: 1px solid #ebebeb;
margin-top:0px;
margin-bottom:0px;
padding-top:10px;
}
.div1
{
}
</style>
</head>
<body>
<div id="mainMenu">
<ul id="oneul1">
<li><div id="two1" onMouseOver="changeMain(this)" onMouseOut="back_color(this)" >菜单1</div>
<ul id="twoul1">
<li><div onMouseOver="change(this)" onMouseOut="back_color(this)" class="div1" ><a href="#">二级菜单</a></div></li>
<li><div onMouseOver="change(this)" onMouseOut="back_color(this)"><a href="#">二级菜单</a></div></li>
<li><div onMouseOver="change(this)" onMouseOut="back_color(this)" style="vertical-align:middle"><a href="#">二级菜单</a></div></li>
</ul>
</li>
<li><div id="one2" onMouseOver="changeMain(this)" onMouseOut="back_color(this)">菜单2</div>
<ul id="oneul2">
<li><div onMouseOver="change(this)" onMouseOut="back_color(this)"><a href="#">二级菜单</a></div></li>
<li><div onMouseOver="change(this)" onMouseOut="back_color(this)"><a href="#">二级菜单</a></div></li>
<li><div onMouseOver="change(this)" onMouseOut="back_color(this)"><a href="#">二级菜单</a></div></li>
</ul>
</li>
<li><div id="three1" onMouseOver="changeMain(this)" onMouseOut="back_color(this)">菜单3</div>
<ul id="threeul1">
<li><div onMouseOver="change(this)" onMouseOut="back_color(this)"><a href="#">二级菜单</a></div></li>
<li><div onMouseOver="change(this)" onMouseOut="back_color(this)"><a href="#">二级菜单</a></div></li>
<li><div onMouseOver="change(this)" onMouseOut="back_color(this)"><a href="#">二级菜单</a></div></li>
</ul>
</li>
<li><div id="four1" onMouseOver="changeMain(this)" onMouseOut="back_color(this)">菜单4</div>
<ul id="fourul1">
<li><div onMouseOver="change(this)" onMouseOut="back_color(this)"><a href="#">二级菜单</a></div></li>
<li><div onMouseOver="change(this)" onMouseOut="back_color(this)"><a href="#">二级菜单</a></div></li>
<li><div onMouseOver="change(this)" onMouseOut="back_color(this)"><a href="#">二级菜单</a></div></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
