4

メニューとサブメニューが水平方向に中央に配置されているが、div がページ幅全体に拡張されている、作業中の Web サイトのソリューションを作成しようとしています。

まず、サンプル HTML を次に示します。

<div id="menu-container" class="full-width">
    <nav id="nav1" class="normal-width">
        <ul class="main-menu">
            <li id="item1">
                <a href="#">item 1</a>

                <ul class="sub-menu">
                    <li id="item11">
                        <a href="#">item 1.1</a>
                    </li>

                    <li id="item12">
                        <a href="#">item 1.2</a>
                    </li>

                    <li id="item13">
                        <a href="#">item 1.3</a>
                    </li>

                </ul>
            </li>

            <li id="item2">
                <a href="#">item 2</a>

                <ul class="sub-menu">
                    <li id="item21">
                        <a href="#">item 2.1</a>
                    </li>

                    <li id="item22">
                        <a href="#">item 2.2</a>
                    </li>
                </ul>
            </li>

            <li id="item3">
                <a href="#">item 3</a>
            </li>

        </ul>
    </nav>
</div>

このメニューの CSS は次のとおりです。

.full-width {
    width: 100%;
}

.normal-width {
    width: 1024px;
    margin: 0 auto 0 auto;
}

a {
    color: black;
    text-decoration: none;
}

.clear {
    clear: both;
}

.main-menu {
    list-style-type: none;
    margin: 0;
    padding: 0;

    position: relative;
    background-color: red;
}

.main-menu > li {
    float:left;
    margin-right:2em;
}

.sub-menu {
    list-style-type: none;
    margin: 0;
    padding: 0;

    display:none;
    background-color: orange;
}

.sub-menu li {
    float:left;
    margin-right:2em;
}

.main-menu > li.selected {
    background-color:orange;
}

.main-menu > li.selected .sub-menu {
    display:block;
    position:absolute;
    left:0;
    right:0;
}

関連する jQuery は次のとおりです。

// Add a clear div to allow adding background color to main-menu
$(".main-menu").append("<div class='clear'></div>");

// Make the first class selected
$(".main-menu > li:first").addClass("selected");

// Switch the selected class
$(".main-menu > li").click(function() {
    $(".selected").removeClass("selected");
    $(this).addClass("selected");
});

// Disable menu links
$(".main-menu > li > a").click(function(e) {
    e.preventDefault();
});

すべてが素晴らしくダンディで、適切な水平メニューが作成されます。私が苦労していて作成できないのは、この写真でわかるものです。 ここに画像の説明を入力

画像については、次の点に注意してください。

  1. 画像の周りの黒い太い境界線は、Web ページのフル サイズと幅 (つまり、ブラウザー ウィンドウの境界線) です。

  2. 中央の紫色の細い縦線は見えません。コンテンツがどこにあるかを示すために画像に表示されています。つまり、紫色の線の左端または右端にはコンテンツがありません。

  3. 最上位のメニュー項目の背景は赤です

  4. サブメニューは、オレンジ色の背景の領域に表示されます

さて、問題に：

赤と黄色の背景が Web ページの端まで伸びていることに注目してください。これらのページのアイテムは、紫色の線の内側のコンテンツ領域に表示されます。これは私が達成しようとしていることですが、できません。背景を Web ブラウザーの端 (つまり、ページ全体の幅) まで拡張できません。私のソリューションは、赤とオレンジの背景を中央に配置します。

4

5 に答える 5

3

I am adding the final answer here, for the sake of ensuring that every one sees the answer I chose (i.e, for the greater good).

This answer is inspired by GraphicO, with modifications:

The HTML:

<nav>
    <ul class="main-menu" >
        <li id="item1">
            <a href="#">item 1</a>

            <div>
                <ul class="sub-menu">
                    <li id="item11">
                        <a href="#">item 1.1</a>
                    </li>

                    <li id="item12">
                        <a href="#">item 1.2</a>
                    </li>

                    <li id="item13">
                        <a href="#">item 1.3</a>
                    </li>

                </ul>
            </div>
        </li>

        <li id="item2">
            <a href="#">item 2</a>

            <div>
                <ul class="sub-menu">
                    <li id="item21">
                        <a href="#">item 2.1</a>
                    </li>

                    <li id="item22">
                        <a href="#">item 2.2</a>
                    </li>
                </ul>
            </div>
        </li>

        <li id="item3">
            <a href="#">item 3</a>
        </li>

    </ul>
</nav>

Then, the CSS:

a {
    color: black;
    text-decoration: none;
}

nav {
    position: relative;
    width: 100%;

    background-color: red;
}

.main-menu {
    margin: 0 auto;
    width: 1024px;

    list-style: none;
}

.main-menu > li {
    display: inline-block;
    margin-right: 2em;
}

.main-menu > li.selected {
    background-color: yellow;
}

.main-menu > li > div { /* nested div (containing the sub nav) will be hidden by default */
    width: 100%;

    position: absolute;
    left: 0;

    background-color: yellow;
    display:none;
}

.main-menu > li.selected > div {
    display: inline;
}

.sub-menu {
    list-style: none;

    margin: 0 auto;
    width: 1024px;
}

.sub-menu > li {
    display: inline-block;
    margin-right: 2em;
}

And finally the jQuery:

// Make the first class selected
$(".main-menu > li:first").addClass("selected");

// Switch the selected class
$(".main-menu > li").click(function() {
    $(".selected").removeClass("selected");
    $(this).addClass("selected");
});

// Disable menu links
$(".main-menu > li > a").click(function(e) {
    e.preventDefault();
});

Thanks.

于 2013-08-22T21:49:37.177 に答える
1

HTML と JavaScript を少し変更すると、次のメニューがうまく機能します (IE7-10、Chrome、Firefox、Opera、および Safari でテスト済み)。

HTML

<div id="menu-container" class="full-width">
    <div class="full-width-bg"></div>  <!-- this additional div makes red background -->
    <ul class="main-menu normal-width">
        ... etc ...
    </ul>
</div>

CSS

.full-width {
    width: 100%;
    background: orange;
    border:1px solid green;
    position:relative;
    z-index:1;
    height:3em;
    font-size:21px;
}
.full-width-bg {
    width:100%;
    background: red;
    height:50%;
    position:absolute;
    left:0;
    top:0;
    z-index:2;
}
.normal-width {
    width: 1024px;
    margin: 0 auto;
    z-index:3;
    position:relative;
}
.full-width, .full-width-bg {
    min-width: 1024px;
}
ul.main-menu li {
    float:left;
    padding:0;
    margin:0;
    height:100%;
    position:static;
    text-align:center;
}
ul.main-menu, ul.main-menu ul {
    list-style-type:none;
    height: 1.5em;
    margin: 0 auto;
    padding: 0;
}
ul.main-menu a {
    text-decoration:none;
    display:inline-block;
    *display:inline; zoom:1; /* IE7 fix */
    width:100%;
    padding:0;
    max-height: 1.5em;
}
ul.main-menu > li {
    background-color:red;
}
ul.main-menu > li > ul > li {
    background-color:orange;
}
ul.main-menu > li > ul > li:hover {
    background-color:yellow;
}
ul.main-menu > li > ul > li:hover > a {
    color:red;
}
ul.main-menu > li > ul {
    position:absolute;
    top:100%;
    left:0px;
    width:100%;
}
.main-menu > li.selected,
ul.main-menu > li:hover > a {
    background-color:#d00;
    color:white;
}
ul.main-menu > li > ul {
    display:none;
    z-index:4;
}
ul.main-menu > li:hover > ul {
    display:block;
    z-index:5;
}

jQuery

$(function () {
    var items = $('.main-menu>li');
    var maxitems = 5; //items.length;
    var current = items[0];
    $('.main-menu li').css('width', (100 / maxitems | 0) + '%');
    items.mouseenter(function(e) {
        $(current).removeClass('selected').children('ul').hide();
        current = this;
        $(current).addClass('selected').children('ul').show();
    });
    items.children('ul').show().end().eq(0).trigger('mouseenter');
});

JSFiddle : http://jsfiddle.net/X7T94/12/ - このメイン メニューには、5 つのメニュー リンク用の場所が確保されています (javascript を参照) 。

于 2013-08-14T23:41:08.710 に答える
1

私があなたの質問を理解していれば、これであなたはうまくいくはずです：

http://jsfiddle.net/X7T94/

class="active"アクティブなアイテムとして必要なメイン メニュー li を配置する必要があります。HTML の残りの部分は同じです。CSS:

.full-width {
    width: 100%;
}

.normal-width {
    width: 1024px;
    margin: 0 auto 0 auto;
}
.main-menu > li {
    float:left;
    list-style-type:none;
    padding-right:30px;
}
.sub-menu {
    display:none;
}
.sub-menu li {
    float:left;
    padding-right:30px;
}
.main-menu li.active {
    background-color:blue;
}
.main-menu > li.active .sub-menu {
    display:block;
    position:absolute;
    left:0;
    right:0;
    background-color:blue;
}

明らかに、それは完璧でも美しいものでもありませんが、あなたを道に導くはずです.

于 2013-08-14T20:45:04.983 に答える
0

クラス.normal-width(1024px の幅を定義) は、メニュー (幅 100% にしたい) ではなく、コンテンツ上にある必要があります。

したがって、メニューから削除して、コンテンツに追加するだけです。次のようにします。

<div id="menu-container" class="full-width">
   <nav id="nav1">
      ...
   </nav>   
</div>
<div class="content normal-width">Content goes here</div>

フィドル

于 2013-08-19T06:48:07.887 に答える