jquery - "Nag-Menu"设计的中心问题(css？)

Question

我有一个 CSS 问题(我相信是这样，也许是 JavaScript？)，其中有一些停留在顶部的“导航菜单”代码，我正在尝试适应我们的网站设计，以改进现有的静态菜单(正如通常所做的那样，在 UL/LI 元素上使用 CSS 制作。)

原始代码来自:1stwebdesigner.com 中名为/tutorials/create-stay-on-top-menu-css3-jquery/的“教程”页面

我已经在一个测试页面上将其调整到我们的网站(到目前为止)。

我们的旧式菜单可以在任何当前页面上看到，新版本的停留在顶部，用于测试的 nag-menu 页面在这里:

http://www.detroitblackjackteam.com/team-play.htm

有一个使用旧菜单的相同页面:

http://www.detroitblackjackteam.com/teamplay.htm

(注意类似的URL:只需去掉文件名中的连字符，teamplay.htm)

到目前为止，一切都工作得很好，除了我注意到新版本的菜单没有在浏览器放大或小屏幕上保持正确的居中位置(首先注意到在我的 iPhone 上检查网站时出现问题，但如果您将浏览器窗口设置得非常小并放大菜单...请参阅此处的屏幕截图示例:

http://www.detroitblackjackteam.com/files/ZoomProblem.jpg

<小时/>

我已经尽我所能地解决了这个问题，在浏览器中用 FireBug 戳戳它，但我一生都无法看到如何使两个菜单保持在同一位置的中心。

这可能很简单，但我只是想念它:-(

任何帮助/想法表示赞赏。另外，任何清理代码的想法都将受到赞赏，因为我知道我是从不同来源将其拼凑在一起的，并且在当前状态下，它可能不是世界上最有效的东西......;-)

复制下面的 CSS、HTML 和 JavaScript 代码块以供引用:

CSS

.bevelmenu { font: bold 13px Arial;   text-align: center;     
    padding: 9px 0 5px;   margin: 0;   width: 100%;      } 
.bevelmenu li {   list-style: none;   display: inline;   } 
.bevelmenu li a { padding: 9px 7px;   text-decoration: none;   color: #aaaaaa; } 
.bevelmenu li a:hover { color: #93D48C; 
    background-image: url("menubg.gif"); 
    background-repeat: no-repeat;   background-position: center center;        } 
/*  CSS for stay-on-top menu  */ 
    #menu    { 
      white-space:nowrap; 
      height: 30px; 
      text-align: center; 
      background-image:url("menu-bar.png"); 
      background-repeat:repeat; 
      background-attachment:scroll;           } 
    #navi    { 
      white-space:nowrap; 
      height: 30px; 
      text-align: center;                     } 
    .default { 
      width: 100%;                            } 
    .fixed   { 
      width: 100%;   
      top: 0; 
      left: 0;  
      position: fixed;  
      z-index: 4; 
      box-shadow: 0 0 36px #afffff;  
      -webkit-box-shadow: 0 0 36px #afffff;  
      -moz-box-shadow: 0 0 36px #afffff;      } 

HTML

<div id="navi"> 
 <div id="menu" class="default"> 
  <ul class="bevelmenu">
   <li><a href="http://www.detroitblackjackteam.com/">Home</a></li>
   <li><a href="http://www.detroitblackjackteam.com/bbs/">Forum</a></li>
   <li><a href="http://www.detroitblackjackteam.com/webmail.htm">Mail</a></li>
   <li><a href="http://www.detroitblackjackteam.com/cal.htm">Calendar</a></li>
   <li><a href="http://www.detroitblackjackteam.com/ratings/">Ratings</a></li>
   <li><a href="http://www.detroitblackjackteam.com/files/">Downloads</a></li>
   <li><a href="http://www.detroitblackjackteam.com/blog/">Blog</a></li>
   <li><a href="http://www.detroitblackjackteam.com/play/">Play!</a></li>
  </ul>
 </div><!-- close menu -->
</div><!-- close navi -->

JavaScript

<script type="text/javascript">
$(function(){
 var menu = $('#menu'),
  pos = menu.offset();
  $(window).scroll(function(){
   if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
     menu.fadeOut('fast', function(){
      $(this).removeClass('default').addClass('fixed').fadeIn('fast');
     });
   } else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
     menu.fadeOut('fast', function(){
      $(this).removeClass('fixed').addClass('default').fadeIn('fast');
     });
   }
  });
});
</script>

提前感谢您对此的任何和所有帮助/建议:-)

-DBJT

= - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - =

编辑、更新

我收到了此代码的原始开发人员的评论，他还没有时间真正为我查看它，但仍然回答了电子邮件询问。他说:

<!-- language: lang-none --> <!-- Copy From E-Mail Message -->
>>> That would suggest there's a problem with the offset 
>>> (menu is longer than the viewport when zoomed in, and the 
>>> script is not able to make a negative offset, to the menu 
>>> starts at 0 position in the viewport). Either that or it's 
>>> jQuery's fault. Well, not exactly fault, it's just that 
>>> there can be some compatibility issues; the script was 
>>> written over 3 years ago and uses an old version of jQuery 
>>> (newest at the time of writing), but browsers evolved 
>>> since then a lot. Some methods jQuery makes use of may 
>>> not be working correctly anymore... 

所以也许它比我想象的更复杂，JQuery 中的某些东西...或者...某些东西...

这里还没有回复我的问题吗？

真的很感激任何人对此的想法或提醒，任何如何缩小范围的想法，问题可能出在哪里......即使只是猜测。

= - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - =

** 编辑，再次更新;) **

忘记提及这也使用了 JQuery...我想这很重要，哈哈

我在问题中添加了一个“jquery”标签，并注意到它达到了 1.4.2 版本:

<script type="text/javascript"   
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" 
charset="utf-8">
</script>

再次感谢任何能够弄清楚这里发生了什么的人:)

-DBJT

Answer 1

设置CSS

.固定{最小宽度:542px;}

使其在两种情况下相似。