I am working on a mobile webpage with a Facebook-like side menu button, but I'm having trouble disabling horizontal scrolling using CSS overflow-x:hidden. Here is the code I have so far:
<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>