二级下拉菜单

最新推荐文章于 2024-10-04 06:11:34 发布

weixin_34221112

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量63

点赞数

文章标签： xhtml javascript ViewUI

看似简单的一个菜单，确需要不少的知识点。

1. getByClass

getElementsByClassName 已经有大部分现代浏览器支持了，只有ie6,ie7,ie8是不支持的。所以对ie6,7,8做特别的处理就行，而ie里边有个内置的属性一直被我们所忽略，document.all，这个比一般的document.getElementsByTagName('*')或许要快一点。

2. setTimeout 的巧妙用法。

当鼠标离开某个区域时，延时隐藏另外一个区域，而到另外一个区域是清除这个定时器。

<!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <title>二级延迟菜单 - 豪情</title> <style type="text/css"> *{margin:0;padding:0;} body{font:12px/1.125 Arial,Helvetica,sans-serif;background:#333;} table{border-collapse:collapse;border-spacing:0;} li{list-style:none;} a:focus,input,textarea{outline-style:none;} input[type="text"],input[type="password"],textarea{outline-style:none;-webkit-appearance:none;} a{color:#0a8cd2;text-decoration:none;} a:hover{text-decoration:underline;} .none{display:none} .demo{width:600px;height:500px;margin:30px auto;padding:30px;border:5px solid #ccc;background:#fff;} .main_nav{width:404px;height:30px;margin:0 auto;} .main_nav ul li{float:left;width:100px;height:30px;border-right:1px solid #666;position:relative;} .main_nav ul li a{display:block;height:30px;line-height:30px;text-align:center;background:#333;color:#ccc;text-decoration:none;} .submenu{position:absolute;left:0;top:30px;width:100px;display:none;} .submenu dd{height:31px;} .main_nav ul li dd a{display:block;height:30px;line-height:30px;text-align:center;color:#ccc;background:#333;border-bottom:1px solid #666;} .main_nav ul li dd a:hover{background:#555;color:#fff;} </style> </head> <body> <div id="content" class="demo"> <div class="main_nav hover"> <ul> <li><a class="link" href="javascript:" title="">关于我们</a> <dl class="submenu"> <dd><a href="javascript:" title="">栏目子导航1</a></dd> <dd><a href="javascript:" title="">栏目子导航1</a></dd> <dd><a href="javascript:" title="">栏目子导航1</a></dd> <dd><a href="javascript:" title="">栏目子导航1</a></dd> <dd><a href="javascript:" title="">栏目子导航1</a></dd> </dl> </li> <li><a class="link" href="javascript:" title="">新闻中心</a> <dl class="submenu"> <dd><a href="javascript:" title="">栏目子导航2</a></dd> <dd><a href="javascript:" title="">栏目子导航2</a></dd> <dd><a href="javascript:" title="">栏目子导航2</a></dd> <dd><a href="javascript:" title="">栏目子导航2</a></dd> <dd><a href="javascript:" title="">栏目子导航2</a></dd> </dl> </li> <li><a class="link" href="javascript:" title="">联系我们</a> <dl class="submenu"> <dd><a href="javascript:" title="">栏目子导航3</a></dd> <dd><a href="javascript:" title="">栏目子导航3</a></dd> <dd><a href="javascript:" title="">栏目子导航3</a></dd> <dd><a href="javascript:" title="">栏目子导航3</a></dd> <dd><a href="javascript:" title="">栏目子导航3</a></dd> </dl> </li> <li><a class="link" href="javascript:" title="">雁过留声</a> <dl class="submenu"> <dd><a href="javascript:" title="">栏目子导航4</a></dd> <dd><a href="javascript:" title="">栏目子导航4</a></dd> <dd><a href="javascript:" title="">栏目子导航4</a></dd> <dd><a href="javascript:" title="">栏目子导航4</a></dd> <dd><a href="javascript:" title="">栏目子导航4</a></dd> </dl> </li> </ul> </div> </div> </body> </html>

运行代码