Java--css+js Tree Menu (full version)

JSP page:

<%@ page language= "java" import= "java.util.*" pageencoding= "UTF-8"%><% String Path = Request.getcontextpath () ; String basepath = request.getscheme () + "://" + request.getservername () + ":" + request.getserverport () + path + "/";%  >
CSS file:/css/menu.css
{padding-right:0px; padding-left:0px; padding-bottom:0px; margin:0px; padding-top:0px}html {overflow-y: scroll}a:link {COLOR: #000000; text-decoration:none}a:visited {COLOR: #000000; text-decoration:none}a:active {COLOR: #3333ff; Text-decoration:none}a:hover {COLOR: #ff0000; Text-decoration:none}.panel {BACKGROUND: #d6e4ef; COLOR: #000000} #expand_link {font-size:9pt; left:140px; Position:absolute; top:11px; Text-decoration:underline}ul {padding-right:0px; padding-left:0px; padding-bottom:0px; margin:0px; padding-top:0px; List-style-type:none; URL (".. /images/toright.png ");} IMG {border-right:0px; border-top:0px; border-left:0px; width:16px; border-bottom:0px; height:16px;} #body {border-right: #ffffff 0px solid; padding-right:0px; padding-left:0px; BACKGROUND: #ffffff; padding-bottom:0px; Border-left: #ffffff 0px solid; width:100%; padding-top:25px} #menu {border-right: #246191 0px solid; Border-top: #246191 0px solid; BACKGROUND: #ffffff; Border-lEFT: #246191 0px solid; Border-bottom:medium none}. U1 {BACKGROUND: #ffffff; Border-bottom: #ffffff 1px solid}. L1 a:link {display:block; font-size:9pt; Background:url (.. /images/img/menu1_bg.png); COLOR: #476074; height:24px; Text-decoration:none}. L1 a:visited {display:block; font-size:9pt; Background:url (.. /images/img/menu1_bg.png); COLOR: #476074; height:24px; Text-decoration:none}. L1 a:link SPAN {padding-right:0px; padding-left:16px; Background:url (.. /images/ico/ar1.png) No-repeat left 50%; padding-bottom:0px; Vertical-align:middle; width:100%; Cursor:hand; padding-top:7px; HEIGHT:24PX}. L1 a:visited SPAN {padding-right:0px; padding-left:16px; Background:url (.. /images/ico/ar1.png) No-repeat left 50%; padding-bottom:0px; Vertical-align:middle; width:100%; Cursor:hand; padding-top:7px; HEIGHT:24PX}. L1 a:hover {font-weight:bold; Background:url (.. /images/img/menu1_bg.png) 0px-24px; COLOR: #000000}. L1 A.active:link {background:url (.. /images/img/menu1_bg.png) 0px-24px}. L1 a.active:hover {background:url (.. /images/img/menu1_bg.png) 0px-24px}. L1 a.active:active {background:url (.. /images/img/menu1_bg.png) 0px-24px}. L1 a.active:visited {background:url (.. /images/img/menu1_bg.png) 0px-24px}. L1 a.active:link SPAN {font-weight:bold; Background:url (.. /images/ico/ad1.png) No-repeat left 50%; COLOR: #000000}. L1 a.active:hover SPAN {font-weight:bold; Background:url (.. /images/ico/ad1.png) No-repeat left 50%; COLOR: #000000}. L1 a.active:active SPAN {font-weight:bold; Background:url (.. /images/ico/ad1.png) No-repeat left 50%; COLOR: #000000}. L1 a.active:visited SPAN {font-weight:bold; Background:url (.. /images/ico/ad1.png) No-repeat left 50%; COLOR: #000000}. L21 a:link {display:block; padding-left:13px; font-size:9pt; Background:none Transparent scroll repeat 0% 0%; COLOR: #444659; height:24px; Text-decoration:none}. L21 a:visited {display:block; padding-left:13px; font-size:9pt; Background:none Transparent Scroll RepEat 0% 0%; COLOR: #444659; height:24px; Text-decoration:none}. L22 a:link {display:block; padding-left:13px; font-size:9pt; Background:none Transparent scroll repeat 0% 0%; COLOR: #444659; height:24px; Text-decoration:none}. L22 a:visited {display:block; padding-left:13px; font-size:9pt; Background:none Transparent scroll repeat 0% 0%; COLOR: #444659; height:24px; Text-decoration:none}. L3 a:link {display:block; padding-left:13px; font-size:9pt; Background:none Transparent scroll repeat 0% 0%; COLOR: #444659; height:24px; Text-decoration:none}. L3 a:visited {display:block; padding-left:13px; font-size:9pt; Background:none Transparent scroll repeat 0% 0%; COLOR: #444659; height:24px; Text-decoration:none}. L21 a:link SPAN {padding-right:0px; padding-left:16px; Background:url (.. /images/ico/ar.png) No-repeat left center; padding-bottom:0px; Vertical-align:middle; width:100%; Cursor:hand; PADDING-TOP:7PX}. L21 a:visited SPAN {padding-right:0px; Padding-left:16px; Background:url (.. /images/ico/ar.png) No-repeat left center; padding-bottom:0px; Vertical-align:middle; width:100%; Cursor:hand; PADDING-TOP:7PX}. L22 a:link SPAN {padding-right:0px; padding-left:16px; Background:url (.. /images/ico/ar.png) No-repeat left center; padding-bottom:0px; Vertical-align:middle; width:100%; Cursor:hand; PADDING-TOP:7PX}. L22 a:visited SPAN {padding-right:0px; padding-left:16px; Background:url (.. /images/ico/ar.png) No-repeat left center; padding-bottom:0px; Vertical-align:middle; width:100%; Cursor:hand; PADDING-TOP:7PX}. L3 a:link SPAN {padding-right:0px; padding-left:16px; Background:url (.. /images/ico/ar.png) No-repeat left center; padding-bottom:0px; Vertical-align:middle; width:100%; Cursor:hand; PADDING-TOP:7PX}. L3 a:visited SPAN {padding-right:0px; padding-left:16px; Background:url (.. /images/ico/ar.png) No-repeat left center; padding-bottom:0px; Vertical-align:middle; width:100%; Cursor:hand; PADDING-TOP:7PX}. L22 a:link SPAN {background:none transparent scroll repeat 0% 0%}. L22 a:visited SPAN {background:none transparent scroll repeat 0% 0%}. L3 a:link SPAN {background:none transparent scroll repeat 0% 0%}. L3 a:visited SPAN {background:none transparent scroll repeat 0% 0%}. L21 a:hover {font-weight:bold; Background:url (.. /images/btn/menu2_bg.png) No-repeat left top}. L22 a:hover {font-weight:bold; Background:url (.. /images/btn/menu2_bg.png) No-repeat left top}. L3 a:hover {font-weight:bold; Background:url (.. /images/btn/menu2_bg.png) No-repeat left top}. L3 a:link SPAN {padding-right:0px; padding-left:25px; padding-bottom:3px; PADDING-TOP:12PX}. L3 a:visited SPAN {padding-right:0px; padding-left:25px; padding-bottom:3px; PADDING-TOP:12PX}. L21 A.active:link {background:none transparent scroll repeat 0% 0%}. L21 A.active:hover {background:none transparent scroll repeat 0% 0%}. L21 a.active:active {background:none transparent scroll repeat 0% 0%}. L21 a.active:visited {Background:none Transparent scroll repeat 0% 0%}. L21 a.active:link SPAN {font-weight:bold; Background:url (.. /images/ico/ad.png) No-repeat left center; COLOR: #000000}. L21 a.active:hover SPAN {font-weight:bold; Background:url (.. /images/ico/ad.png) No-repeat left center; COLOR: #000000}. L21 a.active:active SPAN {font-weight:bold; Background:url (.. /images/ico/ad.png) No-repeat left center; COLOR: #000000}. L21 a.active:visited SPAN {font-weight:bold; Background:url (.. /images/ico/ad.png) No-repeat left center; COLOR: #000000}. L22 A.active:link {background:url (.. /images/btn/menu2_bg.png) No-repeat 0px-24px}. L22 a.active:hover {background:url (.. /images/btn/menu2_bg.png) No-repeat 0px-24px}. L22 a.active:active {background:url (.. /images/btn/menu2_bg.png) No-repeat 0px-24px}. L22 a.active:visited {background:url (.. /images/btn/menu2_bg.png) No-repeat 0px-24px}. L3 A.active:link {background:url (.. /images/btn/menu2_bg.png) No-repeat 0px-24px}. L3 A.active:hover {BACKGROUND: URL (... /images/btn/menu2_bg.png) No-repeat 0px-24px}. L3 a.active:active {background:url (.. /images/btn/menu2_bg.png) No-repeat 0px-24px}. L3 a.active:visited {background:url (.. /images/btn/menu2_bg.png) No-repeat 0px-24px}. L22 a.active:link SPAN {font-weight:bold; Background:none Transparent scroll repeat 0% 0%; COLOR: #ffffff}. L22 a.active:hover SPAN {font-weight:bold; Background:none Transparent scroll repeat 0% 0%; COLOR: #ffffff}. L22 a.active:active SPAN {font-weight:bold; Background:none Transparent scroll repeat 0% 0%; COLOR: #ffffff}. L22 a.active:visited SPAN {font-weight:bold; Background:none Transparent scroll repeat 0% 0%; COLOR: #ffffff}. L3 a.active:link SPAN {font-weight:bold; Background:none Transparent scroll repeat 0% 0%; COLOR: #ffffff}. L3 a.active:hover SPAN {font-weight:bold; Background:none Transparent scroll repeat 0% 0%; COLOR: #ffffff}. L3 a.active:active SPAN {font-weight:bold; Background:none Transparent scroll repeat 0% 0%; COLOR: #ffffFF}. L3 a.active:visited SPAN {font-weight:bold; Background:none Transparent scroll repeat 0% 0%; COLOR: #ffffff}. Ls a:link {padding-right:4px; font-size:9pt; Background:none Transparent scroll repeat 0% 0%; padding-top:4px; height:20px; Text-align:right; Text-decoration:underline}. Ls a:visited {padding-right:4px; font-size:9pt; Background:none Transparent scroll repeat 0% 0%; padding-top:4px; height:20px; Text-align:right; Text-decoration:underline}. Ls a:hover {padding-right:4px; font-size:9pt; Background:none Transparent scroll repeat 0% 0%; padding-top:4px; height:20px; Text-align:right; Text-decoration:underline}. Ls a:active {padding-right:4px; font-size:9pt; Background:none Transparent scroll repeat 0% 0%; padding-top:4px; height:20px; Text-align:right; Text-decoration:underline} #bottom {Background:url (. /images/img/menu_bottom_bg.gif) No-repeat; height:80px}

JS file:/js/menu.js
var cur_id = ""; var flag = 0, Sflag = 0;//--------Menu Click event-------function C (srcelement) {var targetid, srcelement, Target Element var strbuf; --------assume that you clicked the expand or shrink button---------Targetid = srcelement.id + "D"; Targetelement = document.getElementById (Targetid);  if (Targetelement.style.display = = "None") {//Expand Srcelement.classname = "active";  Targetelement.style.display = ";    Menu_flag = 0;       var imgelt = document.getElementById (srcelement.id+ "Image"); IMGELT.SRC = ".   /images/jian.png ";  } else {//Contract srcelement.classname = "";    Targetelement.style.display = "none";//contraction menu_flag = 1;       var imgelt = document.getElementById (srcelement.id+ "Image"); IMGELT.SRC = ". /images/jia.png "; }}//--------Menu All expand/Shrink-------var menu_flag = 1;function Menu_expand () {if (Menu_flag = = 1) expand_text.innerhtml = "Shrink" ; else expand_text.innerhtml = "unfold";  Menu_flag = 1-menu_flag;//var links = document.getelementsbytagname ("A");//for (i = 0; i < links.length; i++) {// Srcelement = links[i];//if (srcelement.parentNode.className.toUpperCase () = = "L1"//| | srcelement.parentNode.className.toUp Percase () = = "L21") {//targetelement = document.getElementById (srcelement.id + "D");/if (Menu_flag = = 0) {//Tar Getelement.style.display = ";//Srcelement.classname =" active ";/} else {//Targetelement.style.display =" None " ";//Srcelement.classname =" ";//}//}//}}function set_current (id) {Cur_link = document.getElementById (" F "+ cur _id) if (cur_link) cur_link.classname = ""; Cur_link = document.getElementById ("F" + ID); if (cur_link) Cur_link.classname = "active"; cur_id = ID;}  --------Open the URL-------function A (URL, id) {set_current (ID);//if (URL.SUBSTR (0, 7)! = "http:/" && url.substr (0, 6)! = "ftp://")//url = "/general/" + url; Parent.openurl (URL, 0);} function b (URL, id) {set_current (ID);//url = "/app/" + url; parent.openurl (URL, 0);} Add by YZQ 2008-03-05 beginfunction Bindfunc () {var args = []; for (var i = 0, cnt = arguments.length; I < CNT; i++) {Args[i] = arguments[i];} var __method = Args.shift (); var object = Args.shift ();  Return (function () {var argsinner = [];  for (var i = 0, cnt = arguments.length; i < cnt; i++) {argsinner[i] = arguments[i]; } return __method.apply (object, Args.concat (Argsinner)); });}  var Timerid = Null;var Firsttime = True;//add by YZQ 2008-03-05 endfunction D (URL, id) {//add by YZQ 2008-03-05 begin Var Winmgr = Parent.parent.table_index.main.winManager;   if (!winmgr) {if (firsttime) {Parent.openurl ("/fis/common/frame.jsp", 0);  Firsttime = false;  } Timerid = SetTimeout (Bindfunc (d, window, URL, id), 100); Return } Firsttime = true; if (Timerid) {cleartimeout (Timerid),} if (winmgr) {winmgr.openactionport ("/fis/" + URL, document.getElementById ("F  "+ ID"). innerText); Return }//add by YZQ 2008-03-05 end set_current (ID); url = "/fis/" + url; Parent.openurl (URL, 0);} --------Open the Windows program-------function winexe (NAME, PROG) {URL = "/genEral/winexe? 
Prog= "+ PROG +" &name= "+ NAME; window. Open (URL, "winexe", "Height=100,width=350,status=0,toolbar=no,menubar=no,location=no,scrollbars=yes , Top=0,left=0,resizable=no ");}

Photo resource:/images/jia.png,jian.png


 
Java--css+js Tree Menu (full version)