首页 > 语言 > JavaScript > 正文

JS+CSS 制作的超级简单的下拉菜单附图

2024-05-06 15:55:57
字体:
来源:转载
供稿:网友
下拉菜单想必大家都有见到过吧,在本文将为大家介绍个不错的示例,超简单的,大家可以参考下哦

先看效果:

JS+CSS 制作的超级简单的下拉菜单附图

 
代码:

复制代码 代码如下:


<html>
<head>
<title>Good Test</title>
<script>
function showSubMenu(SubMenu) {
document.getElementById(SubMenu).style.display = "inline";
}
function HideSubMenu(SubMenu) {
document.getElementById(SubMenu).style.display = "none";
}
</script>
<style>
.menu{
margin:1px 1px 1px 1px;
padding:3px 5px 3px 5px;
background-color:#8080C0;
color:white;
}
.submenu {
margin:1px 1px 1px 1px;
padding:3px 5px 3px 5px;
background-color:#8080C0;
color:white;
}
</style>
</head>
<body>
<div>
<table>
<tr>
<td>
<span onmousemove="showSubMenu('SubMenu1')" >Menu1</span>
<br />
<div onmousemove="showSubMenu('SubMenu1')">
<span>SubMenu1</span><br />
<span>SubMenu2</span><br />
<span>SubMenu3</span><br />
<span>SubMenu4</span>
</div>
</td>
<td>
<span onmousemove="showSubMenu('SubMenu2')">Menu2</span>
<br />
<div onmousemove="showSubMenu('SubMenu2')">
<span>SubMenu1</span><br />
<span>SubMenu2</span><br />
<span>SubMenu3</span><br />
<span>SubMenu4</span>
</div>
</td>
<td>
<span onmousemove="showSubMenu('SubMenu3')">Menu3</span>
<br />
<div onmousemove="showSubMenu('SubMenu3')">
<span>SubMenu1</span><br />
<span>SubMenu2</span><br />
<span>SubMenu3</span><br />
<span>SubMenu4</span>
</div>
</td>
<td>
<span onmousemove="showSubMenu('SubMenu4')">Menu4</span>
<br />
<div onmousemove="showSubMenu('SubMenu4')">
<span>SubMenu1</span><br />
<span>SubMenu2</span><br />
<span>SubMenu3</span><br />
<span>SubMenu4</span>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选