求JavaScript的二级导航菜单例子

应用JavaScript脚本制作二级导航菜单
转自:http://www.phpzc.com/read.php?tid-621.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>应用JavaScript脚本制作二级导航菜单</title>
</head><body>
<table width="761" height="218" border="1" cellpadding="1" cellspacing="1" bordercolor="#FFFFFF" background="images/bg.jpg" bgcolor="#3F8701">
  <tr>
    <td valign="top"><table width="761" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td height="48" colspan="2"> </td>
      </tr>
      <tr>
        <td height="27" colspan="2" align="right"><table width="761" height="20" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td width="396"> </td>
            <td width="67" align="center"><a href="index.php">首页</a></td>
            <td width="75" align="center"><a href="#" onMouseMove="Lmenu('新品')">新品上架</a></td>
            <td width="75" align="center"><a href="#" onMouseMove="Lmenu('购物')">购物车</a></td>
            <td width="74" align="center"><a href="#" onMouseMove="Lmenu('会员')">会员中心</a></td>
            <td width="61" align="center"><a href="index.php">在线帮助</a></td>
            <td width="13"> </td>
          </tr>
        </table>                         </td>
      </tr>
      <tr>
        <td width="226" height="20" align="right"> </td>
        <td width="535" align="right"> <div id="submenu"> </div></td>
           <script language="javascript">
            function Lmenu(value){
                switch (value){
                    case "新品":
                        submenu.innerHTML=" <a href='#'>商品展示</a> | <a href='#'>销售排行榜</a> | <a href='#'>商品查询</a> ";
                        break;
                    case "购物":
                        submenu.innerHTML=" <a href='#'>添加商品</a> | <a href='#'>移出指定商品</a> |<a href='#'>清空购物车</a> | <a href='#'>查询购物车</a> | <a href='#'>填写订单信息</a> ";
                        break;
                    case "会员":
                        submenu.innerHTML=" <a href='#'>注册会员</a> | <a href='#'>修改会员</a> | <a href='#'>账户查询</a> ";
                        break;
                    }
            }
         </script>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>
如果您运行本实例后，并没有弹出二级菜单，那么请参见本论坛:解决浏览器不支持JavaScript问题”，
根据该节的详细步骤来检查您的机器设置。
颜色自己调整,
ie6,7 ff2,3通过div.menu{width:780px;}
.menu{width:780px;background:#000;height:25px;}
#nav *{padding:0px;margin:0px;}
#nav {height:25px;color:#fff;line-height: 25px;list-style-type: none; overflow:hidden;margin:0px;padding:0px;}
#nav a {display: block; width: 100px; text-align:center;font-weight:bold;}
#nav a:link, #nav a:visited {color:#fff;}
#nav a:hover {color:#ff9800;}
#nav li {float: left; width: 130px;overflow:hidden;}
#nav li ul {line-height: 27px; list-style-type: none;text-align:left;width: 130px; position: absolute;left: -999em;}
#nav li ul li{float: left; width: 130px;background: #eee;font-size:10px;}
#nav li ul a {display: block; width: 130px;text-align:left;font-size:11px;padding-left:10px;}
#nav li ul a:link, #nav li ul a:visited {color:#000; width:130px;}
#nav li ul a:hover {color:#ff9800;width:130px;}
#nav li:hover ul {left: auto;}
#nav li.sfhover ul {left: auto;}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="menu.css">
<script type=text/javascript>
function menuFix()
{
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++)
{
  sfEls[i].onmouseover=function()
  {
hideAll(this.id);
   this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  sfEls[i].onMouseDown=function()
  {
   this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  sfEls[i].onMouseUp=function()
  {
   this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  sfEls[i].onmouseout=function()
  {
   this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),"");
  }
  }
}//Hide all except current id
function hideAll(id)
{
   var sfEls = document.getElementById("nav").getElementsByTagName("li");
   for (var i=0; i<sfEls.length; i++)
   {
     if(sfEls[i].id != id)
     {
sfEls[i].className = sfEls[i].className.replace(new RegExp("( ?|^)sfhover\\b"),"");
     }
   }
}
window.onload=menuFix;
</script>
</head>
<body>
<div class='menu'>
<ul id="nav">
<li id="menu2"><a href='xxx'>111</a>
  <ul>
    <li id="menu19">
      <a href='xxxx'>111222</a>
    </li>
    <li id="menu17">
     <a href='xxx'>1111333</a>
    </li>
  </ul>
</li>
<li id="menu2"><a href='xxx'>111</a>
  <ul>
    <li id="menu19">
      <a href='xxxx'>111222</a>
    </li>
    <li id="menu17">
     <a href='xxx'>1111333</a>
    </li>
  </ul>
</li>
<li id="menu2"><a href='xxx'>111</a>
  <ul>
    <li id="menu19">
      <a href='xxxx'>111222</a>
    </li>
    <li id="menu17">
     <a href='xxx'>1111333</a>
    </li>
  </ul>
</li>
<li id="menu2"><a href='xxx'>111</a>
  <ul>
    <li id="menu19">
      <a href='xxxx'>111222</a>
    </li>
    <li id="menu17">
     <a href='xxx'>1111333</a>
    </li>
  </ul>
</li>
</ul>
</div>
</body>

调试易

求JavaScript的二级导航菜单例子

解决方案 »