CSS 全页横向菜单和横向子菜单 [英] CSS full-page-width horizontal menu and horizontal submenu

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

问题描述

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

首先，这是一个示例 HTML:

这个菜单的 CSS 是:

.full-width {宽度:100%；}.正常宽度{宽度:1024px；边距:0 自动 0 自动；}一个 {颜色:黑色;文字装饰:无；}.清除 {清楚:两者；}.主菜单 {列表样式类型:无；边距:0；填充:0；位置:相对；背景颜色:红色；}.主菜单 >李{向左飘浮;边距右:2em;}.子菜单{列表样式类型:无；边距:0；填充:0；显示:无；背景颜色:橙色；}.sub-menu li {向左飘浮;边距右:2em;}.主菜单 >li.selected {背景颜色:橙色；}.主菜单 >li.selected .sub-menu {显示:块；位置:绝对；左:0;右: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("选中");});//禁用菜单链接$(".main-menu > li > a").click(function(e) {e.preventDefault();});

所有这些都很好，而且创建了一个适当的水平菜单.我正在苦苦挣扎并且无法创建的是您在这张图片中可以看到的内容:

注意以下图片:

  1. 图片周围的黑色粗边框是网页的全尺寸和宽度(即浏览器窗口边框)

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

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

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

现在，问题来了:

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

解决方案

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

这个答案的灵感来自GraphicO，经过修改:

HTML:

<li id="item2"><a href="#">项目 2</a><div><ul class="子菜单"><li id="item21"><a href="#">项目 2.1</a><li id="item22"><a href="#">项目 2.2</a>

<li id="item3"><a href="#">第 3 项</a></nav>

然后，CSS:

a {颜色:黑色;文字装饰:无；}导航{位置:相对；宽度:100%；背景颜色:红色；}.主菜单 {边距:0 自动；宽度:1024px；列表样式:无；}.主菜单 >李{显示:内联块；右边距:2em；}.主菜单 >li.selected {背景颜色:黄色；}.主菜单 >立>div {/* 嵌套的 div(包含子导航)将默认隐藏 */宽度:100%；位置:绝对；左:0；背景颜色:黄色；显示:无；}.主菜单 >li.selected >div {显示:内联；}.子菜单{列表样式:无；边距:0 自动；宽度:1024px；}.子菜单 >李{显示:内联块；右边距:2em；}

最后是 jQuery:

//选择第一个类$(".main-menu > li:first").addClass("selected");//切换选中的类$(".main-menu > li").click(function() {$(".selected").removeClass("selected");$(this).addClass("选中");});//禁用菜单链接$(".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天全站免登陆