Encountering a problem with a slide-in menu. Here's an example: http://jsfiddle.net/flobar/Z62t2/
The issue arises when the menu is hidden, causing a horizontal scroll bar to appear. How can this be prevented?
HTML:
<div id="slideIn">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
CSS:
#slideIn {
background:red;
width: 200px;
float: right;
margin-right: -180px;
}
JS:
var menu = 0;
$('#slideIn').click(function() {
if (menu == 0) {
menu = 1;
$(this).animate(
{marginRight: '0px'},200
);
} else {
menu = 0;
$(this).animate(
{marginRight: '-180px'},200
);
}
});