Html CSS 全页横向菜单和横向子菜单

CSS full-page-width horizontal menu and horizontal submenu

提问by Greeso

I am trying to create a solution for a website I am working on in which menus and sub-menus are horizontally centred, but the divs extend to full page width.

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

First off, here is a sample HTML:

首先，这是一个示例 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>

The CSS for this menu is:

这个菜单的 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;
}

And the jQuery associated is:

和 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();
});

All that is nice and dandy, and a proper horizontal menu is created. What I am struggling with and I am unable to create is what you can see in this picture:

所有这些都很好，很花哨，并创建了一个适当的水平菜单。我正在努力并且无法创建的是您在这张图片中可以看到的内容：

Note the following about the picture:

关于图片，请注意以下几点：

1. The black thick border around the picture is the webpage full size and width (i.e, the browser window borders)

2. The thin vertical purple lines in the middle are not visible, they are in the picture to show you where the content would be, i.e, no content will go over to the far left or far right sides of the purple lines

3. The top level menu items have the red background

4. The sub menues will appear in the area with the orange background

1. 图片周围黑色粗边框为网页全尺寸和全宽（即浏览器窗口边框）

2. 中间的细垂直紫色线不可见，它们在图片中向您展示内容所在的位置，即没有内容会移动到紫色线的最左侧或最右侧

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

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

Now, to the problem:

现在，问题来了：

Notice how the red and yellow backgrounds extend to the webpage edges, yet the items of those pages appear within the content area inside the purple lines. This is what I am trying to achieve but unable to. I am unable to extend the backgrounds to the edges of the web browser (i.e., full-page width). My solutoin centres the red and orange backgrounds in the middle.

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

采纳答案by Greeso

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:

这个答案受到 GraphicO 的启发，并进行了修改：

The HTML:

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:

然后，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:

最后是 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.

谢谢。

回答by Grapho

Here is the solution I came up with.

这是我想出的解决方案。

Edited: I copied my answer to the post, rather than linking to jsfiddle... sorry mods :/

编辑：我复制了我对帖子的回答，而不是链接到 jsfiddle ......抱歉 mods ：/

CSS:

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:

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>

Take a look, test it on your own and see if it will solve your problem.

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

Notes:

笔记：

• I used :hoverin the css, just so you can actually see the changes taking place.
• To implement this the way you want to do it, you will either need to hard-code the class "active" to your top level list items... OR... you could use some javascript to do it more dynamically.
• you will see the last two lines of css where i left comments... just replace the :hoverwith .active
• the only thing that I needed to add to the html were some container divs to wrap each sub menu. this was the only way i could find to center your sub nav on the page.. while allowing a band of color to stretch across the page.

• 我:hover在 css 中使用了，这样你就可以真正看到发生的变化。
• 要以您想要的方式实现这一点，您需要将“活动”类硬编码到您的顶级列表项中……或者……您可以使用一些 javascript 来更动态地执行此操作。
• 你会看到这里的CSS我离开的意见的最后两行...只需更换:hover与.active
• 我唯一需要添加到 html 的是一些容器 div 来包装每个子菜单。这是我能找到的将您的子导航居中在页面上的唯一方法......同时允许一条颜色带在页面上伸展。

my css might be a bit messy, but thats just because I kinda threw it together. It is up to you to style it they way you want it to look.

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

Hope you like it! Let me know if you need any clarification.

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

Edit: oh forgot to mention.. I got rid of all the id's and classes you had in there, they weren't needed for the functionality... but if you want to associate specific colors with specific sub menus, then you will want to put a few id's back in.

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

回答by Tim Wasson

If I understood your question, this should get you on your way:

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

http://jsfiddle.net/X7T94/

http://jsfiddle.net/X7T94/

It does require putting class="active"on the main-menu li that you want as the active item. The rest of your HTML is the same. CSS:

它确实需要将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;
}

Obviously it isn't perfect or beautiful, but it should get you on your way.

显然它并不完美或美丽，但它应该让你继续前进。

回答by Stano

With a bit modified HTML and javascript the following menu works well (tested with IE7-10, Chrome, Firefox, Opera and Safari):

对 HTML 和 javascript 稍加修改后，以下菜单运行良好（使用 IE7-10、Chrome、Firefox、Opera 和 Safari 进行测试）：

HTML

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

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

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/- this main menu reserves place for 5 menu links (see javascript)

JSFiddle：http: //jsfiddle.net/X7T94/12/- 这个主菜单保留了 5 个菜单链接的位置（见 javascript）

回答by Danield

Your class .normal-width(which defines a width of 1024px) needs to be on your content not on your menu (which you want to be 100% width)

您的类.normal-width（定义了 1024 像素的宽度）需要在您的内容上，而不是在您的菜单上（您希望其宽度为 100%）

So simply remove it from your menu, and add it to your content - like so:

因此，只需将其从菜单中删除，然后将其添加到您的内容中 - 如下所示：

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

FIDDLE

小提琴