【注意】我这里只是为了演示目的，随机生成了五层，每层的元素也是随机生成的。真正在用的时候，可以读取数据库
这个页面，在浏览器中看起来是这样
【注意】因为我用的是随机数，所以你看到的结果可能跟这个不一样
第二步：准备一个测试用的链接页面
本例中，我们需要一个a.aspx页面。
我只是简单地在这个页面中放了一些文字
第三步：编写主页面
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<!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></title>
<script src="jquery-1.4.1.js" type="text/javascript"></script>
<style type="text/css">
.selected
{
font-weight:bold;
}
div#menu div
{
padding-left: 20px;
background-image: url("images/min.gif");
background-repeat: no-repeat;
background-position: left top;
}
ul
{
padding-left:20px;
padding-top:0px;
padding-bottom:0px;
margin:0px;
display:none
}
html,body,form
{
height:100%;
width:100%;
overflow:hidden;
}
div#menu,div#content
{
float:left;
height:100%;
padding:10px
}
</style>
<script language="javascript" type="text/javascript">
$(function () {
//加载菜单数据
$("div#menu").load("menu.aspx", null, function () {
$("div#menu div").css("display", "none").click(function () {
$("div#menu div").removeClass("selected");
$(this).addClass("selected")
.children().show("slow").end()
.siblings().children().slideUp("slow");
});
$("div#menu>MenuItems>div").css("display", "block");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="menu" style="width:25%">
</div>
<div id="content" style="width:70%">
<iframe name="content" width="100%" height="100%" frameborder="0"></iframe>
</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></title>
<script src="jquery-1.4.1.js" type="text/javascript"></script>
<style type="text/css">
.selected
{
font-weight:bold;
}
div#menu div
{
padding-left: 20px;
background-image: url("images/min.gif");
background-repeat: no-repeat;
background-position: left top;
}
ul
{
padding-left:20px;
padding-top:0px;
padding-bottom:0px;
margin:0px;
display:none
}
html,body,form
{
height:100%;
width:100%;
overflow:hidden;
}
div#menu,div#content
{
float:left;
height:100%;
padding:10px
}
</style>
<script language="javascript" type="text/javascript">
$(function () {
//加载菜单数据
$("div#menu").load("menu.aspx", null, function () {
$("div#menu div").css("display", "none").click(function () {
$("div#menu div").removeClass("selected");
$(this).addClass("selected")
.children().show("slow").end()
.siblings().children().slideUp("slow");
});
$("div#menu>MenuItems>div").css("display", "block");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="menu" style="width:25%">
</div>
<div id="content" style="width:70%">
<iframe name="content" width="100%" height="100%" frameborder="0"></iframe>
</div>
</form>
</body>
</html>
很简单，我们在这个页面中左右两侧各放置了一个div。它们都是空的。在页面加载成功之后，我们再读取了menu.aspx页面。
【注意】本例中用了一个图片，min.gif.你可以替换掉该图片。尽量小一点。
