多级树型菜单

原创 2004年08月06日 23:15:00

做网页时,为了节约空间和美观,时常会用到多级的菜单,这里是一个JavaScript和Html混编的一个多级树型菜单的全部代码

<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="error.jsp" %>
<html>
<head>
<title>多级树型菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script language="JavaScript1.2">
var head="photos/display:''"
img1=new Image()
img1.src="photos/fold.gif"
img2=new Image()
img2.src="photos/open.gif"
function change(){
  if(!document.all)
     return
  if (event.srcElement.id=="foldheader") {
     var srcIndex = event.srcElement.sourceIndex
     var nested = document.all[srcIndex+1]
     if (nested.style.display=="none") {
        nested.style.display=''
        event.srcElement.style.liststyleImage="url(photos/open.gif)"
     }
     else {
        nested.style.display="none"
        event.srcElement.style.liststyleImage="url(photos/fold.gif)"
     }
  }
}
document.onclick=change
//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--
   var popup = null;
   function inputorderid() {  
       popup = window.open('jspInputOrderid.jsp', '请输入订单编号','width=200,height=150,resizable=0,scrollbars=no');
   }
   function account() { 
       popup = window.open('jspAccountReceivable.jsp', '请选择客户名称','width=200,height=200,resizable=0,scrollbars=no');
   }
function oppaccount(){
popup = window.open('jspOppAccount.jsp', '请选择机会类型','width=200,height=200,resizable=0,scrollbars=no');
}
function accountcust(){ 
popup = window.open('jspAccountCust.jsp', '请选择客户地域','width=262,height=150,resizable=0,scrollbars=no');
}
function OrderAccount(){
popup = window.open('jspAccountOrder.jsp', '请选择客户及订单有效日期范围','width=200,height=200,resizable=0,scrollbars=no');

}
//-->
</script>
<style type="text/css">

li {
font-family: "宋体", "新宋体";
font-size: 9pt;
line-height: 13pt;
margin-right: 5px;
cursor: hand;
}
#foldheader{
cursor:hand;
list-style-image:url(photos/fold.gif);
font-family: "宋体", "新宋体";
font-size: 10pt;
}
#foldinglist{
list-style-image:url(photos/list.gif);
font-family: "宋体", "新宋体";
font-size: 9pt;
}
BODY {
SCROLLBAR-FACE-COLOR: #6699CC;
SCROLLBAR-HIGHLIGHT-COLOR: #A6C4E1;
SCROLLBAR-SHADOW-COLOR: #A6C4E1;
SCROLLBAR-3DLIGHT-COLOR: #A6C4E1;
SCROLLBAR-ARROW-COLOR:  #A6C4E1;
SCROLLBAR-TRACK-COLOR: #A6C4E1;
SCROLLBAR-DARKSHADOW-COLOR: #A6C4E1;
}

A        { text-decoration:none; }
A:link       { text-decoration:none;  color: #000066;  }
A:visited    { text-decoration:none;  color: #000033;  }
A:hover      {
text-decoration:underline;
color: #FF0000;
}
</style>
</head>
<body bgcolor="#CBDCED" leftmargin="3" topmargin="0">
<table width="100%" height="33" border="0" cellpadding="0" cellspacing="0">
 <tr>
   <td></td>
 </tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" frame="void" align="left">
 <tr>
   <td>
<fieldset style="width:100%" align="left">
     <legend><a href="" target="_blank"><font size="2"> JETCRM B/S2003 </font></a></legend>
     <dl class="pt12normal">
 <li id="foldheader"> 客户管理</li>
 <ul id="foldinglist">
   <li id="foldheader"> 客户管理</li>
   <dl id="foldinglist" style="display:none">
     <li><a href="customer_add.jsp" target="mainFrame"> 新建客户</a></li>
     <li><a href="customer_query.jsp" target="mainFrame"> 客户查询</a></li>
   <li><a href="menu.jsp#" onClick="accountcust()"> 客户统计</a></li>
   </dl>
   <li id="foldheader"> 联系人管理</li>
   <dl id="foldinglist" style="display:none">
     <li><a href="contact_add.jsp" target="mainFrame" class=black> 新建联系人</a></li>
     <li><a href="contact_query.jsp" target="mainFrame" class=black> 联系人查询</a></li>
   </dl>
   <li id="foldheader"> 竞争对手管理</li>
   <dl id="foldinglist" style="display:none">
     <li><a href="adversary_add.jsp" target="mainFrame" class=black> 新建竞争对手</a></li>
     <li><a href="adversary_query.jsp" target="mainFrame" class=black> 竞争对手查询</a></li>
   </dl>
 </ul>
 <li id="foldheader">服务管理</li>
 <ul id="foldinglist" style="display:none">
 <li id="foldheader">联系历史</li>
 <dl id="foldinglist" style="display:none">
 <li><a href="ContactHistory_add.jsp" target="mainFrame" class=black>新建联系记录</a></li>
     <li><a href="ContactHistory_list.jsp" target="mainFrame" class="balck">浏览联系记录</a></li>
   </dl>
   <li> 邮件发送</li>
   <li id="foldheader">服务请求记录</li>
   <dl id="foldinglist" style="display:none">
           <li><a href="jsprequester_add.jsp" target="mainFrame" class=black>新建服务请求</a></li>
           <li><a href="showRequesterlist.jsp" target="mainFrame" class="balck">服务请求浏览</a></li>
   </dl>
   <li id="foldheader">客户投诉</li>
   <dl id="foldinglist" style="display:none">
     <li><a href="jspFeedback_add.jsp" target="mainFrame">新建投诉记录</a></li>
     <li><a href="feedback_list.jsp" target="mainFrame">投诉查询</a></li>
     <li>投诉统计</li>
   </dl>
 </ul>
 <li id="foldheader">销售管理</li>
 <ul id="foldinglist">
   <li id="foldheader"> 机会管理</li>
   <dl id="foldinglist" style="display:none">
     <li><a href="jspOppMan.jsp" target="mainFrame">新建机会</a></li>
     <li><a href="jspOppQuery.jsp" target="mainFrame">机会查询</a></li>
     <li><a href="menu.jsp#" onClick="oppaccount()">机会统计</a></li>
   </dl>
   <li id="foldheader">定单管理</li>
   <dl id="foldinglist" style="display:none">
     <li><a href="jspNewOrder.jsp" target="mainFrame">新建定单</a></li>
     <li><a href="jspOrderQry.jsp" target="mainFrame">定单查询</a></li>
     <li><a href="jspFufilOrder.jsp" target="mainFrame">订单履行</a></li>
     <li><a href="jspFufilOrder.jsp" target="mainFrame">订单履行</a></li>
      <li><a href="menu.jsp#" onClick="OrderAccount">订单额统计</a></li>
     <li><a href="menu.jsp#" onClick=" inputorderid()">履行或结案</a></li>
     <li><a href="menu.jsp#" onClick=" account()">应收款统计</a></li>
   </dl>
   <li id="foldheader">报价管理</li>
   <dl id="foldinglist" style="display:none">
     <li><a href="jspQuote_add.jsp" target="mainFrame">新建报价单</a></li>
     <li><a href="jspQuote_list.jsp" target="mainFrame">浏览报价单</a></li>
   </dl>
 </ul>
 <li id="foldheader">系统管理</li>
 <ul id="foldinglist">
   <li>权限管理</li>
     <li><a href="jspBaseDataInsert.jsp" target="mainFrame">基础数据设置</a></li>
 <li><a href="jspSetEmployee.jsp" target="mainFrame">员工管理</a></li>
 <li><a href="jsppurview_set.jsp" target="mainFrame">权限设置</a></li>
 </ul>
       <li id="foldheader"><a href="#" target="mainFrame">重新登录</a></li>
</dl>
</fieldset>
 </td>
 </tr>
 <tr>
   <td> </td>
 </tr>
</table>
</body>
</html>

简单的 ul li 树形菜单

简单的 ul li 树形菜单在实际开发中,我们经常遇到树形菜单,闲暇之余,特此简单研究了一下,欢迎吐槽!前言 所谓的树形菜单,无非就是 ul li的嵌套使用,如果有两级目录,就需要在li里再嵌套一...
  • u011613356
  • u011613356
  • 2015年11月12日 15:36
  • 2288

easyui 生成 多级 菜单树 01

这篇博客,算是 爬坑总结,如果想直接看成功 的方案,请看 下一篇博客。 本来打算复制数据的,但是看了一下,数据没啥用,还特别多,如果你真的需要看这些数据,可以单独找我,QQ:1286238812 ,备...
  • u012246342
  • u012246342
  • 2017年03月16日 22:10
  • 704

easyUI动态生成多级菜单树

  • Seri_com
  • Seri_com
  • 2017年03月14日 22:09
  • 421

用PHP实现多级树型菜单

//树型目录结构模板程序      //菜单目录库字段说明:      //menu_id 菜单项目 id      //menu 菜单名称      //menu_grade 菜单等级 1 为主菜单...
  • windowspro
  • windowspro
  • 2016年04月19日 09:24
  • 151

angularjs--制作树形菜单

效果图 数据源 /* Controllers */ function ctrDataList($scope) { $scope.ctrDataList_list = [ { "title"...
  • qianqianyixiao1
  • qianqianyixiao1
  • 2016年01月15日 17:40
  • 5198

基于react实现无限分级菜单

在开发CMS(内容管理系统)系统时,一般都会用到一个侧边栏或者顶部的二级或者三级菜单,当点击或者鼠标悬浮时,菜单能够随之展开或收起。 本文纯粹为了练习一下react,因此我会在react环境下实...
  • qq120848369
  • qq120848369
  • 2016年11月17日 18:27
  • 3074

iOS 树形结构菜单(参照以前大神写的博客)

iOS 树形结构菜单
  • wobushizhaoqian
  • wobushizhaoqian
  • 2016年09月24日 13:01
  • 3526

Android多级树形菜单并且支持多选功能

最近遇到了一些非常不爽的事情,心情很不好,突然想到,我可以静下心来,写写博客,来平复一下自己的心情,哈哈。。。 公司有一个需求,实现一个多级的树形菜单,并且支持多选功能,实现这个功能之前,我在网上找...
  • qq_15328623
  • qq_15328623
  • 2016年04月03日 10:17
  • 3284

利用多叉树实现Ext JS中的无限级树形菜单(一种构建多级有序树形结构JSON的方法)

利用多叉树实现Ext JS中的无限级树形菜单(一种构建多级有序树形结构JSON的方法)                                                   转载地址:...
  • u010880345
  • u010880345
  • 2015年12月08日 14:02
  • 1804

ExpandableListView的使用多级列表

多级列表ExpandableListView  扩展列表能够显示一个指示在每项显示项的当前状态(状态通常是一个扩展的组,组的孩子,或倒塌,最后一个孩子)。使用setchildindicator(dra...
  • DickyQie
  • DickyQie
  • 2016年09月14日 15:19
  • 467
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:多级树型菜单
举报原因:
原因补充:

(最多只允许输入30个字)