Question

我希望如此，当窗口在800px宽或低于<div>时隐藏菜单320px并显示菜单图标☰，点击图标后我想要菜单以简洁的布局显示，以便iPhone可以在<div id="header"> <div class="wrap"> <div id="logo"> <p>LOGO HERE</p> </div> <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> </div>，

查看

这是我目前的HTML。

{{1}}

example design

同样作为demo fiddle

Answer 1

我认为我理解这个问题足以提供解决方案。

绝对定位和浮动元素可以重叠。当点击☰时，元素被赋予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当之前的垂直菜单在更改为水平菜单之前可能会消失。

更新回答（基于请求的design）

通过添加的信息，此解决方案可以更清晰，我也可以从原始答案中删除display: table-cell（左下方）。

Updated demo

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

与下面的原始答案相同。

原始回答

请参阅this demo或以下代码。

<强> 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;
});

Answer 2

您应该使用媒体查询。像这样的东西：

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

响应式设计布局CSS菜单位置与标题徽标重叠

2 个答案: