这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 javascript 实现控制的多级下拉菜单,包含示例代码,效果非常不错,这里推荐给大家。
最近身体不适,所以没能如期的更新,抱歉。这里直接把代码贴上,如果有不明白的地方,留言就行。
- <!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=utf-8">
- <style type="text/CSS">
- .navi ul { padding: 0; list-style-type: none; } .navi ul li { text-align:
- center; float: left; position: relative; width: 200px; background-color:
- #0F8CFF; } a { color: #086808; text-decoration: none; } .navi ul li a {
- display: block; border: 1px solid #fff; } .navi ul li ul { display: none;
- left: 0; } .navi ul li ul li ul{ position: absolute; left:200px; top: 0;
- } .navi ul li:hover ul a { color: yellow; }
- </style>
- <script type="text/javascript">
- function showNextMenu(obj) {
- var nextMenu = obj.getElementsByTagName("ul")[0];
- nextMenu.style.display = "block";
- }
- function hideNextMenu(obj) {
- var nextMenu = obj.getElementsByTagName("ul")[0];
- nextMenu.style.display = "none";
- }
- </script>
- </head>
- <body>
- <div class="navi">
- <ul>
- <li class="li_1" onmousemove="showNextMenu(this);" onmouseout="hideNextMenu(this);">
- <a href="javascript:;">
- 游戏
- </a>
- <ul>
- <li onmousemove="showNextMenu(this);" onmouseout="hideNextMenu(this);">
- <a href="javascript:;">
- 传奇
- </a>
- <ul>
- <li>
- <a href="javascript:;">
- 1
- </a>
- </li>
- <li>
- <a href="javascript:;">
- 2
- </a>
- </li>
- <li>
- <a href="javascript:;">
- 3
- </a>
- </li>
- </ul>
- </li>
- <li>
- <a href="javascript:;">
- 传奇
- </a>
- </li>
- <li>
- <a href="javascript:;">
- 传奇
- </a>
- </li>
- <li>
- <a href="javascript:;">
- 传奇
- </a>
- </li>
- <li>
- <a href="javascript:;">
- 传奇
- </a>
- </li>
- </ul>
- </li>
- <li class="li_1">
- <a href="javascript:;">
- 游戏
- </a>
- <ul>
- <li>
- <a href="javascript:;">
- 传奇
- </a>
- </li>
- </ul>
- </li>
- <li class="li_1">
- <a href="javascript:;">
- 游戏
- </a>
- <ul>
- <li>
- <a href="javascript:;">
- 传奇
- </a>
- </li>
- </ul>
- </li>
- <li class="li_1">
- <a href="javascript:;">
- 游戏
- </a>
- <ul>
- <li>
- <a href="javascript:;">
- 传奇
- </a>
- </li>
- </ul>
- </li>
- </ul>
- </div>
- </body>
- </html>
效果图如下:
来源: http://www.phperz.com/article/17/0419/270531.html