 | 项目搜索 |
|
| |
|
|
代码片段库:
查看代码片段
浏览
| 提交新的代码片段
| 创建代码包
链接的下拉展开效果
|
类型:
Full Script |
类别:
HTML Manipulation
|
许可证:
GNU General Public License |
语言:
JavaScript
|
描述:
文字链接的下拉展开效果，鼠标点击后就会展开下拉导航菜单来源：http://www.baron.com.cn
|
该代码片段的版本系列:
| 片段ID |
下载版本 |
提交时间 |
提交人 |
删除 |
| 4781 | 1.0 | 2003-10-24 04:14 | cbd001 |  |
点击"下载版本"来下载该代码片段.
最新版本的代码片段: 1.0
脚本说明:
把如下代码加入<body>区域中
<script language="JavaScript1.2">
var menu1=new Array()
menu1[0]='<a href=http://www.dynamicdrive.com target=_blank>新浪网</a><br>'
menu1[1]='<a href=http://www.javascriptkit.com>搜狐</a><br>'
menu1[2]='<a href=http://www.freewarejava.com>央视国际</a><br>'
menu1[3]='<a href=http://www.cooltext.com>江苏音符</a><br>'
menu1[4]='<a href=http://freewarejava.com/cgi-bin/Ultimate.cgi>网易</a><br>'
//Contents for menu 2
var menu2=new Array()
menu2[0]='<a href=http://www.msnbc.com>NBA</a><br>'
menu2[1]='<a href=http://www.cnn.com>BBC</a><br>'
menu2[2]='<a href=http://www.abcnews.com>AOL</a><br>'
</script>
<style>
<!--
.wrap1{
position:relative;
}
.wrap2{
position:absolute;
}
#dropmenu0, #dropmenu1{
z-index:100;
}
-->
</style>
<table width=400>
<tr><td width=200>
<script language="JavaScript1.2">
//reusable/////////////////////////////
//Drop down menu by http://www.dynamicdrive.com
var zindex=100
var ns4=document.layers
var ns6=document.getElementById&&!document.all
var ie4=document.all
var opr=navigator.userAgent.indexOf("Opera")
function dropit(e,whichone){
curmenuID=ns6? document.getElementById(whichone).id : eval(whichone).id
if (window.themenu&&themenu.id!=curmenuID)
themenuStyle.visibility=ns4?"hide" : "hidden"
themenu=ns6? document.getElementById(whichone): eval(whichone)
themenuStyle=(ns6||ie4)? themenu.style : themenu
themenuoffsetX=(ie4&&opr==-1)? document.body.scrollLeft : 0
themenuoffsetY=(ie4&&opr==-1)? document.body.scrollTop : 0
themenuStyle.left=ns6||ns4? e.pageX-e.layerX : themenuoffsetX+event.clientX-event.offsetX
themenuStyle.top=ns6||ns4? e.pageY-e.layerY+19 : themenuoffsetY+event.clientY-event.offsetY+18
hiddenconst=(ns6||ie4)? "hidden" : "hide"
if (themenuStyle.visibility==hiddenconst){
themenuStyle.visibility=(ns6||ie4)? "visible" : "show"
themenuStyle.zIndex=zindex++
}
else
hidemenu()
return false
}
function hidemenu(){
if ((ie4||ns6)&&window.themenu)
themenuStyle.visibility="hidden"
else if (ns4)
themenu.visibility="hide"
}
if (ie4||ns6)
document.onclick=hidemenu
//reusable/////////////////////////////
</script>
<!----------Menu 1 starts here---------->
<ilayer>
<layer visibility=show>
<div class=wrap1>
<span class=wrap2 onClick="dropit(event, 'dropmenu0');event.cancelBubble=true;return false"><font face=Verdana><b><a href="alternate.htm" onClick="if(ns4) return dropit(event, 'document.dropmenu0')">国内站点</a></b></font>
</span>
</div>
</layer>
</ilayer>
</td><td width=200>
<!--webbot bot="HTMLMarkup" startspan -->
<ilayer>
<layer visibility=show>
<div class=wrap1>
<span class=wrap2 onClick="dropit(event, 'dropmenu1');event.cancelBubble=true;return false"><font face=Verdana><b><a href="alternate.htm" onClick="if(ns4) return dropit(event, 'document.dropmenu1')">国外站点</a></b></font>
</span>
</div>
</layer>
</ilayer>
</td></tr></table>
<div id=dropmenu0 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:150;visibility:hidden;border:1px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu0.style.padding="4px"
for (i=0;i<menu1.length;i++)
document.write(menu1[i])
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu0.captureEvents(Event.CLICK)
document.dropmenu0.onclick=hidemenu
}
</script>
<div id=dropmenu1 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:150;visibility:hidden;border:1px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu1.style.padding="4px"
for (i=0;i<menu2.length;i++)
document.write(menu2[i])
</script>
</div>
如果您修改了一个代码片段并且觉得很应该让别人共享,您可以把这作为这个代码片段的最新版本提交上来. |
|
