手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >JS+CSS 制作的超级简单的下拉菜单附图
JS+CSS 制作的超级简单的下拉菜单附图
摘要:先看效果:代码:复制代码代码如下:GoodTestfunctionshowSubMenu(SubMenu){document.getElem...

先看效果:

1

代码:

复制代码 代码如下:

<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 id="Menu1" onmousemove="showSubMenu('SubMenu1')" onmouseout="HideSubMenu('SubMenu1')" >Menu1</span>

<br />

<div id="SubMenu1" onmousemove="showSubMenu('SubMenu1')" onmouseout="HideSubMenu('SubMenu1')">

<span>SubMenu1</span><br />

<span>SubMenu2</span><br />

<span>SubMenu3</span><br />

<span>SubMenu4</span>

</div>

</td>

<td>

<span id="Menu2" onmousemove="showSubMenu('SubMenu2')" onmouseout="HideSubMenu('SubMenu2')">Menu2</span>

<br />

<div id="SubMenu2" onmousemove="showSubMenu('SubMenu2')" onmouseout="HideSubMenu('SubMenu2')">

<span>SubMenu1</span><br />

<span>SubMenu2</span><br />

<span>SubMenu3</span><br />

<span>SubMenu4</span>

</div>

</td>

<td>

<span id="Menu3" onmousemove="showSubMenu('SubMenu3')" onmouseout="HideSubMenu('SubMenu3')">Menu3</span>

<br />

<div id="SubMenu3" onmousemove="showSubMenu('SubMenu3')" onmouseout="HideSubMenu('SubMenu3')">

<span>SubMenu1</span><br />

<span>SubMenu2</span><br />

<span>SubMenu3</span><br />

<span>SubMenu4</span>

</div>

</td>

<td>

<span id="Menu4" onmousemove="showSubMenu('SubMenu4')" onmouseout="HideSubMenu('SubMenu4')">Menu4</span>

<br />

<div id="SubMenu4" onmousemove="showSubMenu('SubMenu4')" onmouseout="HideSubMenu('SubMenu4')">

<span>SubMenu1</span><br />

<span>SubMenu2</span><br />

<span>SubMenu3</span><br />

<span>SubMenu4</span>

</div>

</td>

</tr>

</table>

</div>

</body>

</html>

【JS+CSS 制作的超级简单的下拉菜单附图】相关文章:

Div+CSS+JS树型菜单,可刷新

一个很简单的办法实现TD的加亮效果.

一个很简单的办法实现TD的加亮效果.

Javascript调用XML制作连动下拉列表框

二级连动菜单

创建你的第一个AngularJS应用的方法

javascript中attachEvent用法

漂亮的仿flash菜单,来自蓝色经典

仿DVBBS下拉菜单效果 jb51修正无错

JavaScript实现简单的数字倒计时

精品推荐
分类导航