【转】js竖状伸缩导航

zoukankan html css js c++ java

【转】js竖状伸缩导航

效果图：

用到的图片：

<style type="text/css">

a{cursor:hand;}
#Lmeun .drage{ 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 {
   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>

查看全文

相关阅读:
Win7旗舰版中的IIS配置asp.net的运行环境
 选中弹出层中内容
 在windows server 2003中配置ipad測試環境
 TFS 2012 Preview Quickstart
Windows Azure Quick Start Hello World
2013总结和2014期望
 一个简单的.net写日志方法可能的改进点
 基于Visual Studio的软件生命周期管理和持续交付 (二) 采用成熟度
 关于加班的那些事
 基于Visual Studio的软件生命周期管理和持续交付 (一) 前言

原文地址：https://www.cnblogs.com/ae6623/p/4416748.html