树型菜单的制作
想做个如：http://www.51windows.net/data/?url=/data/files/file_843.asp
左侧的树型菜单，或者类似本站的树型菜单也不错，不知要从何入手
请高手们赐教！！
给个思路也行，有代码最好
[解决办法]
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> 123 </title>
</head>
<body>
<script>
if (!document.getElementById)
document.getElementById = function() { return null; }
function initializeMenu(menuId, actuatorId) {
var menu = document.getElementById(menuId);
var actuator = document.getElementById(actuatorId);
if (menu == null || actuator == null) return;
//if (window.opera) return; // I 'm too tired
actuator.parentNode.style.backgroundImage = "url(../images/pic_7.gif) ";
actuator.onclick = function() {
var display = menu.style.display;
this.parentNode.style.backgroundImage =
(display == "block ") ? "url(../images/pic_7.gif) " : "url(../images/pic_7.gif) ";
menu.style.display = (display == "block ") ? "none " : "block ";
return false;
}
}
window.onload = function() {
initializeMenu( "productsMenu ", "productsActuator ");
initializeMenu( "newPhonesMenu ", "newPhonesActuator ");
initializeMenu( "compareMenu ", "compareActuator ");
}
</script>
<style>
body {
font-family: verdana, helvetica, arial, sans-serif;
}
#mainMenu {
background-color: #FFFFFF;
color: #000;
width: 100%;
}
#menuList {
margin: 0px;
padding: 10px 0px 10px 15px;
}
li.menubar {
background: url(../images/pic_7.gif) no-repeat 0em 0.3em;
font-size: 12px;
line-height: 1.5em;
list-style: none outside;
}
.menu, .submenu {
display: none;
margin-left: 15px;
padding: 0px;
}
.menu li, .submenu li {
background: url(../images/pic_9.gif) no-repeat 0em 0.3em;
list-style: none outside;
}
a.actuator {
background-color: transparent;
color: #000;
font-size: 12px;
padding-left: 15px;
text-decoration: none;
}
a.actuator:hover {
text-decoration: underline;
}
.menu li a, .submenu li a {
background-color: transparent;
color: #000;
font-size: 12px;
padding-left: 15px;
text-decoration: none;
}
.menu li a:hover, submenu li a:hover {
/*border-bottom: 1px dashed #000;*/
text-decoration: underline;
}
span.key {
text-decoration: underline;
}
</style>
</head>
<body>
<div id= "mainMenu ">
<ul id= "menuList ">
<li class= "menubar ">
<a href= "# " id= "productsActuator " class= "actuator "> 555 </a>
<ul id= "productsMenu " class= "menu ">
<li>
<a href= "# " id= "newPhonesActuator " class= "actuator "> 666 </a>
<ul id= "newPhonesMenu " class= "submenu ">
<li> <a href= "../Work/WorkAdd.htm " target= "jay "> 777 </a> </li>
<li> <a href= " "> 555 </a> </li>
<li> <a href= " "> 0 </a> </li>
<li> <a href= " "> 1 </a> </li>
<li> <a href= " "> 2 </a> </li>
<li> <a href= " "> 3 </a> </li>
<li> <a href= " "> 4 </a> </li>
<li> <a href= " "> 5 </a> </li>
</ul>
</li>
<li>
<a href= "# " id= "compareActuator " class= "actuator "> 个人月工作总和查询 </a>
<ul id= "compareMenu " class= "submenu ">
<li> <a href= " "> 一月份 </a> </li>
<li> <a href= " "> 二月份 </a> </li>
<li> <a href= " "> 三月份 </a> </li>
<li> <a href= " "> 四月份 </a> </li>
<li> <a href= " "> 五月份 </a> </li>
<li> <a href= " "> 六月份 </a> </li>
<li> <a href= " "> 七月份 </a> </li>
<li> <a href= " "> 八月份 </a> </li>
<li> <a href= " "> 九月份 </a> </li>
<li> <a href= " "> 十月份 </a> </li>
<li> <a href= " "> 十一月份 </a> </li>
<li> <a href= " "> 十二月份 </a> </li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
[解决办法]
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
using System.Data.ProviderBase;
using System.Data.OleDb;
public partial class _Default : System.Web.UI.Page
{
DataSet ds = new DataSet();
protected void Page_Load(object sender, EventArgs e)
{
TreeView1.Items.Add(i1);
i1.ChildItems.Add(i2);
// 在此处放置用户代码以初始化页面
OleDbConnection CN = new OleDbConnection( "Provider=MSDAORA;Data Source=MDB;User ID=scott;Password=tiger; ");
//初始化连接字符串
CN.Open();
//添加命令，从数据库中得到数据
OleDbCommand sqlCmd = new OleDbCommand();
sqlCmd.Connection = CN;
sqlCmd.CommandText = "select * from tbTree1 ";
sqlCmd.CommandType = CommandType.Text;
OleDbDataAdapter adp = new OleDbDataAdapter(sqlCmd);
adp.Fill(ds);
//调用递归函数，完成树形结构的生成
tn2=AddTree(0, (TreeNode)null);
TreeView1.Nodes.Add(tn2);
}
public void AddTree(int ParentID, TreeNode pNode)
{
string url1;
string url2;
string url3;
string url4;
TreeNode tn1 = new TreeNode();
DataView dvTree = new DataView(ds.Tables[0]);
//过滤ParentID,得到当前的所有子节点
dvTree.RowFilter = "[PARENTID] = " + ParentID;
foreach (DataRowView Row in dvTree)
{
if (pNode == null)
{ // '?添加根节点
url1 = Row[ "ConText "].ToString();
url2 = Row[ "Url "].ToString() + "?ConText= " + url1;
tn1.Text = url1;
tn1.NavigateUrl = url2;
TreeView1.Nodes.Add(tn1);
AddTree(Int32.Parse(Row[ "ID "].ToString()), mi); //再次递归
}
else
{ //添加当前节点的子节点
TreeNode tn2 = new TreeNode();
url3 = Row[ "ConText "].ToString();
url4 = Row[ "Url "].ToString() + "?ConText= " + url3;
tn2.Text = url3;
tn2.NavigateUrl = url4;
pNode.ChildNodes.Add(tn2);
AddTree(Int32.Parse(Row[ "ID "].ToString()), m2); //再次递归
}
}
}
}
[解决办法]
看看 http://bbs.doughty.cn/default2.aspx
代码开放的.