4

我正在尝试为我正在开发的网站创建一个解决方案，其中菜单和子菜单水平居中，但 div 扩展到整个页面宽度。

首先，这是一个示例 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. 图片周围的黑色粗边框是网页全尺寸和宽度（即浏览器窗口边框）

  2. 中间的细垂直紫色线不可见，它们在图片中显示内容将在哪里，即没有内容会越过紫色线的最左侧或最右侧

  3. 顶级菜单项具有红色背景

  4. 子菜单将出现在橙色背景的区域中

现在，问题：

请注意红色和黄色背景如何延伸到网页边缘，而这些页面的项目却出现在紫色线条内的内容区域内。这就是我想要实现但无法实现的。我无法将背景扩展到网络浏览器的边缘（即整页宽度）。我的解决方案将红色和橙色背景居中。

4

5 回答 5

4

这是我想出的解决方案。

已编辑：我复制了我对帖子的回答，而不是链接到 jsfiddle...对不起模组：/

CSS：

html, body, div, ul, li, a {margin: 0; padding: 0; border: 0;}
body {
    background-color: #000;
}
nav {
    background-color: #fff;
    position: relative;
    width: 100%;
}
ul {
    list-style: none;
    width: 100%;
}
li {
    display: inline-block;
}
a {
    display: block;
    padding: 0.25em 1em;
}
nav > ul {
    margin: 0 auto;
    width: 1024px;
}
nav ul li div { /* nested div (containing the sub nav) will be hidden by default */
    background-color: #ccc;
    width: 100%;
    position: absolute;
    left: -9999px;
}
nav ul li div ul {
    margin: 0 auto;
    width: 1024px;
}
nav > ul > li:hover > a {  /* swap ":hover" with ".active" to allow this to work as a class */
    background-color: #ccc;
}
nav > ul > li:hover > div { /* swap ":hover" with ".active" to allow this to work as a class */
    left: 0;
}

HTML：

<nav>
        <ul class="nav">
            <li>
                <a href="#">item 1</a>
                <div>
                    <ul>
                        <li>
                            <a href="#">item 1.1</a>
                        </li>

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

                        <li>
                            <a href="#">item 1.3</a>
                        </li>
                    </ul>
                </div>
            </li>

            <li>
                <a href="#">item 2</a>
                <div>
                    <ul>
                        <li>
                            <a href="#">item 2.1</a>
                        </li>

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

            <li class="active">
                <a href="#">item 3</a>
                <div>
                    <ul>
                        <li>
                            <a href="#">item 3.1</a>
                        </li>

                        <li>
                            <a href="#">item 3.2</a>
                        </li>
                    </ul>
                </div>
            </li>

            <li>
                <a href="#">item 4</a>
                <div>
                    <ul>
                        <li>
                            <a href="#">item 4.1</a>
                        </li>

                        <li>
                            <a href="#">item 4.2</a>
                        </li>

                        <li>
                            <a href="#">item 4.3</a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </nav>

看一看，自己测试一下，看看它是否能解决你的问题。

笔记：

  • 我:hover在 css 中使用过，这样您就可以实际看到正在发生的变化。
  • 要以您想要的方式实现这一点，您需要将“活动”类硬编码到您的顶级列表项......或者......您可以使用一些javascript来更动态地完成它。
  • 你会看到我留下评论的最后两行 css ......只需:hover将.active
  • 我唯一需要添加到 html 的是一些容器 div 来包装每个子菜单。这是我能找到的唯一方法，使您的子导航在页面上居中..同时允许颜色带在页面上伸展。

我的 css 可能有点乱，但那只是因为我把它放在一起了。您可以按照自己希望的方式对其进行样式设置。

希望你喜欢！如果您需要任何澄清，请告诉我。

编辑：哦忘了提..我摆脱了你在那里的所有id和类，它们不需要功能......但是如果你想将特定颜色与特定子菜单相关联，那么你会想要放几个id。

于 2013-08-17T18:19:52.777 回答
3

我在这里添加最终答案，以确保每个人都能看到我选择的答案（即，为了更大的利益）。

这个答案的灵感来自于 GraphicO，并进行了修改：

的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>

然后，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;
}

最后是 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();
});

谢谢。

于 2013-08-22T21:49:37.177 回答
1

如果我理解你的问题，这应该会让你上路：

http://jsfiddle.net/X7T94/

它确实需要放置class="active"您想要作为活动项目的主菜单。您的 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 回答
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 回答
0

您的课程.normal-width（定义宽度为 1024 像素）需要在您的内容上而不是在您的菜单上（您希望为 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 回答