这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
下拉菜单想必大家都有见到过吧,在本文将为大家介绍个不错的示例,超简单的,大家可以参考下哦
先看效果:
代码:
- <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 style="vertical-align:top;">
- <span class="menu" id="Menu1" onmousemove="showSubMenu('SubMenu1')" onmouseout="HideSubMenu('SubMenu1')">
- Menu1
- </span>
- <br />
- <div id="SubMenu1" style="display:none" onmousemove="showSubMenu('SubMenu1')"
- onmouseout="HideSubMenu('SubMenu1')">
- <span class="submenu">
- SubMenu1
- </span>
- <br />
- <span class="submenu">
- SubMenu2
- </span>
- <br />
- <span class="submenu">
- SubMenu3
- </span>
- <br />
- <span class="submenu">
- SubMenu4
- </span>
- </div>
- </td>
- <td style="vertical-align:top;">
- <span class="menu" id="Menu2" onmousemove="showSubMenu('SubMenu2')" onmouseout="HideSubMenu('SubMenu2')">
- Menu2
- </span>
- <br />
- <div id="SubMenu2" style="display:none" onmousemove="showSubMenu('SubMenu2')"
- onmouseout="HideSubMenu('SubMenu2')">
- <span class="submenu">
- SubMenu1
- </span>
- <br />
- <span class="submenu">
- SubMenu2
- </span>
- <br />
- <span class="submenu">
- SubMenu3
- </span>
- <br />
- <span class="submenu">
- SubMenu4
- </span>
- </div>
- </td>
- <td style="vertical-align:top;">
- <span class="menu" id="Menu3" onmousemove="showSubMenu('SubMenu3')" onmouseout="HideSubMenu('SubMenu3')">
- Menu3
- </span>
- <br />
- <div id="SubMenu3" style="display:none" onmousemove="showSubMenu('SubMenu3')"
- onmouseout="HideSubMenu('SubMenu3')">
- <span class="submenu">
- SubMenu1
- </span>
- <br />
- <span class="submenu">
- SubMenu2
- </span>
- <br />
- <span class="submenu">
- SubMenu3
- </span>
- <br />
- <span class="submenu">
- SubMenu4
- </span>
- </div>
- </td>
- <td style="vertical-align:top;">
- <span class="menu" id="Menu4" onmousemove="showSubMenu('SubMenu4')" onmouseout="HideSubMenu('SubMenu4')">
- Menu4
- </span>
- <br />
- <div id="SubMenu4" style="display:none" onmousemove="showSubMenu('SubMenu4')"
- onmouseout="HideSubMenu('SubMenu4')">
- <span class="submenu">
- SubMenu1
- </span>
- <br />
- <span class="submenu">
- SubMenu2
- </span>
- <br />
- <span class="submenu">
- SubMenu3
- </span>
- <br />
- <span class="submenu">
- SubMenu4
- </span>
- </div>
- </td>
- </tr>
- </table>
- </div>
- </body>
- </html>
(adsbygoogle = window.adsbygoogle || []).push({});
来源: http://www.phperz.com/article/17/0629/278211.html