求解，导航实现这种效果，还要怎么改？？？？？？？？？？？？？？？？？？？？？

一、菜单超出指定宽度后，才出现向左向右的箭头。（只有一两个菜单没超出时，不显示箭头）
二、菜单动态增加后，向右箭头才能显示新动态增加的菜单：
增加了一个<li>Tab7</li>没显示~~$("#tabArea").animate({"left":"-123px"},1000); 这里问题，能自动判断吗？<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
<style type="text/css">
#slideTab{width:202px;margin:0; padding:0; position:relative;}
#tabHeader{width:200px;height:30px; float:left; margin:0; padding:0; border:0px solid #999;}
#tabHeader span{width:6px;height:16px;float:left;padding:7px 0;margin:0;background:#999;color:#FFFFFF;font:700 12px Verdana; cursor:pointer; overflow:hidden;}
#tabHeader div{margin:0; padding:0;width:188px;height:30px;float:left; overflow:hidden;position:relative;}
#tabArea{margin:0; padding:0;height:30px;width:9999px;left:0; top:0; position:absolute; z-index:2;}
#tabArea li{border:1px solid #999;margin:0; padding:4px 0; text-align:center;float:left;width:50px;height:20px; list-style:none;font:700 12px Verdana; background:#CCC; cursor:pointer;}
#Tab2, #Tab3, #Tab4, #Tab5, #Tab6{*position:absolute;*top:45px;left:0;top:30px;width:198px; height:200px;border-left:1px solid #999;border-right:1px solid #999;border-bottom:1px solid #999;font:700 30px Arial, Helvetica, sans-serif; text-align:center; display:none;float:left;}
#Tab1{width:198px; height:200px;border-left:1px solid #999;border-right:1px solid #999;border-bottom:1px solid #999;float:left;font:700 30px Arial, Helvetica, sans-serif; text-align:center; }
</style>
<title></title>
<script type="text/javascript">
$(document).ready(function(){
  $("#leftTab").mouseover(function(){
  $("#tabArea").animate({"left":"0"},1000);
  });
  
  $("#leftTab").mouseout(function(){
  $("#tabArea").stop();
  });
  
  $("#rightTab").mouseover(function(){
  $("#tabArea").animate({"left":"-123px"},1000);
  });
  
  $("#rightTab").mouseout(function(){
  $("#tabArea").stop();
  });  
   
  
  
});
</script></head><body>
<div id="slideTab">
<div id="tabHeader">
<span id="leftTab">&lsaquo;</span>
<div>
<ul id="tabArea">
<li>Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
<li>Tab4</li>
<li>Tab5</li>
<li>Tab6</li>
            <li>Tab7</li>
</ul>
</div>
<span id="rightTab">&rsaquo;</span>
</div></div></body>
</html>

解决方案 »

  1.   

    这个只有你自己去调节这个left了。。我设为-166px..就可以了。。但只是通过不断尝试弄出来的
      

  2.   


    因为动态添加的菜单，会增加很多，要自动适应才行第一个就是，比如宽200PX，菜单长度超过200PX，才出现向左向右箭头
      

  3.   

     第二个解决了第一个要怎么实现比如宽200PX，菜单长度超过200PX，才出现向左向右箭头
      

  4.   

    懒得看 LZ 的代码，说一下基本的思路：
    把菜单所在的 div 容器 overflow 样式设置为 hidden，宽度设置为固定值(px)，永远不出现滚动条。
    在菜单两端预先建好左、右箭头按钮，display 样式设置为 none。
    建立完菜单项后，比较 div 容器的 offsetWidth 和 scrollWidth 值，如果不相等，说明菜单项总宽度超出容器宽度，设置左、右箭头按钮的 display，使其显示。