0

私は 960 グリッド (http://960.gs/) に取り組んでおり、数年前から過去に使用した古いスタイルのメニューを使用しましたが、何らかの理由で 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");
    });
});
4

2 に答える 2

1

メニューをコンテナにラップし、 に設定し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-15T03:59:42.363 に答える
0

次のように、メニュー項目を左にフローティングする代わりに定義し、メニューのコンテナーにプロパティを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-15T05:25:32.310 に答える