点击出现下拉菜单

wlcsdf 2009-11-06 11:28:23
　　本来是在页面　左侧　做了一个列表，链接到其他页面上，现在要求改变形式，在页面顶端加一个图片链接，点击图片就出现一个下拉菜单，进而有其他页面的链接列表。
　　感觉不好做，如果是单纯在一个页面中实现好说，但是要在原有的页面中，加入一个图片链接，可能会破坏原页面的结构。请指点。
...全文
273 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
liuwei_IT_love 2009-11-19
  • 打赏
  • 举报
 回复
dreamweaver直接可以实现
辰黎 2009-11-18
  • 打赏
  • 举报
 回复
css+div+javascript 了
rcsglydm 2009-11-18
  • 打赏
  • 举报
 回复
'*****************从这里开始到下面结束的标志，代码放到<head>下面****************
<style>
body
{
font-size:12;

}
A:link
{
FONT-SIZE: 9pt;
COLOR: #000000;
TEXT-DECORATION: none;
}
A:visited
{
FONT-SIZE: 9pt;
COLOR: #000000;
TEXT-DECORATION: none;
}
A:active
{
FONT-SIZE: 9pt;
COLOR: #000000;
TEXT-DECORATION: none;
}
A:hover
{
COLOR: #FF0000;
COLOR: #000000;
TEXT-DECORATION: none;
}

input
{
border:1px solid #D4D0c8;
width:100;
overflow:visible;
}
button
{
border:1px solid #999999;
/*#D4D0c8*/
width:60;
overflow:visible;
margin-left:2;
cursor:hand;
font-size:12;
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#ffffff', endColorStr='#D4D0c8', gradientType='0');
}

td
{
font-size:12;
text-indent:3;
}
th
{
letter-spacing:5;
font-size:12;
height:20;
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#ffffff', endColorStr='#D4D0c8', gradientType='0');
}

table
{
/*margin-left:10;*/
border:4px #999999 double ;
border-collapse:collapse;
}
textarea
{
overflow:visible;
width:100%;
height:100;
border:1px #D4D0c8 solid;
}
ul {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;
text-align: left;
height:auto; '***************设置DIV层高度自适应。************
}
</style>
<SCRIPT>
var oPopup = window.createPopup();
function showMenu(obj,x)
{
var oPopBody = oPopup.document.body;
var HTML = document.all("menu" + x).innerHTML ;
oPopBody.innerHTML = HTML;
var rows = HTML.match(/<TR>/g).length;
oPopup.show(obj.offsetLeft+445,obj.offsetTop+50, 100,rows*18+6,document.body) ; '在这里调整子菜单项，把它挪到主菜单下方
}
</SCRIPT>
'***********************到这里结束******************************




<!--**************下面这个表格就是子菜单项代码,随便放哪都行*******************-->
<p style="display:none" id="menu1">
<table WIDTH=100 BORDER=1 style='cursor:hand;border:4px;border-collapse:collapse;'>
<TR><TD align="center" style='font-size:9pt;' onclick="parent.top.location.href='133.asp'" onmouseover="this.style.backgroundColor='#e895ba'" onmouseout="this.style.backgroundColor='#ffffff'">大类管理</TD></TR>
<TR><TD align="center" style='font-size:9pt;' onclick="parent.top.location.href='111.asp'" onmouseover="this.style.backgroundColor='#e895ba'" onmouseout="this.style.backgroundColor='#ffffff'">默认页面</TD></TR>
<TR><TD align="center" style='font-size:9pt;' onclick="parent.top.location.href='144.asp'" onmouseover="this.style.backgroundColor='#e895ba'" onmouseout="this.style.backgroundColor='#ffffff'">歌手管理</TD></TR>
<TR><TD align="center" style='font-size:9pt;' onclick="parent.top.location.href='155.asp'" onmouseover="this.style.backgroundColor='#e895ba'" onmouseout="this.style.backgroundColor='#ffffff'">专辑管理</TD></TR>
<TR><TD align="center" style='font-size:9pt;' onclick="parent.top.location.href='166.asp'" onmouseover="this.style.backgroundColor='#e895ba'" onmouseout="this.style.backgroundColor='#ffffff'">歌曲管理</TD></TR>
<TR><TD align="center" style='font-size:9pt;' onclick="parent.top.location.href='177.asp'" onmouseover="this.style.backgroundColor='#e895ba'" onmouseout="this.style.backgroundColor='#ffffff'">批量上传</a></TD></TR>
</table>
</p>


'***************下面是主菜单项代码，放到你想放的地方***************
<TABLE BORDER=1 CELLPADDING=1 CELLSPACING=1 style='cursor:hand' width="100">
<TR>
<TH onmouseover="showMenu(this,1); ">音乐库</TH>
</TR>
</TABLE>
wlcsdf 2009-11-16
  • 打赏
  • 举报
 回复
自己顶一下。
wlcsdf 2009-11-15
  • 打赏
  • 举报
 回复
如上所示，我用的下拉菜单的例子。不过现在有个问题。
这个下拉菜单在一个空白网页上显示当然可以。但我现在用的是柜架结构的网页。上下结构的，页面上方有一个top,显示公司图片。页面下方是mainframe，显示程序。
这个下拉菜单如果放在页面上方，会显不全，因为top的高度有限。放在页面下方，mainframe的顶部，也不行，因为会把整个mainframe给向下方挤好几行的距离。
有没有一种下拉菜单，是可以浮在页面上的，而不会把页面向下方挤。就好象windows里的菜单一样。
wlcsdf 2009-11-15
  • 打赏
  • 举报
 回复 


<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>

<!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=vbscript>   

  <!--   

  Function   showtable()   

  xo.style.visibility=""   

  End   Function   

    

  Function   hiddletable()   

  xo.style.visibility="hidden"   

  End   Function   

  -->   

  </SCRIPT>   

  <style>   

  <!--   

  a:link               {   text-decoration:   none;   color:   #FFFFFF   }   

  a:visited         {   color:   #FFFFFF;   text-decoration:   none   }   

  a:active           {   color:   #FFFFFF;   text-decoration:   none   }   

  a:hover             {   color:   #FF0000;   text-decoration:   none   }   

  table                 {   font-size:   10pt   }   

  -->   

  </style>

</head>



<body>

<div   align="center">   

      <center>   

      <table   border="0"   cellspacing="0"   width="10%"   cellpadding="0">   

          <tr>   

              <td   width="100%"   align="center"   bgcolor="#3399FF"   onmousemove=showtable()   onmouseout=hiddletable()   style="line-height=150%"><font   color="#FFFFFF">菜单</font></td>   

          </tr>   

          <tr>   

              <td   width="100%"   align="center">   

                  <div   align="center">   

                      <table   border="0"   cellpadding="0"   cellspacing="0"   width="100%"   id=xo   style="visibility:hidden"   onmousemove=showtable()   onmouseout=hiddletable()>   

                          <tr>   

                              <td   width="100%"   align="center"   style="line-height=10%"></td>   

                          </tr>   

                          <tr>   

                              <td   width="100%"   bgcolor="#3399FF"   align="center"><font   color="#FFFFFF"><a   href="http://www.163.com">今日</a></font></td>   

                          </tr>   

                          <tr>   

                              <td   width="100%"   bgcolor="#3399FF"   align="center"><font   color="#FFFFFF"><a   href="http://www.sohu.com">明日</a></font></td>   

                          </tr>   

                      </table>   

                  </div>   

              </td>   

          </tr>   

      </table>   

      </center>   

  </div>

</body>

</html>
junshanhudazhaxi 2009-11-07
  • 打赏
  • 举报
 回复
将下拉菜单包含在div中，默认情况下是隐藏的(display:none)，在点击图片后让div显示，这个是通过js来控制的，在设置div的位置时注意将position:absolute这样这个div就能脱离页面布局，可以显示在其他html标签的上面了
用JSP+JavaScript打造二级级联下拉菜单
用JSP+JavaScript打造二级级联下拉菜单
PopupWindowDemo
PopupWindow可以实现浮层效果，主要方法有：可以自定义view，通过LayoutInflator方法；可以出现和退出时显示动画；可以指定显示位置等。 为了将PopupWindow的多个功能展现并力求用简单的代码实现，编写了一个点击按钮顶部弹出菜单的功能，实现出现和退出时显示动画效果并点击其他区域时弹出层自动消失
vue 点击出现下拉菜单,点击下拉菜单以外都要关闭菜单
vue 点击出现下拉菜单,点击下拉菜单以外都要关闭菜单 2018-08-29 15:34:55周家大小姐.阅读数 5928收藏更多 分类专栏：vue2.0周家大小姐 版权声明：本文为博主原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/qq_40190624/article/detail...
js点击式下拉菜单与悬浮式下拉菜单
点击出现下拉菜单 HTML部分 <div id="clickOpen"> 点击展开 </div> <br /> <ul class="list"> <li class="item">收藏的商品</li> <li class="item">收藏的店铺</li> </ul> css部分 #clickOpen { display: inline; padding: 5px 20px;
鼠标点击出现下拉菜单html,Bootstrap导航条可点击和鼠标悬停显示下拉菜单
使用Bootstrap导航条组件时，如果你的导航条带有下拉菜单，那么这个带下拉菜单的导航在点击时只会浮出下拉菜单，它本身的href属性会失效，也就是失去了超链接功能，这并不是我想要的，我希望导航条的链接可以正常打开它的链接，但又需要下拉菜单功能，开始折腾~首先解决带下拉菜单的导航条可以点击问题，下拉菜单效果是JS实现的，分析bootstrap.js文件发现，Bootstrap把下拉菜单写成了一个J...
ASP

28,391

社区成员

357,060

社区内容

发帖
与我相关
我的任务
社区描述
ASP即Active Server Pages，是Microsoft公司开发的服务器端脚本环境。
社区管理员
  • ASP
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章