（原创）ASP.NET + XML + DIV 构建动态导航菜单

用ASP.NET + XML+DIV 构建一个基于XML文件的动态导航菜单。其中菜单的背景是图片。

效果如下图，类似outlook菜单，点击某一个菜单，其他菜单隐藏。
（原创）ASP.NET + XML + DIV 构建动态导航菜单

一、首先找到三张菜单背景图片。

（分别是菜单顶边、菜单中间背景和菜单底边）

（原创）ASP.NET + XML + DIV 构建动态导航菜单
（原创）ASP.NET + XML + DIV 构建动态导航菜单
（原创）ASP.NET + XML + DIV 构建动态导航菜单

二、设计XML文件

（原创）ASP.NET + XML + DIV 构建动态导航菜单<?xml version="1.0" encoding="utf-8" ?>
（原创）ASP.NET + XML + DIV 构建动态导航菜单<NavMenu>
（原创）ASP.NET + XML + DIV 构建动态导航菜单
（原创）ASP.NET + XML + DIV 构建动态导航菜单<Menus Text="个人助理" ID="1">
（原创）ASP.NET + XML + DIV 构建动态导航菜单  <MenuItem Text="我的首页" ImageUrl="../../Images/Menu/MyHomePage16.gif" NavigateUrl="../../Modules/Office/MyHomePage.aspx" />
（原创）ASP.NET + XML + DIV 构建动态导航菜单  <MenuItem Text="备 忘 录" ImageUrl="../../Images/Menu/MyMemo16.gif" NavigateUrl="../../Modules/Office/MyMemoList.aspx?id=0&amp;Day=0" />
（原创）ASP.NET + XML + DIV 构建动态导航菜单  <MenuItem Text="我的计划" ImageUrl="../../Images/Menu/MyTask16.gif" NavigateUrl="../../Modules/Office/MyToDo.aspx" />
（原创）ASP.NET + XML + DIV 构建动态导航菜单  <MenuItem Text="工作日志" ImageUrl="../../Images/Menu/MyLog16.gif" NavigateUrl="../../Modules/Office/MyBlogList.aspx" />
（原创）ASP.NET + XML + DIV 构建动态导航菜单</Menus>
（原创）ASP.NET + XML + DIV 构建动态导航菜单
（原创）ASP.NET + XML + DIV 构建动态导航菜单<Menus Text="业务管理" ID="2">
（原创）ASP.NET + XML + DIV 构建动态导航菜单  <MenuItem Text="案件登记" ImageUrl="../../Images/Menu/LawCaseAdd16.gif" NavigateUrl="../../Modules/CaseManagement/AddLawCase.aspx" />
（原创）ASP.NET + XML + DIV 构建动态导航菜单  <MenuItem Text="案件管理" ImageUrl="../../Images/Menu/Lawcaselist16.gif" NavigateUrl="../../Modules/CaseManagement/LawCaseList.aspx?Lawyer=No&amp;Type=No&amp;Phase=No" />
（原创）ASP.NET + XML + DIV 构建动态导航菜单  <MenuItem Text="案件查询" ImageUrl="../../Images/Menu/find.gif" NavigateUrl="../../Modules/CaseManagement/LawCaseQuery.aspx?Page=Lawyer" />
（原创）ASP.NET + XML + DIV 构建动态导航菜单  <MenuItem Text="案件统计" ImageUrl="../../Images/Menu/LawcaseReport16.gif" NavigateUrl="../../Modules/CaseManagement/LawCaseStat.aspx?Condition=Type" />
（原创）ASP.NET + XML + DIV 构建动态导航菜单  <MenuItem Text="冲突查询" ImageUrl="../../Images/Menu/mywatches16.gif" NavigateUrl="../../Modules/CaseManagement/ConflictQuery.aspx" />
（原创）ASP.NET + XML + DIV 构建动态导航菜单</Menus>
（原创）ASP.NET + XML + DIV 构建动态导航菜单
（原创）ASP.NET + XML + DIV 构建动态导航菜单<Menus Text="财务管理" ID="3">
（原创）ASP.NET + XML + DIV 构建动态导航菜单  <MenuItem Text="收支明细" ImageUrl="../../Images/Menu/details16.gif" NavigateUrl="../../Modules/Finance/IncomeList.aspx?IncomeType=All" />
（原创）ASP.NET + XML + DIV 构建动态导航菜单  <MenuItem Text="收支查询" ImageUrl="../../Images/Menu/find.gif" NavigateUrl="../../Modules/Finance/QueryIncome.aspx" />
（原创）ASP.NET + XML + DIV 构建动态导航菜单  <MenuItem Text="收支统计" ImageUrl="../../Images/Menu/LawcaseReport16.gif" NavigateUrl="../../Modules/Finance/IncomeStat.aspx?Condition=LegalFee" />
（原创）ASP.NET + XML + DIV 构建动态导航菜单</Menus>
（原创）ASP.NET + XML + DIV 构建动态导航菜单
（原创）ASP.NET + XML + DIV 构建动态导航菜单<Menus Text="客户管理" ID="4">
（原创）ASP.NET + XML + DIV 构建动态导航菜单  <MenuItem Text="客户登记" ImageUrl="../../Images/Menu/CustomerAdd16.gif" NavigateUrl="../../Modules/CustomerManagement/ShowCustomer.aspx?ReturnURL=List&amp;Type=New&amp;ID=0" />
（原创）ASP.NET + XML + DIV 构建动态导航菜单  <MenuItem Text="客户列表" ImageUrl="../../Images/Menu/CustomerList16.gif" NavigateUrl="../../Modules/CustomerManagement/CustomerList.aspx" />
（原创）ASP.NET + XML + DIV 构建动态导航菜单  <MenuItem Text="客户查询" ImageUrl="../../Images/Menu/mywatches16.gif" NavigateUrl="../../Modules/CustomerManagement/QueryCustomer.aspx" />
（原创）ASP.NET + XML + DIV 构建动态导航菜单</Menus>
（原创）ASP.NET + XML + DIV 构建动态导航菜单
（原创）ASP.NET + XML + DIV 构建动态导航菜单<Menus Text="法律法规" ID="5">
（原创）ASP.NET + XML + DIV 构建动态导航菜单  <MenuItem Text="法规列表" ImageUrl="../../Images/Menu/Details16.gif" NavigateUrl="../../Modules/LawDoc/LawDocList.aspx" />
（原创）ASP.NET + XML + DIV 构建动态导航菜单  <MenuItem Text="下载最新" ImageUrl="../../Images/Menu/find.gif" NavigateUrl="../../Modules/LawDoc/LawDocUpdate.aspx" />
（原创）ASP.NET + XML + DIV 构建动态导航菜单</Menus>
（原创）ASP.NET + XML + DIV 构建动态导航菜单
（原创）ASP.NET + XML + DIV 构建动态导航菜单<Menus Text="系统管理" ID="6">
（原创）ASP.NET + XML + DIV 构建动态导航菜单  <MenuItem Text="人员列表" ImageUrl="../../Images/Menu/UserList16.gif" NavigateUrl="../../Modules/SysManagement/LawyerList.aspx" />
（原创）ASP.NET + XML + DIV 构建动态导航菜单  <MenuItem Text="合同模板" ImageUrl="../../Images/Menu/Template16.gif" NavigateUrl="../../Modules/SysManagement/ContractTemplateList.aspx" />
（原创）ASP.NET + XML + DIV 构建动态导航菜单  <MenuItem Text="参数设置" ImageUrl="../../Images/Menu/SysConfig16.gif" NavigateUrl="../../Modules/SysManagement/SysConfig.aspx?XMLFile=CaseType" />
（原创）ASP.NET + XML + DIV 构建动态导航菜单</Menus>
（原创）ASP.NET + XML + DIV 构建动态导航菜单
（原创）ASP.NET + XML + DIV 构建动态导航菜单
（原创）ASP.NET + XML + DIV 构建动态导航菜单</NavMenu>
（原创）ASP.NET + XML + DIV 构建动态导航菜单
（原创）ASP.NET + XML + DIV 构建动态导航菜单


三、设计嵌套DataList.

ASPX文件如下：

（原创）ASP.NET + XML + DIV 构建动态导航菜单<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
（原创）ASP.NET + XML + DIV 构建动态导航菜单<html>
（原创）ASP.NET + XML + DIV 构建动态导航菜单    <head>
（原创）ASP.NET + XML + DIV 构建动态导航菜单        <title>NavMenuBar</title>
（原创）ASP.NET + XML + DIV 构建动态导航菜单        <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
（原创）ASP.NET + XML + DIV 构建动态导航菜单        <meta name="CODE_LANGUAGE" Content="C#">
（原创）ASP.NET + XML + DIV 构建动态导航菜单        <meta name="vs_defaultClientScript" content="JavaScript">
（原创）ASP.NET + XML + DIV 构建动态导航菜单        <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
（原创）ASP.NET + XML + DIV 构建动态导航菜单        <Link Rel="stylesheet" href="../../css/admin_css.css">
（原创）ASP.NET + XML + DIV 构建动态导航菜单    </head>
（原创）ASP.NET + XML + DIV 构建动态导航菜单    <body MS_POSITIONING="GridLayout" topmargin="0" leftmargin="0" bgcolor="#ffffff" rightmargin="0"
（原创）ASP.NET + XML + DIV 构建动态导航菜单        scroll="no" onload="ShowFirst()">
（原创）ASP.NET + XML + DIV 构建动态导航菜单        <form id="Form1" method="post" runat="server">
（原创）ASP.NET + XML + DIV 构建动态导航菜单            <base target='main'>
（原创）ASP.NET + XML + DIV 构建动态导航菜单            <asp:datalist id="NavMenu_List" Width="100%" RepeatDirection="Vertical" DataKeyField="ID" Runat="server"
（原创）ASP.NET + XML + DIV 构建动态导航菜单                OnItemDataBound="MenuItem_ItemDataBound">
（原创）ASP.NET + XML + DIV 构建动态导航菜单                <ItemTemplate>



四、鼠标点击要隐藏其他菜单

javascript 代码如下：

（原创）ASP.NET + XML + DIV 构建动态导航菜单<script language='javascript'>
（原创）ASP.NET + XML + DIV 构建动态导航菜单function shift(id)
>


五、后面的C#代码如下：

 

（原创）ASP.NET + XML + DIV 构建动态导航菜单public class NavMenuBar : System.Web.UI.Page
    }

 

 

相关文章：

  • 2021-10-06
  • 2021-07-18
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-06-26
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-09-04
  • 2022-12-23
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode