简单web系统页面构架(二级伸缩式左菜单)

来源：互联网发布：蓝格珠宝软件编辑：程序博客网时间：2024/04/30 17:04

简单上左右下页面架构

<!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><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>办公系统<title><script language="JavaScript"> <!--self.moveTo(0,0)self.resizeTo(screen.availWidth,screen.availHeight)//self.resizeTo(1024,768)//--></script></head><frameset rows="88,*,31" cols="*" frameborder="no" border="0" framespacing="0" id="frame1" onbeforeunload="exit();">    <frame name="banner" id="banner" scrolling="no" noresize="noresize" src="top.html" frameborder="0">    <frameset rows="*" cols="200,*" frameborder="no" border="0" framespacing="0" id="frame2">       <frame name="leftmenu" id="leftmenu" scrolling="auto" noresize="noresize" src="left.jsp" frameborder="0">       <frame name="table_index" id="table_index" scrolling="auto" src="info.jsp" frameborder="0">    </frameset>    <frame name="status_bar" id="status_bar" scrolling="no" noresize="noresize" src="bottom.html" frameborder="0"></frameset><noframes><body></body></noframes></html>

left.jsp 伸缩式二级菜单

<%@ page import="com.guanri.database.*,java.util.*,com.guanri.util.*" contentType="text/html; charset=GBK" %><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!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><title>常用后台JS管理菜单</title><style type="text/css"><!--body{margin:0;font-size:12px;background:#e3f3fe;line-height:150%;}img{border:none;}a{color:#385065;text-decoration:none;}a:hover{text-decoration:underline;}ul,li{ list-style:none;}#menu{width:150px;margin:0px 10px;padding:0px;text-align:left;}#menu .item{margin:5px 0px;padding:0px;}a.title:link,a.title:visited,a.title:hover{display:block;background:url(/images/oa_menubg1.png) no-repeat left  center;text-indent:16px; color:#555;font-weight:bold;padding:2px 0 0 22px;width:158px;line-height:30px;cursor:pointer;text-decoration:none;}a.title{height:30px;padding-top:0px}.item img{height:30px;padding-top:8px;width:16px;height:16px;vertical-align:text-bottom;}#menu .item ul{border:1px solid #f8f8f8;margin:0;width:148px;padding:3px 0px 3px 30px;background:#c4e7f3;list-style:none;display:none;}#menu .item ul li{display:block;}.optiton li{border-bottom:#d1edf6 1px solid;line-height:28px;}body{scrollbar-arrow-color:#f5f5f5; /*三角箭头的颜色*/scrollbar-face-color:#8cc4d8; /*立体滚动条的颜色（包括箭头部分的背景色）*/scrollbar-3dlight-color:#8cc4d8; /*立体滚动条亮边的颜色*/scrollbar-highlight-color:#8cc4d8; /*滚动条的高亮颜色（左阴影？）*/scrollbar-shadow-color:#8cc4d8; /*立体滚动条阴影的颜色*/scrollbar-darkshadow-color:#8cc4d8; /*立体滚动条外阴影的颜色*/scrollbar-track-color:#c4e7f3; /*立体滚动条背景颜色*/scrollbar-base-color:#c4e7f3; /*滚动条的基色*/}--></style><script language="javascript" type="text/javascript"> document.getElementsByClassName = function(cl) {  var retnode = [];  var myclass = new RegExp('\\b'+cl+'\\b');  var elem = this.getElementsByTagName('*');  for (var j = 0; j < elem.length; j++) {   var classes = elem[j].className;   if (myclass.test(classes)) retnode.push(elem[j]);  }  return retnode; }  // --- 隐藏所有 function HideAll() {  var items = document.getElementsByClassName("optiton");  for (var j=0; j<items.length; j++) {   items[j].style.display = "none";  } }  // --- 设置cookie function setCookie(sName,sValue,expireHours) {  var cookieString = sName + "=" + escape(sValue);  //;判断是否设置过期时间  if (expireHours>0) {    var date = new Date();    date.setTime(date.getTime + expireHours * 3600 * 1000);    cookieString = cookieString + "; expire=" + date.toGMTString();  }  document.cookie = cookieString; }  //--- 获取cookie function getCookie(sName) {   var aCookie = document.cookie.split("; ");   for (var j=0; j < aCookie.length; j++){  var aCrumb = aCookie[j].split("=");  if (escape(sName) == aCrumb[0])    return unescape(aCrumb[1]);   }   return null; }  window.onload = function() {  //var show_item = "opt_1";   //默认第一menu展开  var show_item="";  if (getCookie("show_item") != null) {   //cookie中记录的展开数字    show_item= "opt_" + getCookie("show_item");  }  if(show_item!=""){  //如果有默认向项是展开的，展开这个menu  document.getElementById(show_item).style.display = "block";  }  var items = document.getElementsByClassName("title");  for (var j=0; j<items.length; j++) {   items[j].onclick = function() {    var o = document.getElementById("opt_" + this.name);    if (o.style.display != "block") {     HideAll();     o.style.display = "block";     setCookie("show_item",this.name);    }    else {     o.style.display = "none";    }   }  } } </script></head><body>  <ul id="menu">    <%Table tb = new Table();Vector vc = null;Hashtable rows=new Hashtable();String sql = "select id,url,meunName,cssinfo from gr_menunew where  meunType='1' and parentId='0' and status='1' order by orderkey ";  vc = tb.getContent(sql);  for(int j=0;j<vc.size();j++){  rows = (Hashtable)vc.get(j);  int uid= ((Integer)rows.get("id")).intValue();  String uurl=(String)rows.get("url");    String umeunName=(String)rows.get("meunName");  String ucssinfo=(String)rows.get("cssinfo"); %>     <li class="item"><a href="javascript:void(0)" _fcksavedurl="javascript:void(0)" class="title" name="<%=uid %>"><img src="<%=ucssinfo %>" align="absmiddle" /> <%=umeunName %></a> <ul id="opt_<%=uid %>" class="optiton">  <% String downsql = "select id,url,meunName,cssinfo from gr_menunew where  parentId='"+uid+"' and status='1' order by orderkey"; Vector dvc = tb.getContent(downsql);  for(int i=0;i<dvc.size();i++){  rows = (Hashtable)dvc.get(i);  int did= ((Integer)rows.get("id")).intValue();  String durl=(String)rows.get("url");  String dmeunName=(String)rows.get("meunName");  String dcssinfo=(String)rows.get("cssinfo");  %>   <li><a href="<%=durl%>" _fcksavedurl="#" target="table_index"><%=dmeunName%></a></li> <% } %>    </ul>    </li>  <%}%>     </ul></body></html>