CSS+Javacript treeview 菜单
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default6.aspx.vb" Inherits="Default6" %>
<!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 runat="server">
<title>Menu treeview Page</title>
<script language="javascript">
function retId(id)
{
return document.getElementById(id);
}
function showObj(divId)
{
if (retId(divId).style.display=="none")
{
retId(divId).style.display="inline";
}
else
{
retId(divId).style.display="none";
}
}
</script>
<style type="text/css">
<!--
.menucontainer
{
background:#DAF4FC;
margin-left:1px;
margin-right:1px;
width:180px;
}
.menutitle{
cursor:hand;
font-size:12px;
font-family: tahoma, 宋体, fantasy;
background:#3399CC;
height:17px;
padding-left:1px;
padding-top:2px;
padding-bottom:1px;
margin-bottom:2px;
}
.navigation ul
{
list-style-type:none;
margin:0px;
padding:0px;
color:#000000;
}
.navigation li{
border-bottom:1px solid #DAF4FC;
}
.navigation li a{
display:block;
padding:0.1px 5px 0.1px 0.5em;
text-decoration:none;
font-size:12px;
}
.navigation li a:link,.navigation li a:visted{
color:#000011}
.navigation li a:hover
{
background-color:#3399CC;
font-size:14px;
font-family: tahoma, 宋体, fantasy;
color:#FFFFFF;
}
a.menu:link{color:#fff;text-decoration:none;font-weight:bold;}
a.menu:visited{color:#fff;text-decoration:none;font-weight:bold; }
a.menu:hover{color:#0160A6; font-weight:bold;}
-->
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="menucontainer">
<div onClick="showObj('div0')" class="menutitle"><a href="#" class="menu">Menu1</a></div>
<div id="div0" class="navigation" style="display:inline">
<ul>
<li ><a><asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="#">aaaaa</asp:HyperLink></a></li>
<li><a><asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="#">bbbbb</asp:HyperLink></a></li>
<li ><a><asp:HyperLink ID="HyperLink4" runat="server" NavigateUrl="#">cccccc</asp:HyperLink></a></li>
<li><a><asp:HyperLink ID="HyperLink5" runat="server" NavigateUrl="#">dddddddd</asp:HyperLink></a></li>
</ul>
</div>
<div onClick="showObj('div1')" class="menutitle"><a href="#" class="menu">Menu2</a></div>
<div id="div1" class="navigation" style="display:inline">
<ul>
<li ><a><asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="#">aaaaa</asp:HyperLink></a></li>
<li><a><asp:HyperLink ID="HyperLink6" runat="server" NavigateUrl="#">bbbbb</asp:HyperLink></a></li>
<li ><a><asp:HyperLink ID="HyperLink7" runat="server" NavigateUrl="#">cccccc</asp:HyperLink></a></li>
<li><a><asp:HyperLink ID="HyperLink8" runat="server" NavigateUrl="#">dddddddd</asp:HyperLink></a></li>
</ul>
</div>
<div onClick="showObj('div2')" class="menutitle"><a href="#" class="menu">Menu3</a></div>
<div id="div2" class="navigation" style="display:inline">
<ul>
<li ><a><asp:HyperLink ID="HyperLink9" runat="server" NavigateUrl="#">aaaaa</asp:HyperLink></a></li>
<li><a><asp:HyperLink ID="HyperLink10" runat="server" NavigateUrl="#">bbbbb</asp:HyperLink></a></li>
<li ><a><asp:HyperLink ID="HyperLink11" runat="server" NavigateUrl="#">cccccc</asp:HyperLink></a></li>
<li><a><asp:HyperLink ID="HyperLink12" runat="server" NavigateUrl="#">dddddddd</asp:HyperLink></a></li>
</ul>
</div>
</div>
</form>
</body>
</html>
<!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 runat="server">
<title>Menu treeview Page</title>
<script language="javascript">
function retId(id)
{
return document.getElementById(id);
}
function showObj(divId)
{
if (retId(divId).style.display=="none")
{
retId(divId).style.display="inline";
}
else
{
retId(divId).style.display="none";
}
}
</script>
<style type="text/css">
<!--
.menucontainer
{
background:#DAF4FC;
margin-left:1px;
margin-right:1px;
width:180px;
}
.menutitle{
cursor:hand;
font-size:12px;
font-family: tahoma, 宋体, fantasy;
background:#3399CC;
height:17px;
padding-left:1px;
padding-top:2px;
padding-bottom:1px;
margin-bottom:2px;
}
.navigation ul
{
list-style-type:none;
margin:0px;
padding:0px;
color:#000000;
}
.navigation li{
border-bottom:1px solid #DAF4FC;
}
.navigation li a{
display:block;
padding:0.1px 5px 0.1px 0.5em;
text-decoration:none;
font-size:12px;
}
.navigation li a:link,.navigation li a:visted{
color:#000011}
.navigation li a:hover
{
background-color:#3399CC;
font-size:14px;
font-family: tahoma, 宋体, fantasy;
color:#FFFFFF;
}
a.menu:link{color:#fff;text-decoration:none;font-weight:bold;}
a.menu:visited{color:#fff;text-decoration:none;font-weight:bold; }
a.menu:hover{color:#0160A6; font-weight:bold;}
-->
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="menucontainer">
<div onClick="showObj('div0')" class="menutitle"><a href="#" class="menu">Menu1</a></div>
<div id="div0" class="navigation" style="display:inline">
<ul>
<li ><a><asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="#">aaaaa</asp:HyperLink></a></li>
<li><a><asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="#">bbbbb</asp:HyperLink></a></li>
<li ><a><asp:HyperLink ID="HyperLink4" runat="server" NavigateUrl="#">cccccc</asp:HyperLink></a></li>
<li><a><asp:HyperLink ID="HyperLink5" runat="server" NavigateUrl="#">dddddddd</asp:HyperLink></a></li>
</ul>
</div>
<div onClick="showObj('div1')" class="menutitle"><a href="#" class="menu">Menu2</a></div>
<div id="div1" class="navigation" style="display:inline">
<ul>
<li ><a><asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="#">aaaaa</asp:HyperLink></a></li>
<li><a><asp:HyperLink ID="HyperLink6" runat="server" NavigateUrl="#">bbbbb</asp:HyperLink></a></li>
<li ><a><asp:HyperLink ID="HyperLink7" runat="server" NavigateUrl="#">cccccc</asp:HyperLink></a></li>
<li><a><asp:HyperLink ID="HyperLink8" runat="server" NavigateUrl="#">dddddddd</asp:HyperLink></a></li>
</ul>
</div>
<div onClick="showObj('div2')" class="menutitle"><a href="#" class="menu">Menu3</a></div>
<div id="div2" class="navigation" style="display:inline">
<ul>
<li ><a><asp:HyperLink ID="HyperLink9" runat="server" NavigateUrl="#">aaaaa</asp:HyperLink></a></li>
<li><a><asp:HyperLink ID="HyperLink10" runat="server" NavigateUrl="#">bbbbb</asp:HyperLink></a></li>
<li ><a><asp:HyperLink ID="HyperLink11" runat="server" NavigateUrl="#">cccccc</asp:HyperLink></a></li>
<li><a><asp:HyperLink ID="HyperLink12" runat="server" NavigateUrl="#">dddddddd</asp:HyperLink></a></li>
</ul>
</div>
</div>
</form>
</body>
</html>
