<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<title>基本菜单效果</title>
<style>
<!--
#iewrap
{
position:relative;
height:30px
}
#iewrap2
{
position:absolute
}
#dropmenu03{
filter:revealTrans(Duration=1.5,Transition=12)
visibility:hide
}
a:hover { color: #FF0000}
body { font-family: "宋体"; font-size: 9pt; text-decoration: none}
a { font-family: "宋体"; font-size: 10pt; text-decoration: none}
-->
</style>
</head>
<body bgcolor="#ffc0c0">
<center>
<h2>渐显的下拉菜单</h2><hr>
</center>
<ilayer id="dropmenu01" height=35px>
<layer id="dropmenu02" visibility=show>
<span id="iewrap">
<!--通过onClick调用函数dropit2()-->
<span id="iewrap2" onClick="dropit2();
event.cancelBubble=true;return false">
<font face="宋体"><a href="#">点这里查看本站栏目</a></font>
</span>
</span>
</layer>
</ilayer>
<script language="JavaScript1.2">
<!--
//如果想关闭 "fade"(消隐)效果,将如下参数设置成false,适用于IE用户。
var enableeffect=true
//将如下数组修改成你自己的。
var selection=new Array()
selection[0]='<font face="宋体"><a href="link1.htm">站内链接之一</a></font><br>'
selection[1]='<font face="宋体"><a href="link2.htm">站内链接之二</a></font><br>'
selection[2]='<font face="宋体"><a href="link3.htm">站内链接之三</a></font><br>'
selection[3]='<font face="宋体"><a href="link4.htm">站内链接之四</a></font><br>'
selection[4]='<font face="宋体"><a href="link5.htm">站内链接之五</a></font>'
//对于Netscape浏览器,设置dropmenu02为显示
if (document.layers) document.dropmenu01.document.dropmenu02.visibility='show'
function dropit2()
{
if (document.all) //对于IE浏览器
{
dropmenu03.style.left=document.body.scrollLeft+event.clientX-event.offsetX
dropmenu03.style.top=document.body.scrollTop+event.clientY-event.offsetY+18
if (dropmenu03.style.visibility=="hidden") //如果菜单隐藏
{
if (enableeffect) dropmenu03.filters.revealTrans.apply()
dropmenu03.style.visibility="visible" //显示菜单
if (enableeffect) dropmenu03.filters.revealTrans.play()
}
else{hidemenu()} //如果菜单未隐藏,调用hidemenu()函数隐藏菜单
}
}
function dropit(e)
{
//如果菜单隐藏,则显示出来;如果显示,则将其隐藏
if (document.dropmenu03.visibility=="hide") document.dropmenu03.visibility="show"
else document.dropmenu03.visibility="hide"
document.dropmenu03.left=e.pageX-e.layerX
document.dropmenu03.top=e.pageY-e.layerY+19
return false
}
function hidemenu() //隐藏菜单
{
if (enableeffect) dropmenu03.filters.revealTrans.stop()
dropmenu03.style.visibility="hidden"
}
function hidemenu2()
{
document.dropmenu03.visibility="hide" //隐藏菜单
}
if (document.layers) //对于Netscape浏览器,调用dropit
{
document.dropmenu01.document.dropmenu02.captureEvents(Event.CLICK)
document.dropmenu01.document.dropmenu02.onclick=dropit
}
else if (document.all) //对于IE浏览器调入hidemenu
document.body.onclick=hidemenu
//-->
</script>
<div id="dropmenu03" style="position:absolute;left:0;top:0;
layer-background-color:seashell;background-color:seashell;
width:100;visibility:hidden;
border:1px solid black;padding:0px">
<script language="JavaScript1.2">
<!--
if (document.all)
dropmenu03.style.padding='4px'
for (i=0;i<selection.length;i++)
document.write(selection[i])
//-->
</script>
</div>
<script language="JavaScript1.2">
<!--
if (document.layers) //对于Netscape浏览器,调入hidemenu2
{
document.dropmenu03.captureEvents(Event.CLICK)
document.dropmenu03.onclick=hidemenu2
}
//-->
</script>
</body>
</html>
JavaScript 动态网页实例 - 基本的下拉菜单.rar
需积分: 5 93 浏览量
2024-05-19
22:32:34
上传
评论
收藏 3KB RAR 举报
迎风海盗旗
- 粉丝: 1000
- 资源: 28
最新资源
- 通用性I2C接口的应用之驱动SHT20(N32G45XVL-STB)
- 基于Python+BERT+词典开发的医药知识图谱自动问答系统实现+源代码+文档说明+使用教程+数据.zip
- 基于yolov8对6种水果数据集的目标检测实现【数据+代码+训练好的权重】
- ѧ�����˿α�_23252202222.xls
- UVa12227/LA4618 Wormholes
- WIN10及WIN11系统PL2303USB 串口驱动问题解决方法,亲测好用
- 8640张人员摔倒检测数据集含voc和yolo格式标签(yolo系列目标检测算法直接使用).zip
- 省 市 县 三级联动 数据字典
- 1D-moc-to-CKJ.py
- VMware vCenter Server 7.0U3r安装ISO的度盘地址,由Patch界面提供,产品界面仍然为7.0U3p
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈