鼠标点击后滑出的菜单
鼠标点击后滑出的菜单，运行本代码后，网页左上角有一个图片，点击一下，会滑出一个竖向排列的菜单，鼠标放上去可以上下选择菜单，想使用的可以继续完善菜单了。
当前位置：编程学习 > JS >>
答案：<!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>
<title>滑出菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<STYLE>.menuover {
BORDER-RIGHT: #ff0000 1px solid; BORDER-TOP: #ff0000 1px solid; BORDER-LEFT: #ff0000 1px solid; CURSOR: hand; BORDER-BOTTOM: #ff0000 1px solid; BACKGROUND-COLOR: #ffeeee
}
.menuout {
CURSOR: hand
}
TD {
FONT-SIZE: 12px; COLOR: #ff0000; FONT-FAMILY: 宋体; TEXT-DECORATION: none
}
A {
FONT-SIZE: 12px; COLOR: #ff0000; FONT-FAMILY: 宋体; TEXT-DECORATION: none
}
</STYLE>
<SCRIPT language=javascript>
var run=0;
var show=0;
function menuRow()
{
show=1;
run=1;
menu.style.pixelTop-=5;
if(menu.style.pixelTop>0)
setTimeout('menuRow();','5');
else
run=0;
}
function menuShow()
{
if(!run&&!show)
{
menu.style.visibility='visible';
menup.style.visibility='visible';
menu.style.pixelTop=200;
menuRow();
}
}
function menuHide()
{
if(!run&&show)
{
menu.style.visibility='hidden';
menup.style.visibility='hidden';
show=0;
}
}
</SCRIPT>
</head>
<body bgcolor="#ffffff" onclick=menuHide();>
<DIV
style="Z-INDEX: 1; VISIBILITY: visible; OVERFLOW: visible; WIDTH: 0px; POSITION: absolute; HEIGHT: 0px">
<DIV id=menup
style="BORDER-RIGHT: 0px; BORDER-TOP: 0px solid; Z-INDEX: 1; LEFT: 404px; VISIBILITY: hidden; OVERFLOW: hidden; BORDER-LEFT: 0px; WIDTH: 97px; BORDER-BOTTOM: #ff0000 1px solid; POSITION: absolute; TOP: 30px; HEIGHT: 200px">
<DIV id=menu
style="BORDER-RIGHT: #ff0000 1px solid; BORDER-TOP: #ff0000 1px solid; Z-INDEX: 1; LEFT: 0px; BACKGROUND-IMAGE: url(photo/images/menu_bg.gif); VISIBILITY: hidden; OVERFLOW: hidden; BORDER-LEFT: #ff0000 1px solid; WIDTH: 97px; BORDER-BOTTOM: #ff0000 1px solid; POSITION: absolute; TOP: 200px; HEIGHT: 200px"
align=center bgcolor="#FFFFFF">
<TABLE style="POSITION: relative; TOP: 1px" cellSpacing=4
cellPadding=0 width=93>
<TBODY>
<TR>
<TD class=menuout onmouseover="this.className='menuover';"
onclick="location='aboutus'"
onmouseout="this.className='menuout';" vAlign=center
align=middle height=20>关 于 我 们</TD></TR>
<TR>
<TD class=menuout onmouseover="this.className='menuover';"
onclick="location='joinus'"
onmouseout="this.className='menuout';" vAlign=center
align=middle height=20>加 入 我 们</TD></TR>
<TR>
<TD class=menuout onmouseover="this.className='menuover';"
onclick="location='market'"
onmouseout="this.className='menuout';" vAlign=center
align=middle height=20>交 易 市 场</TD></TR>
<TR>
<TD class=menuout onmouseover="this.className='menuover';"
onclick="location='super'"
onmouseout="this.className='menuout';" vAlign=center
align=middle height=20>网 页 超 市</TD></TR>
<TR>
<TD class=menuout onmouseover="this.className='menuover';"
onclick="location='domain'"
onmouseout="this.className='menuout';" vAlign=center
align=middle height=20>域 名 注 册</TD></TR>
<TR>
<TD class=menuout onmouseover="this.className='menuover';"
onclick="location='host'" onmouseout="this.className='menuout';"
vAlign=center align=middle height=20>虚 拟 主 机</TD></TR>
<TR>
<TD class=menuout onmouseover="this.className='menuover';"
onclick="location='service'"
onmouseout="this.className='menuout';" vAlign=center
align=middle height=20>服 务 中 心</TD></TR>
<TR>
<TD class=menuout onmouseover="this.className='menuover';"
onclick="location='cooperator'"
onmouseout="this.className='menuout';" vAlign=center
align=middle height=20>合 作 伙
伴</TD></TR></TBODY></TABLE></DIV></DIV></DIV>
<IMG style="CURSOR: hand" onclick=menuShow(); alt=Menu src="/images/logo.gif" border=0>
</body>
</html>
- 更多JS疑问解答：
- 几个验证11位手机号码格式的js代码
- js把图片转换成 base64代码
- js把base代码转换成图片
- JS 将 base64编码的图片转化为图片文件
- js中的定时器
- js如何获得FCKeditor控件的值
- 用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...
- JS验证，这块“牛皮”反复修改都不能实现
- 在JS中使用DOM模型
- 如何用JS 获取本地文件夹的文件列表
- js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？
- 求实现自动生成图片缩略图的JS代码
- JS脚本网页问题
- js，代码中"object"和"Object"区别？
- js+flash实现网页图片切换效果，出现边框，单击激活此控件。