核心提示：[html]%@ Page Language=C# AutoEventWireup=true CodeBehind=daohang.aspx.cs Inherits=_0A_ANXIN.daohang...
[html]
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="daohang.aspx.cs" Inherits="_0A_ANXIN.daohang" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="js/Jquery1.7.js"></script>
<script type="text/javascript">
$(function () {
//*******************一级菜单点击******************
var yijicaidan;//上一次点击的元素
$('.p_ul_li').click(function () {
$(this).css({ 'background-color': '#555' });
$(this).unbind('mouseover').unbind('mouseout');//给点击的元素解绑，不再随着鼠标的变化而变化
$(this).parent().children('p:last').css('display', $(this).parent().children('p:last').css('display') == 'none' ? 'initial' : 'none');
if (yijicaidan != null && yijicaidan.text() != $(this).text()) {//判断是不是同一个元素
yijicaidan.css({ 'background-color': '#eee' });//初始化上一次点击的p的背景颜色
yijicaidan.parent().children('p:last').css('display', 'none');//隐藏上一次点击的元素的二级菜单
yijicaidan.bind('mouseover', function () {
$(this).css({ 'background-color': '#aaa' });
})//给上一次点击的元素帮顶mouseover事件
yijicaidan.bind('mouseout', function () {
$(this).css({ 'background-color': '#eee' });
})//给上一次点击的元素帮顶mouseout事件
yijicaidan = null;
}
yijicaidan = $(this);
})
//*******************一级效果***********************
$('.p_ul_li').bind('mouseover', function () {
$(this).css({'background-color':'#aaa'});
})
$('.p_ul_li').bind('mouseout', function () {
$(this).css({ 'background-color': '#eee' });
})
var erjicaidan;////上一次点击的元素
//********************二级菜单点击*********************
$('.p_ul_li_p ul li').click(function () {
if (erjicaidan!=null) {
erjicaidan.css({ 'background-color': '#def' });//初始化所有的二级菜单背景
}
window.open($(this).children('input').val(), "content");
$(this).css({ 'background-color': '#789' }).unbind('mouseover').unbind('mouseout');
if (erjicaidan != null && erjicaidan.text() != $(this).text()) {//判断是不是同一个元素
erjicaidan.css({ 'background-color': '#def' });//初始化上一次点击的p的背景颜色
erjicaidan.bind('mouseover', function () {
$(this).css({ 'background-color': '#abc' });
})//给上一次点击的元素帮顶mouseover事件
erjicaidan.bind('mouseout', function () {
$(this).css({ 'background-color': '#def' });
})//给上一次点击的元素帮顶mouseout事件
erjicaidan = null;
}
erjicaidan = $(this);
})
//*******************二级效果***********************
$('.p_ul_li_p ul li').bind('mouseover', function () {
$(this).css({ 'background-color': '#abc' });
})
$('.p_ul_li_p ul li').bind('mouseout', function () {
$(this).css({ 'background-color': '#def' });
})
})
</script>
<style type="text/css">
/***********第一级菜单***********/
#p_ul {
list-style-type: none;
}
.p_ul_li {
cursor: pointer;
background-color: #eee;
padding: 5px 0 5px 5px;
margin-left: -40px;
font-size:15px;
}
/***********第二级菜单***********/
.p_ul_li_p ul {
list-style-type: none;
}
.p_ul_li_p ul li {
cursor: pointer;
margin-left:-80px;
padding:5px 0 5px 15px;
background-color:#def;
font-size:12px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<p>
<ul id="p_ul" runat="server">
<li>
<p class="p_ul_li">
我的工作
</p>
<p class="p_ul_li_p" style="display:none;">
<ul>
<li>
我的消息<input type="hidden" value="http://www.baidu.com">
</li>
<li>
我的邮件<input type="hidden" value="http://www.baidu.com">
</li>
<li>
我的短信<input type="hidden" value="http://www.baidu.com">
</li>
</ul>
</p>
</li>
<li>
<p class="p_ul_li">
计划/考勤
</p>
<p class="p_ul_li_p" style="display:none;">
<ul>
<li>
aaa<input type="hidden" value="http://www.baidu.com">
</li>
</ul>
</p>
</li>
<li>
<p class="p_ul_li">
公文处理
</p>
<p class="p_ul_li_p" style="display:none;">
<ul>
<li>
aaa<input type="hidden" value="http://www.baidu.com">
</li>
</ul>
</p>
</li>
<li>
<p class="p_ul_li">
资源/会议
</p>
<p class="p_ul_li_p" style="display:none;">
<ul>
<li>
aaa<input type="hidden" value="http://www.baidu.com">
</li>
</ul>
</p>
</li>
<li>
<p class="p_ul_li">
车辆/司机
</p>
<p class="p_ul_li_p" style="display:none;">
<ul>
<li>
aaa<input type="hidden" value="http://www.baidu.com">
</li>
</ul>
</p>
</li>
</ul>
</p>
</form>
</body>
</html>
这里前台的内容只是例子，实际要显示的内容是从后台读取的数据库。下面有后台和数据库的截图
后台：
protected void Page_Load(object sender, EventArgs e)
{
GetReader();
}
void GetReader()
{
p_ul.InnerHtml = "";
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["str"].ConnectionString);
SqlCommand cmd = new SqlCommand();
cmd.Connection = con;
cmd.CommandText = "Pro_select_guilei";
cmd.CommandType = System.Data.CommandType.StoredProcedure;
SqlDataAdapter adapter = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
adapter.Fill(dt);
StringBuilder strs = new StringBuilder();
foreach (DataRow item in dt.Rows)
{
strs.Append("<li><p class=\"p_ul_li\">"+item["name"]+"</p><p class=\"p_ul_li_p\" style=\"display:none;\"><ul>");
cmd.CommandText = "Pro_select_caidan";
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.Clear();
cmd.Parameters.Add(new SqlParameter("@fatherid", item["contentid"]));
adapter.SelectCommand = cmd;
DataTable dtd = new DataTable();
adapter.Fill(dtd);
foreach (DataRow item1 in dtd.Rows)
{
strs.Append("<li>"+item1["name"]+"<input type='hidden' value='"+item1["url"]+"' /></li>");
}
strs.Append("</ul></p></li>");
}
adapter.Dispose();
cmd.Dispose();
con.Dispose();
p_ul.InnerHtml = strs.ToString();
}
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="daohang.aspx.cs" Inherits="_0A_ANXIN.daohang" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="js/Jquery1.7.js"></script>
<script type="text/javascript">
$(function () {
//*******************一级菜单点击******************
var yijicaidan;//上一次点击的元素
$('.p_ul_li').click(function () {
$(this).css({ 'background-color': '#555' });
$(this).unbind('mouseover').unbind('mouseout');//给点击的元素解绑，不再随着鼠标的变化而变化
$(this).parent().children('p:last').css('display', $(this).parent().children('p:last').css('display') == 'none' ? 'initial' : 'none');
if (yijicaidan != null && yijicaidan.text() != $(this).text()) {//判断是不是同一个元素
yijicaidan.css({ 'background-color': '#eee' });//初始化上一次点击的p的背景颜色
yijicaidan.parent().children('p:last').css('display', 'none');//隐藏上一次点击的元素的二级菜单
yijicaidan.bind('mouseover', function () {
$(this).css({ 'background-color': '#aaa' });
})//给上一次点击的元素帮顶mouseover事件
yijicaidan.bind('mouseout', function () {
$(this).css({ 'background-color': '#eee' });
})//给上一次点击的元素帮顶mouseout事件
yijicaidan = null;
}
yijicaidan = $(this);
})
//*******************一级效果***********************
$('.p_ul_li').bind('mouseover', function () {
$(this).css({'background-color':'#aaa'});
})
$('.p_ul_li').bind('mouseout', function () {
$(this).css({ 'background-color': '#eee' });
})
var erjicaidan;////上一次点击的元素
//********************二级菜单点击*********************
$('.p_ul_li_p ul li').click(function () {
if (erjicaidan!=null) {
erjicaidan.css({ 'background-color': '#def' });//初始化所有的二级菜单背景
}
window.open($(this).children('input').val(), "content");
$(this).css({ 'background-color': '#789' }).unbind('mouseover').unbind('mouseout');
if (erjicaidan != null && erjicaidan.text() != $(this).text()) {//判断是不是同一个元素
erjicaidan.css({ 'background-color': '#def' });//初始化上一次点击的p的背景颜色
erjicaidan.bind('mouseover', function () {
$(this).css({ 'background-color': '#abc' });
})//给上一次点击的元素帮顶mouseover事件
erjicaidan.bind('mouseout', function () {
$(this).css({ 'background-color': '#def' });
})//给上一次点击的元素帮顶mouseout事件
erjicaidan = null;
}
erjicaidan = $(this);
})
//*******************二级效果***********************
$('.p_ul_li_p ul li').bind('mouseover', function () {
$(this).css({ 'background-color': '#abc' });
})
$('.p_ul_li_p ul li').bind('mouseout', function () {
$(this).css({ 'background-color': '#def' });
})
})
</script>
<style type="text/css">
/***********第一级菜单***********/
#p_ul {
list-style-type: none;
}
.p_ul_li {
cursor: pointer;
background-color: #eee;
padding: 5px 0 5px 5px;
margin-left: -40px;
font-size:15px;
}
/***********第二级菜单***********/
.p_ul_li_p ul {
list-style-type: none;
}
.p_ul_li_p ul li {
cursor: pointer;
margin-left:-80px;
padding:5px 0 5px 15px;
background-color:#def;
font-size:12px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<p>
<ul id="p_ul" runat="server">
<li>
<p class="p_ul_li">
我的工作
</p>
<p class="p_ul_li_p" style="display:none;">
<ul>
<li>
我的消息<input type="hidden" value="http://www.baidu.com">
</li>
<li>
我的邮件<input type="hidden" value="http://www.baidu.com">
</li>
<li>
我的短信<input type="hidden" value="http://www.baidu.com">
</li>
</ul>
</p>
</li>
<li>
<p class="p_ul_li">
计划/考勤
</p>
<p class="p_ul_li_p" style="display:none;">
<ul>
<li>
aaa<input type="hidden" value="http://www.baidu.com">
</li>
</ul>
</p>
</li>
<li>
<p class="p_ul_li">
公文处理
</p>
<p class="p_ul_li_p" style="display:none;">
<ul>
<li>
aaa<input type="hidden" value="http://www.baidu.com">
</li>
</ul>
</p>
</li>
<li>
<p class="p_ul_li">
资源/会议
</p>
<p class="p_ul_li_p" style="display:none;">
<ul>
<li>
aaa<input type="hidden" value="http://www.baidu.com">
</li>
</ul>
</p>
</li>
<li>
<p class="p_ul_li">
车辆/司机
</p>
<p class="p_ul_li_p" style="display:none;">
<ul>
<li>
aaa<input type="hidden" value="http://www.baidu.com">
</li>
</ul>
</p>
</li>
</ul>
</p>
</form>
</body>
</html>
这里前台的内容只是例子，实际要显示的内容是从后台读取的数据库。下面有后台和数据库的截图
后台：
protected void Page_Load(object sender, EventArgs e)
{
GetReader();
}
void GetReader()
{
p_ul.InnerHtml = "";
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["str"].ConnectionString);
SqlCommand cmd = new SqlCommand();
cmd.Connection = con;
cmd.CommandText = "Pro_select_guilei";
cmd.CommandType = System.Data.CommandType.StoredProcedure;
SqlDataAdapter adapter = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
adapter.Fill(dt);
StringBuilder strs = new StringBuilder();
foreach (DataRow item in dt.Rows)
{
strs.Append("<li><p class=\"p_ul_li\">"+item["name"]+"</p><p class=\"p_ul_li_p\" style=\"display:none;\"><ul>");
cmd.CommandText = "Pro_select_caidan";
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.Clear();
cmd.Parameters.Add(new SqlParameter("@fatherid", item["contentid"]));
adapter.SelectCommand = cmd;
DataTable dtd = new DataTable();
adapter.Fill(dtd);
foreach (DataRow item1 in dtd.Rows)
{
strs.Append("<li>"+item1["name"]+"<input type='hidden' value='"+item1["url"]+"' /></li>");
}
strs.Append("</ul></p></li>");
}
adapter.Dispose();
cmd.Dispose();
con.Dispose();
p_ul.InnerHtml = strs.ToString();
}
