960網格中的中心菜單

我一直在研究960網格（http://960.gs/），並且使用了幾年前我過去使用過的舊式菜單，出於某種原因在960網格中，菜單向左漂移，我希望它居中。960網格中的中心菜單

ul#menu { 
width:940px; 
height:61px; 
background: url(../images/menu_bg.png) no-repeat; 
list-style:none; 
padding-top:0; 
padding-left:0; 
margin: 0; 
} 

ul#menu li { 
float:left; 
} 

ul#menu li a { 
background: url(../images/menu_splice_color.png) no-repeat scroll top left; 
display:block; 
height:61px; 
position:relative; 
} 

ul#menu li a.shel { 
width:135px; 
} 

ul#menu li a.golf { 
width:84px; 
background-position:-135px 0px; 
} 
ul#menu li a.pro { 
width:119px; 
background-position:-219px 0px; 
} 
ul#menu li a.event { 
width:94px; 
background-position:-338px 0px; 
} 
ul#menu li a.member { 
width:148px; 
background-position:-432px 0px; 
} 
ul#menu li a.bistro { 
width:91px; 
background-position:-580px 0px; 
} 
ul#menu li a.contact { 
width:115px; 
background-position:-671px 0px; 
} 

ul#menu li a span { 
    background: url(../images/menu_splice_color.png) no-repeat scroll bottom left; 
    display:block; 
    position:absolute; 
    top:0; 
    left:0px; 
    height:100%; 
    width:100%; 
    z-index:100; 
} 

ul#menu li a.shel span { 
background-position:0px -61px; 
} 

ul#menu li a.golf span { 
background-position:-135px -61px; 
} 
ul#menu li a.pro span { 
background-position:-219px -61px; 
} 
ul#menu li a.events span { 
background-position:-338px -61px; 
} 
ul#menu li a.member span { 
background-position:-432px -61px; 
} 
ul#menu li a.bistro span { 
background-position:-580px -61px; 
} 
ul#menu li a.contact span { 
background-position:-672px -61px; 
}

和我一般的HTML標記

<div class="container_16"> 



    <!-- Navigation Start --> 
    <div class="grid_16"> 
     <ul id="menu"> 
      <li><a href="#" class="shel"><span></span></a></li> 
      <li><a href="#" class="golf"><span></span></a></li> 
      <li><a href="#" class="pro"><span></span></a></li> 
      <li><a href="#" class="events"><span></span></a></li> 
      <li><a href="#" class="member"><span></span></a></li> 
      <li><a href="#" class="bistro"><span></span></a></li> 
      <li><a href="#" class="contact"><span></span></a></li> 
     </ul> 
    </div> 
    <div class="clear"></div> 

</div>

而且使用jQuery動畫翻轉圖像。

$(function() { 

    $("ul#menu span").css("opacity","0"); 

    $("ul#menu span").hover(function() { 

     $(this).stop().animate({ 
      opacity: 1 
     }, "slow"); 
    }, 

    function() { 

     $(this).stop().animate({ 
      opacity: 0 
     }, "slow"); 
    }); 
});

來源

2012-04-15 Kyle Monti

你的選擇，但它看起來像這樣的網格系統在設計2006/7回來。從那以後，事情發生了很大變化。你可能想要尋找更現代的東西。 – mrtsherman 2012-04-15 04:01:42

您認爲我應該關注設計？我的意思是我可以自己從頭開始並定位事情，但您認爲我應該去尋找新的系統？ – 2012-04-15 04:10:46

我仍然在一些項目中使用960網格框架，雖然我現在更頻繁地使用[twitters bootstrap]（http://twitter.github.com/bootstrap/），因爲它很性感：P – 2012-04-15 05:26:53

將菜單包裝在容器中並將其設置爲position: relative。然後將絕對位置從#menu從左邊的50％和margin-left: -(outerWidth/2)。

像這樣的東西應該工作：

<nav id="container"> 
    <ul id="menu"> 
    ... 
    </ul> 
</nav>

CSS：

#container { position: relative; }

JQ：

var $menu = $('#menu'), 
    menuWidth = $menu.outerWidth(); 

$menu.css({ 
    position: 'absolute', 
    left: '50%', 
    margin-left: -(menuWidth/2) 
});

來源

2012-04-15 03:59:42 elclanrs

似乎沒有工作。我取消了動畫效果並開始播放，好像它已經被解僱了一樣。所以所有圖像都在頁面加載上滾動。 – 2012-04-15 04:19:23

我發現解決這個問題的最簡單的方法是從_menu_的總寬度和**減去它從列表項目的總寬度中獲取空間，使其不被佔用。然後，我**將_menu_的總寬度除以剩下的一半空間以獲得一個百分比。然後我將它添加爲'padding-left'。在每個瀏覽器IE6-9，chrome，opera，firefox和safari中成功運行。 – 2012-04-15 05:59:17

我給你一個正確的答案，因爲你告訴我如何處理我的代碼正是我所做的，但是，我用百分比做了它，並將其添加到CSS。 – 2012-04-15 06:00:53

只要定義你的菜單項display:inline-block，而不是浮動他們的左，通過將text-align:center屬性提供給容器來將它們對齊到中心你的菜單，就像這樣：

CSS

.container_16 { 
    text-align: center; 
} 

ul#menu li { 
    display: inline-block; 
    *display:inline; /* ie7 hack, since it doesn't support inline-block */ 
}

來源

2012-04-15 05:25:32

960網格中的中心菜單

回答

相關問題