Question

I’m trying to replicate the facebook mobile website where you click a menu button and the left menu appears. The issue I’m having is that I want my width of my content area to be 100 percent, but when the hidden menu shows the 100 percent content area drops below the menu.

Here’s the js fiddle: jsfiddle
Code is shown below.

Thanks in advance for any responses

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;
 }); ​

Answer 1

This prevents the horizontal scroll bar from popping up, also, pads the top so the content actually shows.

FIDDLE

    $("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();
    });