响应式设计布局CSS菜单位置重叠页眉标志

Question

响应式设计布局CSS菜单位置重叠页眉标志

3

我希望当窗口宽度小于或等于 800px 时，隐藏菜单 <div> 并显示菜单图标 ☰。点击图标后，我希望菜单以整齐的布局出现，以便 iPhone 可以在 320px 的屏幕上查看。

这是我当前的 HTML。

<div id="header">
    <div class="wrap">
        <div id="logo">
            <p>LOGO HERE</p>
        </div><!--logo-->
        <div id="menu_wrapper">
            <ul id="nav">
                <div id="homeBtn"><a href="index.php"><span id="homeBtnImg"></span></a></div>
                <li><a href="#">WORK</a></li>
                <li><a href="#">SERVICES</a></li>
                <li><a href="#">ABOUT</a></li>
                <li id="end"><a href="#">CONTACT</a></li>
            </ul>
        </div>
    </div><!--wrap-->
</div><!--header-->

示例设计

同时作为演示JSFiddle

- Stephen Jackson

你一直破坏这个东西，是怎么破坏的？应该长什么样子？你应该给我们一个例子，因为“整洁的布局”可以是任何东西。 - Gilly

根据设计图更新了我的答案。 - andyb

1

请提供需要翻译的英文内容。 - andyb

2个回答

1

您应该使用媒体查询。类似于以下内容：

#menu_wrapper{ 
/* menu style */ 
}
#logo{ 
/* logo style */ 
display:none;
}
@media (max-width: 800px) {
  #menu_wrapper { display:none }
  #logo { display:block }
}

- Miquel Las Heras

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- andyb · Accepted Answer

我认为我已经理解问题，并可以提供解决方案。

绝对定位和浮动元素可能会重叠。当点击☰时，该元素被赋予float:right，这也将使该元素具有display:block；这意味着它占据了100％的宽度，并将整个垂直导航向左推向标志。进一步的问题在于#logo渲染在菜单上方（此处z-index未起作用），因此☰不再看到点击，因为另一个元素被渲染在其上方。 z-index不起作用，因为定位元素会创建新的堆叠上下文-有关此内容的更多信息，请参见http://philipwalton.com/articles/what-no-one-told-you-about-z-index/。

在此处应该不需要CSS float，并且可以用inline-block或table-cell显示值替换它。我还在我的演示中删除了z-index。

最后，我已更改 $（window）.resize（） 计算以在与@media查询相同的宽度处删除垂直导航类，因为先前的垂直菜单在更改为水平菜单之前可能会消失100px的宽度。 更新的答案（基于所请求的设计）

有了添加的信息，这个解决方案可以更加简洁，并且我还可以从原始答案中删除display:table-cell（在下面留下）。 更新的演示 HTML

<div id="header">
    <div id="logo">
        <p>LOGO HERE</p>
        <span id="menu">&#9776;</span>
    </div>
    <ul id="nav">
        <li id="homeBtn"><a href="index.php"><span id="homeBtnImg"></span></a></li>
        <li><a href="#">WORK</a></li>
        <li><a href="#">SERVICES</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>
</div>

CSS

#header {
    background-color: #f06060;
    padding: 52px 0px;
}
#logo {
    display:inline-block;
    width: 348px;
    height: 57px;
    border:1px dotted black;
    position:relative;
}
#menu {
    position: absolute;
    right: 0;
    top: 15px;
    display:none;
}
#nav {
    list-style: none;
    padding: 0;
    display: inline-block;
}
#nav.vertical {
    display: block;
    padding-left: 20px;
}
#nav.vertical li {
    display: list-item;
    line-height: 40px;
}
#nav li {
    display:inline-block;
    padding-right: 40px;
}
#nav li:last-child {
    padding-right: 0;
}
@media screen and (max-width: 800px) {
    #menu {
        display: inline-block;
    }
    #nav {
        display: none;
    }
}

JavaScript

与原始答案相同。

原始答案

请参见此演示或下面的代码。

HTML

<div id="header">
    <div id="wrap">
        <div id="logo">
            <p>LOGO HERE</p>
        </div>
        <div id="menu_wrapper">
            <div id="menu">&#9776;</div>
            <ul id="nav">
                <li id="homeBtn"><a href="index.php"><span id="homeBtnImg"></span></a></li>
                <li><a href="#">WORK</a></li>
                <li><a href="#">SERVICES</a></li>
                <li><a href="#">ABOUT</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
        </div>
    </div>
</div>

CSS

#header {
    background-color: #f06060;
    padding: 52px 0px;
    display:table;
    width:100%;
}
#wrap {
    display:table-row;
}
#logo {
    display:table-cell;
    width: 338px;
    height: 57px;
}
#menu {
    display:none;
}
#menu_wrapper {
    display:table-cell;
    text-align:right;
    padding-right:5px;
}
#nav {
    list-style: none;
    padding: 0;
    text-align: left;
}
#nav.vertical {
    display: block;
}
#nav.vertical li {
    display: list-item;
    line-height: 40px;
}
#nav li {
    display:inline-block;
    padding-right: 40px;
}
#nav li:last-child {
    padding-right: 0;
}
@media screen and (max-width: 800px) {
    #menu {
        display: block;
    }
    #nav {
        display: none;
    }
}

JavaScript

$(window).resize(function(){
    if (window.innerWidth > 800) {
        $("#nav").removeClass('vertical');
    }
});

$("#menu").click(function(){
    $("#nav").toggleClass('vertical');
    return false;
});