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/を参照してください。

ここでは CSSfloatは必要ありません。値を置き換えたり、値を表示し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 に答える