用javascript实现小的滑动下拉菜单~~~~~~
2012-03-08 21:55
357 查看
<!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=utf-8" />
<title>js滑动下拉菜单</title>
<style>
div{
display:none;
}
ul{
list-style-type:none;
margin-top:0px;
margin-left:20px;
background-color:#999;
}
li{
width:100px;
display:block;
}
li a{
color:#0CF;
text-decoration:none;
padding:4px 0px 2px 0px;
}
li a:hover{
color:#03F;
background-color:#FF3;
display:block;
border-style:solid;
border-width:2px;
border-color:#0F6;
}
span a:hover{
color:#000;
}
span a{
text-decoration:none;
}
</style>
<script>
//第一种：捕捉鼠标坐标
//第二种：这是第二种
function Show(dnum){
document.getElementById(dnum).style.display="block";
}
function Hidden1(dnum){
document.getElementById(dnum).style.display="none";
}
</script>
</head>
<body>
<table border="0">
<tr>
<td width="100" align="center" bgcolor="#FF00FF" onmouseover="Show(1)" onmouseout="Hidden1(1)"><span>我</span></td>
<td width="100" align="center" bgcolor="#FF00FF" onmouseover="Show(2)" onmouseout="Hidden1(2)"><span>要</span></td>
<td width="100" align="center" bgcolor="#FF00FF" onmouseover="Show(3)" onmouseout="Hidden1(3)"><span>上</span></td>
<td width="100" align="center" bgcolor="#FF00FF" onmouseover="Show(4)" onmouseout="Hidden1(4)"><span>qq</span></td>
</tr>
<tr>
<td onmouseover="Show(1)" onmouseout="Hidden1(1)" >
<div id="1">
<ul>
<li><a href="#">我</a></li>
<li><a href="#">我</a></li>
<li><a href="#">我</a></li>
</ul>
</div>
</td>
<td onmouseover="Show(2)" onmouseout="Hidden1(2)">
<div id="2">
<ul>
<li><a href="#">要</a></li>
<li><a href="#">要</a></li>
<li><a href="#">要</a></li>
</ul>
</div></td>
<td onmouseover="Show(3)" onmouseout="Hidden1(3)">
<div id="3">
<ul>
<li><a href="#">上</a></li>
<li><a href="#">上</a></li>
<li><a href="#">上</a></li>
</ul>
</div></td>
<td onmouseover="Show(4)" onmouseout="Hidden1(4)">
<div id="4">
<ul>
<li><a href="#">qq</a></li>
<li><a href="#">qq</a></li>
<li><a href="#">qq</a></li>
</ul>
</div>
</td>
</tr>
</table>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js滑动下拉菜单</title>
<style>
div{
display:none;
}
ul{
list-style-type:none;
margin-top:0px;
margin-left:20px;
background-color:#999;
}
li{
width:100px;
display:block;
}
li a{
color:#0CF;
text-decoration:none;
padding:4px 0px 2px 0px;
}
li a:hover{
color:#03F;
background-color:#FF3;
display:block;
border-style:solid;
border-width:2px;
border-color:#0F6;
}
span a:hover{
color:#000;
}
span a{
text-decoration:none;
}
</style>
<script>
//第一种：捕捉鼠标坐标
//第二种：这是第二种
function Show(dnum){
document.getElementById(dnum).style.display="block";
}
function Hidden1(dnum){
document.getElementById(dnum).style.display="none";
}
</script>
</head>
<body>
<table border="0">
<tr>
<td width="100" align="center" bgcolor="#FF00FF" onmouseover="Show(1)" onmouseout="Hidden1(1)"><span>我</span></td>
<td width="100" align="center" bgcolor="#FF00FF" onmouseover="Show(2)" onmouseout="Hidden1(2)"><span>要</span></td>
<td width="100" align="center" bgcolor="#FF00FF" onmouseover="Show(3)" onmouseout="Hidden1(3)"><span>上</span></td>
<td width="100" align="center" bgcolor="#FF00FF" onmouseover="Show(4)" onmouseout="Hidden1(4)"><span>qq</span></td>
</tr>
<tr>
<td onmouseover="Show(1)" onmouseout="Hidden1(1)" >
<div id="1">
<ul>
<li><a href="#">我</a></li>
<li><a href="#">我</a></li>
<li><a href="#">我</a></li>
</ul>
</div>
</td>
<td onmouseover="Show(2)" onmouseout="Hidden1(2)">
<div id="2">
<ul>
<li><a href="#">要</a></li>
<li><a href="#">要</a></li>
<li><a href="#">要</a></li>
</ul>
</div></td>
<td onmouseover="Show(3)" onmouseout="Hidden1(3)">
<div id="3">
<ul>
<li><a href="#">上</a></li>
<li><a href="#">上</a></li>
<li><a href="#">上</a></li>
</ul>
</div></td>
<td onmouseover="Show(4)" onmouseout="Hidden1(4)">
<div id="4">
<ul>
<li><a href="#">qq</a></li>
<li><a href="#">qq</a></li>
<li><a href="#">qq</a></li>
</ul>
</div>
</td>
</tr>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 用javascript实现分级下拉菜单(可实现无限级)
- 利用html5和JavaScript实现手机端滑动菜单的交互概念
- [require-js]向下滑动ajax加载的javascript实现
- javascript实现的又一个不错的滑动导航效果
- 实现下拉菜单的javaScript代码
- JavaScript实现非常简单实用的下拉菜单效果
- Javascript实现自动无限级关联下拉菜单
- javascript setTimeOut方法 实现滑动效果（类似2D加速）
- Javascript实现简单二级下拉菜单实例
- Javascript实现的左右滑动菜单
- javascript实现百度地图鼠标滑动事件显示、隐藏
- Javascript实现下拉菜单
- javascript实现滑动解锁功能
- FrontEnd 步步高升:Dropdown,纯javascript实现下拉菜单
- 基于javascript实现图片滑动效果
- Javascript实现的左右滑动菜单
- javascript(js),XML,DOM实现无限级下拉菜单，不会被任何标签或元素遮住
- 用javascript实现选择下拉菜单间的数据转移
- JavaScript实现下拉菜单对文本框赋值的小功能
- JavaScript实现下拉菜单（鼠标、键盘操作）