这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本篇文章主要分享了 js 代码实现下拉菜单的代码,可复制直接运行看效果,具有很好的参考价值,跟小编一起来看下吧
效果:
js 代码:
- <script type="text/javascript">
- function ShowSub(li) { //函数定义
- var subMenu = li.getElementsByTagName("ul")[0]; //获取
- subMenu.style.display = " block ";
- }
- function HideSub(li) {
- var subMenu = li.getElementsByTagName("ul")[0];
- subMenu.style.display = " none ";
- }
- </script>
CSS 样式:
- * {
- margin: 0px;
- padding: 0px;
- }
- body {
- font - family: Verdana,
- Geneva,
- sans - serif;
- font - size: 14px;
- }#nav {
- width: 600px;
- height: 40px;
- background - color: #eee;
- margin: 0 auto;
- }
- ul {
- list - style: none;
- }
- ul li {
- float: left;
- line - height: 40px;
- text - align: center;
- width: 100px;
- } //ie7显示宽度的兼容性 设置width 而不用padding的自适应
- a {
- text - decoration: none;
- color: #000;
- display: block;
- }
- a: hover {
- color: #F00;
- background - color: #666;
- }
- ul li ul li {
- float: none;
- background - color: #eee;
- margin: 2px 0px;
- }
- ul li ul {
- display: none;
- }
html 代码
- <div id="nav">
- <ul>
- <li>
- <a href="#">
- 首页
- </a>
- </li>
- <li onmouseover="ShowSub(this)" onmouseout="HideSub(this)">
- <a href="#">
- 课程大厅
- </a>
- <ul>
- <li>
- <a href="#">
- JavaScript
- </a>
- </li>
- <li>
- <a href="#">
- Html/CSS
- </a>
- </li>
- </ul>
- </li>
- <li onmouseover="ShowSub(this)" onmouseout="HideSub(this)">
- <a href="#">
- 学习中心
- </a>
- <ul>
- <li>
- <a href="#">
- 视频学习
- </a>
- </li>
- <li>
- <a href="#">
- 实例练习
- </a>
- </li>
- <li>
- <a href="#">
- 问与答
- </a>
- </li>
- </ul>
- </li>
- <li>
- <a href="#">
- 经典案例
- </a>
- </li>
- <li>
- <a href="#">
- 关于我们
- </a>
- </li>
- </ul>
- </div>
来源: http://www.phperz.com/article/17/0716/329517.html