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

示例设计

也作为演示小提琴

4

2 回答 2

2

我认为我对问题的理解足以提供解决方案。

绝对定位元素和浮动元素可以重叠。当点击 ☰ 时，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()计算以删除与查询具有相同宽度的垂直导航类，因为当以前的垂直菜单在更改为水平菜单之前可能会消失时，存在宽度。@media100px

更新的答案（基于要求的设计）

使用添加的信息，此解决方案可以更加简洁，我还可以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;
});
于 2013-10-29T10:37:57.910 回答
1

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

#menu_wrapper{ 
/* menu style */ 
}
#logo{ 
/* logo style */ 
display:none;
}
@media (max-width: 800px) {
  #menu_wrapper { display:none }
  #logo { display:block }
}
于 2013-10-29T09:22:13.657 回答