天天看点

【转】js竖状伸缩导航

效果图:

【转】js竖状伸缩导航

用到的图片:

【转】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>

        <TR><TD class=top style="FONT-SIZE: 14px; cursor:hand;" onclick="open_closeDIV('2')">+ 公司信息管理</TD></TR>

        <TR id=div2 style="DISPLAY: none">

            <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>

        <TR><TD class=top style="FONT-SIZE: 14px; cursor:hand;" onclick="open_closeDIV('3')">+ 供求管理</TD></TR>

        <TR id=div3 style="DISPLAY: none">

            <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>

        <TR><TD class=top style="FONT-SIZE: 14px; cursor:hand;" onclick="open_closeDIV('8')">+ 询价单服务</TD></TR>

        <TR id=div8 style="DISPLAY: none">

            <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>

      <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>

      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>

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;

#Lmeun .drage .middle div {

    height: 19px;

    padding-top: 3px;

    padding-left: 30px;

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Insert title here</title>

</head>

<body>

    <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>

                    onclick=self.scroll(0,0); href="jsp/admin/borrow_request.jsp"

                    "

                    target=showSix>借阅申请用户</A></DIV>

                    onclick=self.scroll(0,0); href="jsp/admin/wait_message.jsp"

                    target=showSix>排队信息</A></DIV>

                </TD>

        </TABLE>

                <TD class=top style="FONT-SIZE: 14px; cursor: hand;"

                    onclick="open_closeDIV('2')"><img id=img2

                    src="img/images/add2.jpg">用戶管理</TD>

            <TR id=div2 style="DISPLAY: none">

                    onclick=self.scroll(0,0); href="jsp/admin/create_user.jsp"

                    target=showSix>创建用戶</A></DIV>

                    onclick=self.scroll(0,0);

                    href="jsp/admin/userdata_modify_admin.jsp" target=showSix>修改用戶信息</A></DIV>

                    onclick="open_closeDIV('3')"><img id=img3

                    src="img/images/add2.jpg">图书管理</TD>

            <TR id=div3 style="DISPLAY: none">

                <DIV><img src="img/images/point.jpg"></img><A

                    onclick=self.scroll(0,0); href="jsp/admin/inroom_book.jsp"

                    target=showSix>图书入库</A></DIV>

                    onclick=self.scroll(0,0); href="jsp/admin/modify_book.jsp"

                    target=showSix>图书信息修改</A></DIV>

                    onclick=self.scroll(0,0); href="jsp/admin/upload_book.jsp"

                    target=showSix>图书批量入库</A></DIV>

                    onclick=self.scroll(0,0); href="jsp/admin/delete_book.jsp"

                    target=showSix>图书报废</A></DIV>

                    onclick="open_closeDIV('8')"><img id=img8

                    src="img/images/add2.jpg">还书管理</TD>

            <TR id=div8 style="DISPLAY: none">

                    onclick=self.scroll(0,0); href="jsp/admin/back_book.jsp"

                    target=showSix>还书</A></DIV>

                    onclick=self.scroll(0,0); href="jsp/admin/back_bookhistory.jsp"

                    target=showSix>还书历史记录</A></DIV>

                <TD class=top style="FONT-SIZE: 14px; cursor: hand;"><a

                    href="logout.jsp" target="_top">     退出 </a></TD>

        </TD>

    </tr>

</body>

</html>