一个二级菜单导航条的实例

?

HTML代码：

?

?

      <div id="menu">
        <ul>
          <li class="m_line"><%= image_tag("line2.gif") %></li>
          <li id="m_1" class='m_li_a'onmouseover='mover(1);' onmouseout='mout(1);'><a href="#">首页</a></li>
          <li class="m_line"><%= image_tag("line2.gif") %></li>
          <li id="m_2" class='m_li' onmouseover='mover(2);' onmouseout='mout(2);'><a href="#">功能模块</a></li>
          <li class="m_line"><%= image_tag("line2.gif") %></li>
          <li id="m_3" class='m_li' onmouseover='mover(3);' onmouseout='mout(3);'><a href="#">功能模块</a></li>
          <li class="m_line"><%= image_tag("line2.gif") %></li>
          <li id="m_4" class='m_li' onmouseover='mover(4);' onmouseout='mout(4);'><a href="#">功能模块</a></li>
          <li class="m_line"><%= image_tag("line2.gif") %></li>
          <li id="m_5" class='m_li' onmouseover='mover(5);' onmouseout='mout(5);'><a href="#">功能模块</a></li>
          <li class="m_line"><%= image_tag("line2.gif") %></li>
          <li id="m_6" class='m_li' onmouseover='mover(6);' onmouseout='mout(6);'><a href="#">功能模块</a></li>
          <li class="m_line"><%= image_tag("line2.gif") %></li>
          <li id="m_7" class='m_li' onmouseover='mover(7);' onmouseout='mout(7);'><a href="/home/manage">功能模块</a></li>
          <li class="m_line"><%= image_tag("line2.gif") %></li>
        </ul>
      </div>
      <div style="height:32px; background-color:#F1F1F1;">
        <ul class="smenu">
          <li style="padding-left:29px;" id="s_1" class='s_li_a'>首页</li>
          <li style="padding-left:141px;" id="s_2" class='s_li' ><a href="/">脚本管理</a>  |  <a href="#">脚本管理</a>  |  <a href="/">脚本管理</a>  </li>
          <li style="padding-left:252px;" id="s_3" class='s_li'><a href="/">任务管理</a>  |  <a href="/">任务管理</a>  |  <a href="#">任务管理</a>  </li>
          <li style="padding-left:362px;" id="s_4" class='s_li' ><a href="/">文件管理</a>  |  <a href="/">文件管理</a></li>
          <li style="padding-left:474px;" id="s_5" class='s_li' ><a href="/">测试计划</a>  |  <a href="#">测试计划</a></li>
          <li style="padding-left:447px;" id="s_6" class='s_li' ><a href="/">测试报告</a>  |  <a href="/">测试报告</a>  |  <a href="#">测试报告</a>  </li>
          <li style="padding-left:696px;" id="s_7" class='s_li' ><a href="/">服务器管理</a></li>
        </ul>
      </div>

?

js代码：

?

?

//初始化
var def="1";
function mover(object){
  
  //主菜单
  var mm=document.getElementById("m_"+object);
  mm.className="m_li_a";
  //初始主菜单隐藏效果
  if(def!=0){
    var mdef=document.getElementById("m_"+def);
    mdef.className="m_li";
  }
  //子菜单
  var ss=document.getElementById("s_"+object);
  ss.style.display="block";
  //初始子菜单隐藏效果
  if(def!=0){
    var sdef=document.getElementById("s_"+def);
    sdef.style.display="none";
  }
  def = object;
}

function mout(object){
  //主菜单
  var mm=document.getElementById("m_"+object);
  mm.className="m_li";
  //初始主菜单
  if(def!=0){
    var mdef=document.getElementById("m_"+def);
    mdef.className="m_li_a";
  }
  //子菜单
  var ss=document.getElementById("s_"+object);
  ss.style.display="none";
  //初始子菜单
  if(def!=0){
    var sdef=document.getElementById("s_"+def);
    sdef.style.display="block";
  }
}

?

CSS代码：

?

?