【转】js竖状伸缩导航
效果图：
用到的图片：
<style type="text/css">
a{cursor:hand;}
#Lmeun .drage{ width:186px; border:1px solid #EEEEEE;}
#Lmeun .drage .top{ background:url(aheadbg.jpg); height:22px; text-indent:25px; color:#CC0000; font-weight:bold; padding-top:5px;}
#Lmeun .drage .middle{ background:#FCFCFC; height:20px; padding-top:5px;}
#Lmeun .drage .middle div{height:19px;padding-top:3px;padding-left:30px;}
</style>
<table cellpadding="0" cellspacing="0">
<tr>
<TD id=Lmeun vAlign=top>
<DIV class=start style="PADDING: 8px 0px; text-indent:16px; border:#ccc 1px solid; margin-top:5px;">
<A style=" font-weight:bold;" href="#">会员中心起始页</A>
</DIV>
<TABLE class=drage cellSpacing=0 cellPadding=0 width="100%" border=0>
<TR><TD class=top style="cursor:hand;" onclick="open_closeDIV('1')">+ 会员信息管理</TD></TR>
<TR id=div1 style="DISPLAY: none">
<TD class=middle style="HEIGHT: auto">
<DIV>※ <A onclick=self.scroll(0,0); href="#" target=member_mainiframe>用户基本信息</A></DIV>
<DIV>※ <A onclick=self.scroll(0,0); href="#" target=member_mainiframe>身份验证</A></DIV>
</TD>
</TR>
</TABLE>
<TABLE class=drage cellSpacing=0 cellPadding=0 width="100%" border=0>
<TR><TD class=top style="FONT-SIZE: 14px; cursor:hand;" onclick="open_closeDIV('2')">+ 公司信息管理</TD></TR>
<TR id=div2 style="DISPLAY: none">
<TD class=middle style="HEIGHT: auto">
<DIV>※ <A onclick=self.scroll(0,0); href="#" target=member_mainiframe>模板设置</A></DIV>
<DIV>※ <A onclick=self.scroll(0,0); href="#" target=member_mainiframe>横幅设置</A></DIV>
<DIV>※ <A onclick=self.scroll(0,0); href="#" target=member_mainiframe>公司资料</A></DIV>
<DIV>※ <A onclick=self.scroll(0,0); href="#" target=member_mainiframe>联系方式</A></DIV>
<DIV>※ <A onclick=self.scroll(0,0); href="#" target=member_mainiframe>企业新闻</A></DIV>
</TD>
</TR>
</TABLE>
<TABLE class=drage cellSpacing=0 cellPadding=0 width="100%" border=0>
<TR><TD class=top style="FONT-SIZE: 14px; cursor:hand;" onclick="open_closeDIV('3')">+ 供求管理</TD></TR>
<TR id=div3 style="DISPLAY: none">
<TD class=middle style="HEIGHT: auto">
<DIV>※ <A onclick=self.scroll(0,0); href="#" target=member_mainiframe>发布供应信息</A></DIV>
<DIV>※ <A onclick=self.scroll(0,0); href="#" target=member_mainiframe>管理供应信息</A></DIV>
<DIV>※ <A onclick=self.scroll(0,0); href="#" target=member_mainiframe>发布求购信息</A></DIV>
<DIV>※ <A onclick=self.scroll(0,0); href="#" target=member_mainiframe>管理求购信息</A></DIV>
<DIV>※ <A onclick=self.scroll(0,0); href="#" target=member_mainiframe>设置信息分类</A></DIV>
</TD>
</TR>
</TABLE>
<TABLE class=drage cellSpacing=0 cellPadding=0 width="100%" border=0>
<TR><TD class=top style="FONT-SIZE: 14px; cursor:hand;" onclick="open_closeDIV('8')">+ 询价单服务</TD></TR>
<TR id=div8 style="DISPLAY: none">
<TD class=middle style="HEIGHT: auto">
<DIV>※ <A onclick=self.scroll(0,0); href="#" target=member_mainiframe>发出的询价单</A></DIV>
<DIV>※ <A onclick=self.scroll(0,0); href="#" target=member_mainiframe>收到的询价单</A></DIV>
</TD>
</TR>
</TABLE>
<SCRIPT language=javascript>
function open_closeDIV(jj){
var mdiv=document.getElementById("div"+jj);
var mimg=document.getElementById("img"+jj);
if(mdiv.style.display=='none'){
mdiv.style.display='block';
mimg.src='images/0ico2.jpg';
}else{
mdiv.style.display='none';
mimg.src='images/0ico1.jpg';
}
}
</SCRIPT>
</TD>
</tr>
</table>
---
------------------
--------------------
------------------------
-------------------------------
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%
String adminname = (String) application.getAttribute("name");
//System.out.println("admin : "+adminname);
%>
<SCRIPT language=javascript>
function open_closeDIV(jj){
var mdiv=document.getElementById("div"+jj);
var mimg=document.getElementById("img"+jj);
if(mdiv.style.display=='none'){
mdiv.style.display='block';//block表示该元素显示为一个块级元素，单独占一行
mimg.src='img/images/addno.jpg';
}
else{
mdiv.style.display='none';
mimg.src='img/images/add2.jpg';
}
}
//function myclose(){
//if(confirm("真的要关闭当前窗口吗?")){
//window.close();
//}
//}
</SCRIPT>
<style type="text/css">
a {
cursor: hand;
}
#Lmeun .drage {
width: 186px;
border: 1px solid #EEEEEE;
}
#Lmeun .drage .top {
background: url(aheadbg.jpg);
height: 22px;
text-indent: 25px;
color: #CC0000;
font-weight: bold;
padding-top: 5px;
}
#Lmeun .drage .middle {
background: #FCFCFC;
height: 20px;
padding-top: 5px;
}
#Lmeun .drage .middle div {
height: 19px;
padding-top: 3px;
padding-left: 30px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
<TD id=Lmeun vAlign=top>
<DIV class=start
style="PADDING: 8px 0px; text-indent: 16px; border: #ccc 1px solid; margin-top: 5px;">
<A style="font-weight: bold;">欢迎管理员：<%=adminname%></A></DIV>
<TABLE class=drage cellSpacing=0 cellPadding=0 width="100%" border=0>
<TR>
<TD class=top style="cursor: hand;" onclick="open_closeDIV('1')">
<img id=img1 src="img/images/add2.jpg">借书信息</TD>
</TR>
<TR id=div1 style="DISPLAY: none">
<TD class=middle style="HEIGHT: auto">
<DIV><img src="img/images/point.jpg"><A
onclick=self.scroll(0,0); href="jsp/admin/borrow_message.jsp"
target=showSix>借阅信息查詢</A></DIV>
<DIV><img src="img/images/point.jpg"><A
onclick=self.scroll(0,0); href="jsp/admin/borrow_request.jsp"
"
target=showSix>借阅申请用户</A></DIV>
<DIV><img src="img/images/point.jpg"><A
onclick=self.scroll(0,0); href="jsp/admin/wait_message.jsp"
target=showSix>排队信息</A></DIV>
</TD>
</TR>
</TABLE>
<TABLE class=drage cellSpacing=0 cellPadding=0 width="100%" border=0>
<TR>
<TD class=top style="FONT-SIZE: 14px; cursor: hand;"
onclick="open_closeDIV('2')"><img id=img2
src="img/images/add2.jpg">用戶管理</TD>
</TR>
<TR id=div2 style="DISPLAY: none">
<TD class=middle style="HEIGHT: auto">
<DIV><img src="img/images/point.jpg"><A
onclick=self.scroll(0,0); href="jsp/admin/create_user.jsp"
target=showSix>创建用戶</A></DIV>
<DIV><img src="img/images/point.jpg"><A
onclick=self.scroll(0,0);
href="jsp/admin/userdata_modify_admin.jsp" target=showSix>修改用戶信息</A></DIV>
</TD>
</TR>
</TABLE>
<TABLE class=drage cellSpacing=0 cellPadding=0 width="100%" border=0>
<TR>
<TD class=top style="FONT-SIZE: 14px; cursor: hand;"
onclick="open_closeDIV('3')"><img id=img3
src="img/images/add2.jpg">图书管理</TD>
</TR>
<TR id=div3 style="DISPLAY: none">
<TD class=middle style="HEIGHT: auto">
<DIV><img src="img/images/point.jpg"></img><A
onclick=self.scroll(0,0); href="jsp/admin/inroom_book.jsp"
target=showSix>图书入库</A></DIV>
<DIV><img src="img/images/point.jpg"><A
onclick=self.scroll(0,0); href="jsp/admin/modify_book.jsp"
target=showSix>图书信息修改</A></DIV>
<DIV><img src="img/images/point.jpg"><A
onclick=self.scroll(0,0); href="jsp/admin/upload_book.jsp"
target=showSix>图书批量入库</A></DIV>
<DIV><img src="img/images/point.jpg"><A
onclick=self.scroll(0,0); href="jsp/admin/delete_book.jsp"
target=showSix>图书报废</A></DIV>
</TD>
</TR>
</TABLE>
<TABLE class=drage cellSpacing=0 cellPadding=0 width="100%" border=0>
<TR>
<TD class=top style="FONT-SIZE: 14px; cursor: hand;"
onclick="open_closeDIV('8')"><img id=img8
src="img/images/add2.jpg">还书管理</TD>
</TR>
<TR id=div8 style="DISPLAY: none">
<TD class=middle style="HEIGHT: auto">
<DIV><img src="img/images/point.jpg"><A
onclick=self.scroll(0,0); href="jsp/admin/back_book.jsp"
target=showSix>还书</A></DIV>
<DIV><img src="img/images/point.jpg"><A
onclick=self.scroll(0,0); href="jsp/admin/back_bookhistory.jsp"
target=showSix>还书历史记录</A></DIV>
</TD>
</TR>
</TABLE>
<TABLE class=drage cellSpacing=0 cellPadding=0 width="100%" border=0>
<TR>
<TD class=top style="FONT-SIZE: 14px; cursor: hand;"><a
href="logout.jsp" target="_top"> 退出 </a></TD>
</TR>
</TABLE>
</TD>
</tr>
</table>
</body>
</html>
