CSS全页宽度水平菜单和水平子菜单 [英] CSS full-page-width horizontal menu and horizontal submenu

查看：142
本文介绍了CSS全页宽度水平菜单和水平子菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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



首先，这里是一个HTML示例：

  div id =menu-containerclass =full-width> 
< nav id =nav1class =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 =＃>项目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 =＃>项目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>李{
 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相关联的是：

  //添加一个清除的div以允许向主菜单添加背景颜色
 $（。main-menu）append（< div class ='clear'>< / div>）; 
 
 //选择第一个类
 $（。main-menu> li：first）。addClass（selected）; 
 
 //切换所选的类
 $（。main-menu> li）click（function（）{
 $（。selected）。removeClass （selected）; 
 $（this）.addClass（selected）; 
}）; 
 
 //禁用菜单链接
 $（。main-menu> li> a）。click（function（e）{
 e.preventDefault 
}）;

所有的都是漂亮和dandy，并创建一个合适的水平菜单。我遇到的困难，我无法创建是你可以看到在这张图片：



请注意以下有关图片：


  1. 图片周围的黑色粗边框是网页的完整大小和宽度（即浏览器窗口边框）


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



  4. 子菜单项将显示在橙色背景区域

    5. >

现在，对于问题：



注意红色和黄色背景会延伸到网页边缘，但这些页面的项目会显示在紫色线内的内容区域中。这是我想实现，但无法。我无法将背景扩展到Web浏览器的边缘（即，整页宽度）。 我的解决方案将红色和橙色背景置于中间。

解决方案

这里，为了确保每个人都看到我选择的答案（即，更大的好）。



这个答案是从GraphicO的灵感， / p>

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 =＃>项目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 =＃>项目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; 
} 
 
。主菜单{
 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 {/ *嵌套的div（包含子导航）将被默认隐藏* / 
 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菜单> li {
 display：inline-block; 
 margin-right：2em; 
}

最后jQuery：

  //选择第一个类
 $（。main-menu> li：first）。addClass（selected）; 
 
 //切换所选的类
 $（。main-menu> li）click（function（）{
 $（。selected）。removeClass （selected）; 
 $（this）.addClass（selected）; 
}）; 
 
 //禁用菜单链接
 $（。main-menu> li> a）。click（function（e）{
 e.preventDefault 
}）;

感谢。


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.

First off, here is a sample 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:

.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:

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

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.

解决方案

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.

这篇关于CSS全页宽度水平菜单和水平子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆