1

私が何をしたいのかを説明するために最善を尽くします。私が持っているコードを示してください。私が助けを得ることができれば幸いです。

そのため、画面の左側からスライドナビゲーションUIを実行しようとしています（多くのモバイルアプリのように）。メインコンテンツがスライドし、下にナビゲーションメニューが表示されます。

現在、ブラウザは画面が広くなっていると判断し、水平スクロールバーを導入しています。しかし、私はそれが起こらないようにしたいです...

divを画面外でアニメーション化するが、画面の幅を拡大しないようにするにはどうすればよいですか（つまり、部分的に画面外に保つ）？

とにかくここに私のフィドルがあります：http：//jsfiddle.net/2vP67/6/

そして、これが投稿内のコードです：

HTML

<div id='wrapper'>
    <div id='navWide'> </div>
    <div id='containerWide'> </div>
    <div id='containerTall'>
        <div id='container'>
            <div id='nav'>
                <div id='navNavigate'> Open Menu </div>
                <div id='navNavigateHide'> Close Menu </div>
            </div>
        </div>
    </div>
    <div id='sideContainerTall'>
        <div id='sideContainer'>
            <div id='sideNav'>Side Navigation </div>
        </div>
    </div>
</div>

CSS

#wrapper {
    width:100%;
    min-width:1000px;
    height:100%;
    min-height:100%;
    position:relative;
    top:0;
    left:0;
    z-index:0;
}
#navWide {
    color: #ffffff;
    background:#222222;
    width:100%;
    min-width:1000px;
    height:45px;
    position:fixed;
    top:0;
    left:0;
    z-index:100;
}
#containerWide {
    width:100%;
    min-width:1000px;
    min-height:100%;
    position:absolute;
    top:45px;
    z-index:100;
}
#containerTall {
    color: #000000;
    background:#dadada;
    width:960px;
    min-height:100%;
    margin-left:-480px;
    position:absolute;
    top:0;
    left:50%;
    z-index:1000;
}
/***** main container *****/

#container {
    width:960px;
    min-height:585px;
}
#nav {
    color: #ffffff;
    background:#222222;
    width:960px;
    height:45px;
    position:fixed;
    top:0;
    z-index:10000;
}
#navNavigate {
    background:yellow;
    font-size:10px;
    color:#888888;
    width:32px;
    height:32px;
    padding:7px 6px 6px 6px;
    float:left;
    cursor:pointer;
}
#navNavigateHide {
    background:yellow;
    font-size:10px;
    color:#888888;
    width:32px;
    height:32px;
    padding:7px 6px 6px 6px;
    float:left;
    cursor:pointer;
    display:none;
}
#sideContainerTall {
    background:#888888;
    width:264px;
    min-height:100%;
    margin-left:-480px;
    position:absolute;
    top:0;
    left:50%;
    z-index:500;
}
#sideContainer {
    width:264px;
    min-height:585px;
    display:none;
}
#sideContainerTall {
    background:#888888;
    width:264px;
    min-height:100%;
    margin-left:-480px;
    position:absolute;
    top:0;
    left:50%;
    z-index:500;
}
#sideContainer {
    width:264px;
    min-height:585px;
    display:none;
}
#sideNav {
    width:264px;
    height:648px;
    float:left;
}

Javascript

$(document).ready(function() {

    $('div#navNavigate').click(function() {

        $('div#navNavigate').hide();

        $('div#navNavigateHide').show();

        $('div#sideContainer').show();

        $('div#containerTall').animate({
            'left': '+=264px'
        });
    });

    $('div#navNavigateHide').click(function() {

        $('div#navNavigate').show();

        $('div#navNavigateHide').hide();
        $('div#containerTall').animate({
            'left': '-=264px'
        }, function() {
            $('div#sideContainer').hide();
        });
    });

});
4

1 に答える 1

1

したがって、実際の簡単な修正は、html / bodyにhiddenのオーバーフローを適用することです（このように高さと幅も定義する必要があります）。

html, body{
    width:100%;
    height:100%;
    min-height:100%;
    overflow:hidden;
}

更新されたjsFiddleをチェックしてください：http：//jsfiddle.net/2vP67/9/

- 編集 -

FacebookやPathなどのアプリのサイドパネルビュー効果を求めている場合は、はるかに単純なレイアウト/cssでそれを実現できます。

ここでjsFiddleの例を参照してください：http：//jsfiddle.net/2vP67/11/

ここでの例はiPhoneの幅に基づいていますが、画面サイズを検出し、必要に応じてコンテンツを表示できます。

于 2012-11-20T18:17:13.213 に答える