 | 项目搜索 |
|
| |
|
|
代码片段库:
查看代码片段
浏览
| 提交新的代码片段
| 创建代码包
鼠标驱动的下拉菜单
|
类型:
Full Script |
类别:
HTML Manipulation
|
许可证:
GNU General Public License |
语言:
JavaScript
|
描述:
鼠标放到文字上后出现下拉导航菜单，不同分辨率也有效 来源：http://www.baron.com.cn
|
该代码片段的版本系列:
| 片段ID |
下载版本 |
提交时间 |
提交人 |
删除 |
| 4803 | 1.0 | 2003-10-24 04:39 | cbd001 |  |
点击"下载版本"来下载该代码片段.
最新版本的代码片段: 1.0
脚本说明:
把如下代码加入<body>区域中
<STYLE type=text/css>.menubar {
BORDER-RIGHT: 1px outset; BORDER-TOP: 1px outset; BACKGROUND: #0099cc; BORDER-LEFT: 1px outset; WIDTH: 100px; CURSOR: default; COLOR: yellow; BORDER-BOTTOM: 1px outset; POSITION: absolute; TOP: 10px; HEIGHT: 20px
}
.menu {
BORDER-RIGHT: 2px outset; PADDING-RIGHT: 15px; BORDER-TOP: white 2px outset; DISPLAY: none; PADDING-LEFT: 15px; BACKGROUND: yellow; PADDING-BOTTOM: 15px; BORDER-LEFT: 2px outset; WIDTH: 140px; PADDING-TOP: 15px; BORDER-BOTTOM: 2px outset; POSITION: absolute; TOP: 30px
}
.menu A {
COLOR: blue; TEXT-DECORATION: none
}
.menu A:hover {
COLOR: #ffffff
}
</STYLE>
<SCRIPT language=javascript>
function menuControl(show)
{
window.event.cancelBubble=true;
var objID=event.srcElement.id;
var index=objID.indexOf("_");
var mainID=objID.substring(0,index);
var numID=objID.substring(index+1,objID.length);
if(mainID=="menubar")
{
if(show==1)
{
eval("showMenu("+"menu_"+numID+")");
}
else
{
eval("hideMenu("+"menu_"+numID+")");
}
}
}
var nbottom=0,speed=7;
function displayMenu(obj)
{
obj.style.clip="rect(0 100% "+nbottom+"% 0)";
nbottom+=speed;
if(nbottom<=100)
{
timerID=setTimeout("displayMenu("+obj.id+"),70");
}
else clearTimeout(timerID);
}
function showMenu(obj)
{
obj.style.display="block";
obj.style.clip="rect(0 0 0 0)";
nbottom=5;
displayMenu(obj);
}
function hideMenu(obj)
{
nbottom=0;
obj.style.display="none";
}
function keepMenu(obj)
{
obj.style.display="block";
}
</SCRIPT>
<TABLE style="FONT-SIZE: 15px" cellSpacing=0 cellPadding=0 width=400 border=0>
<TBODY>
<TR>
<TD width="20%">
<DIV class=menubar id=menubar_1 onmouseover=menuControl(1)
onmouseout=menuControl(0) align=center>教育网站 </DIV></TD>
<TD width="20%">
<DIV class=menubar id=menubar_2 onmouseover=menuControl(1)
onmouseout=menuControl(0) align=center>电脑网站 </DIV></TD>
<TD width="20%">
<DIV class=menubar id=menubar_3 onmouseover=menuControl(1)
onmouseout=menuControl(0) align=center>免费邮件 </DIV></TD>
<TD width="20%">
<DIV class=menubar id=menubar_4 onmouseover=menuControl(1)
onmouseout=menuControl(0) align=center>其它网站 </DIV></TD></TR>
<TR>
<TD width="20%">
<DIV class=menu id=menu_1 onmouseover=keepMenu(this)
onmouseout=hideMenu(this) align=left><A
href="http://www.cqcas.edu.cn/">重庆民政学校</A><BR><A
href="http://www.cqu.edu.cn/">重庆大学</A><BR><A
href="http://www.cquc.edu.cn/">重庆交通学院</A> </DIV></TD>
<TD width="20%">
<DIV class=menu id=menu_2 onmouseover=keepMenu(this)
onmouseout=hideMenu(this) align=left><A
href="http://www.yesky.com/">天极网</A><BR><A
href="http://www.cfan.cn.net/">电脑爱好者</A><BR><A
href="http://www.intoweb.com.cn/">上网杂志</A> </DIV></TD>
<TD width="20%">
<DIV class=menu id=menu_3 onmouseover=keepMenu(this)
onmouseout=hideMenu(this) align=left><A
href="http://www.163.com/">163电子邮件</A><BR><A
href="http://freemail.263.net/">首都在线</A><BR><A
href="http://www.21cn.com/">21CN电子邮件</A><BR><A
href="http://www.chinese.com/">炎皇在线</A> </DIV></TD>
<TD width="20%">
<DIV class=menu id=menu_4 onmouseover=keepMenu(this)
onmouseout=hideMenu(this) align=left><A
href="http://www.sohu.com.cn/">搜狐</A><BR><A
href="http://www.yahoo.com/">雅虎</A><BR><A
href="http://www.cseek.com/">搜索客</A><BR><A
href="http://www.sina.com/">新浪网</A><BR><A
href="http://202.102.4.31/51windows/js/httP;//www.cqcas.edu.cn/user/sailing">远航网站</A>
</DIV></TD></TR></TBODY></TABLE>
如果您修改了一个代码片段并且觉得很应该让别人共享,您可以把这作为这个代码片段的最新版本提交上来. |
|
