【转】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"> &nbsp; &nbsp; 退出 </a></TD>
            </TR>
        </TABLE>
        </TD>
    </tr>
</table>
</body>
</html>

时间： 2024-07-29 05:45:28

【转】js竖状伸缩导航的相关文章

Js 竖直伸缩菜单(百度)_导航菜单

从百度扒下来的竖直伸缩菜单-www.jb51.net 新手入门 关于百度搜索推广 账户注册 快速上手 推广制作 设置匹配方式 撰写创意 设置URL 推广投放 点击过滤 质量度 关键词匹配 创意展现方式 效果评估 推广效果 百度Bridge 持续优化 网站优化 增值产品 百度推广助手 营销中心 关注焦点 推广专题 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

js左边伸缩导航菜单代码

提示:您可以先修改部分代码再运行 js左边伸缩导航菜单代码 菜 单 提示:您可以先修改部分代码再运行

jQuery实现的动态伸缩导航菜单

  本文实例讲述了jQuery实现的动态伸缩导航菜单.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 <!

JQuery伸缩导航练习示例_jquery

最近在学习JQuery,尝试制作了这个导航  下载:代码 复制代码 代码如下: <!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"> <hea

jQuery实现的动态伸缩导航菜单实例_jquery

本文实例讲述了jQuery实现的动态伸缩导航菜单.分享给大家供大家参考.具体实现方法如下: <!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">&l

jquery实现点击向下展开菜单项(伸缩导航)效果_jquery

本文实例讲述了jquery实现点击向下展开菜单项(伸缩导航)效果.分享给大家供大家参考.具体如下: 这里演示基于jquery打造的向下展开的多级导航条效果,纵向垂直排列,风格非常的简洁,鼠标点击时候展开菜单的二级项,再次点击的时候又向上合拢,平时只显示一级菜单,二级菜单是隐藏不显示的,代码简洁,包括了完整的JS.css和jquery部分. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-show-hidden-style-menu

代码- 做js 树状图从文本中读取数据

问题描述 做js 树状图从文本中读取数据 求高手发个参考代码, 在线等,急!!! 解决方案 手里没有,你看下解析xml的方式.无非就是循环根节点,根据根节点循环子节点. 要学会百度

js 二级横向滑动导航菜单效果代码

提示:您可以先修改部分代码再运行 js 二级横向滑动导航菜单效果代码 网站首页 JS代码 电子商务 免费模板 建站技巧 CSS技巧 CSS导航菜单 网络营销 SEO优化 免费模板-网页模板下载 网站公告:免费模板征集友情链接 免费模板 免费模板 免费模板 免费模板 免费模板 网页特效 免费模板 免费模板 网络营销 网络营销 网络营销 网络营销 网络营销 网页特效 免费模板 网页特效 网络营销 网络营销 免费模板 服务器租用首页 网络营销 网络营销 超级机房 免费模板 免费模板 免费模板 免费模板

JS实现快速的导航下拉菜单动画效果附源码下载_javascript技巧

这是一个带变形动画特效的下拉导航菜单特效.该导航菜单在菜单项之间切换时,下拉菜单会快速的根据菜单内容的大小来动态变形,显示合适的下拉菜单大小,效果非常棒. 查看演示     下载源码 HTML 该导航菜单的HTML结构如下: <header class="cd-morph-dropdown"> <a href="#0" class="nav-trigger">Open Nav<span aria-hidden=&qu