0

Facebook のようなサイド メニュー ボタンを備えた、構築しようとしているこのシンプルなモバイル Web ページがあります。CSS overflow-x:hidden で水平スクロールを無効にしようとしていますが、うまくいきません。これが私のコードです。どんな助けでも大歓迎です：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>



    <script> 
        $(document).ready(function(){                       
          $("button").click(function(){ 

              var win = $("#right-side");
              var position = win.position();
              //alert( "left: " + position.left + ", top: " + position.top ); 

              if(position.left < 100)
              {
                  $("#right-side").animate({left:'250px'});
              }else{
                  $("#right-side").animate({left:'0px'});
              }

          });
        });
    </script> 

    <style>
        body{overflow-x: hidden;font-family: sans-serif;}

        #right-side{
            background:#BFC7D8;;
            left:0;
            top:0;
            height:100%;
            width:100%;
            position:absolute;

        }
        #left-menu
        {
            background:#323949;
            left:0;
            top:0;
            height:100%;
            width:250px;
            position:absolute;
        }

        #navigation { font-size:20px; width:250px; padding-top:100px; }
        #navigation ul { margin:0px; padding:0px; }
        #navigation li { list-style: none; }



        ul.top-level li > a {
          display: block;
          border-bottom: 1px solid rgba(0,0,0, 0.1);
          border-top: 1px solid rgba(255, 255, 255, 0.1);
          padding: 15px;
          text-shadow: 0 1px 0 #000;
          text-decoration: none;
          color: #ccc;
          text-indent: 20px;
        }

        #toolbar
        {
            width:100%;
            height:50px;
            background:#00F;    
        }


    </style>





<div id="left-menu">
    <div id="navigation">
    <ul class="top-level">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">News</a></li>
    </ul>
</div>  
</div>




<div id="right-side">

    <div id="toolbar">
        <button>Menu</button>
    </div>

    <h1>This is a test</h1>
</div>
4

4 に答える 4

0

これが手っ取り早いです。問題は、モーダルの高さを定義した場合にのみ機能することです。高さが定義されていないと機能しません。ダイアログを高さ 100% に設定し、オーバーフローを非表示にします。次に、コンテンツを position: absolute、top: 0、bottom: 0、left: 0、right: 0、margin: auto に設定し、高さを定義します (以下の例では、ログイン モーダルの場合は 250px)。私はそれが不合理に聞こえることを知っています-おそらくCSSの不具合ですが、動作します-クロスブラウザーとクロスプラットフォーム(iPhoneをチェックしていません)。

<div class="modal-dialog" style="height:100%;overflow:hidden"><div class="modal-content" style="position:absolute;margin:auto;top:0;bottom:0;left:0;right:0;height:250px;">
于 2015-01-19T02:04:04.727 に答える
0

デビッド。

これを使ってみましたか: http://mmenu.frebsite.nl/

または、これを見て、それを使用してコードを調整できるかどうかを確認してください。

http://jsfiddle.net/tzDjA/

3 つの機能があることに気付くでしょう。

$('#trigger').click( function() {
    if ($('#popout').hasClass('hidden')) {
        $('#popout').removeClass('hidden');
        showPopout();
    }
    else {
        $('#popout').addClass('hidden');
        hidePopout();
    }
});

function showPopout() {
    $('#popout').animate({
        left: 0
    }, 'slow', function () {
        $('#trigger span').html('Close');  //change the trigger text at end of animation
    });
}

function hidePopout() {
    $('#popout').animate({
        left: -40
    }, 'slow', function () {
        $('#trigger span').html('Show');  //change the trigger text at end of animation
    });
}
于 2013-06-20T22:54:34.653 に答える
0

コンテンツの背後にメニューがあり、コンテンツを左に押して、背後に隠れている Facebook スタイルのメニューを表示するという同様の問題がありました。

私は「絶対」配置を適用してスライドを模倣し、コンテンツをドキュメントフローから取り出していました。オーバーフローを非表示にすると、コンテンツレイヤーをタッチで引っ張ることができるように見えました (これは、発生したのと同じ問題のように聞こえます)。オーバーフロー std を使用しても、x & y がほぼすべてに設定され、これはまだ発生していました。これも width:100% on body などでした。

これをスライドさせてコンテンツレイヤーを「相対」に変更し、コンテンツの高さを（メニューが開いている間に）ウィンドウの高さに減らすと、うまくいくようで、デバイス上でかなり堅牢に見えました。

頑張ってください、それは同様の問題を経験している人にとって役立つはずです.

ありがとう、デイブ

于 2013-10-03T15:58:28.233 に答える