0

メニューボタンをクリックすると左側のメニューが表示されるFacebookモバイルWebサイトを複製しようとしています。私が抱えている問題は、コンテンツ領域の幅を 100% にしたいのですが、非表示のメニューが 100% のコンテンツ領域を表示すると、メニューの下に落ちてしまうことです。

js fiddle は次のとおりです。 jsfiddle コードを以下に示します。

ご回答ありがとうございます。

HTML

 <div id="menu">
 </div>
 <div id="content">
     <div id="header">
         <div id="menuButton">
         </div>
     </div>
 </div>​

CSS

 body{padding:0px; margin:0px; width:100%; min-width:320px; height:100%; min-height:480px; background-color:#FFFFFF;}
 #menu{ width:240px; min-width:240px; height:100%; min-height:480px; float:left; background-color:#CCCCCC; display:none; position:relative;}
 #header{ height:48px; width:100%; min-height:48px; min-width:320px; background-color:#666666;  float:left;}
 #menuButton{ width:30px; height:30px; background-color:#999999;margin-top:9px; margin-left:15px;}
 #content{ float:left;  min-width:320px;  min-height:480px; width:100%;}

jQuery

 $("#menuButton").click(function () {
     $('#menu').toggle(),750;
 }); ​
4

1 に答える 1

1

これにより、水平スクロールバーがポップアップするのを防ぎ、コンテンツが実際に表示されるように上部を埋めます。

フィドル

    $("body").on('click', '#menuButton', function () {

        if($('#container').position().left === 0){
            $('#container').css({'left' : 240 , 'width' : $('#container').width() - 240 } );
        }else{
            $('#container').css({'left' : 0, 'width' : '100%'});
        }

        $('#menu').toggle();
    });
于 2012-11-15T15:16:29.350 に答える