jquery - 水平スクロールバーを作成するスライドインメニュー

Question

スライドイン メニューに問題があります。ここで例を見ることができます: http://jsfiddle.net/flobar/Z62t2/

問題は、メニューが非表示のときに水平スクロール バーが作成されることです。どうすればそれを防ぐことができますか?

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

Answer 1

overflow:hidden;現在の方法では、ラッパーに を含める必要があります。

フィドルを参照してください: http://jsfiddle.net/Z62t2/5/

body {
    overflow-x:hidden;
    width:100%;
}

Answer 2

body
{
overflow-x:hidden;
}

あなたを助ける必要があります..

Answer 3

CSS http://jsfiddle.net/ZQcaZ/を使用するだけです

負のマージンを使用する代わりに、幅を切り替えても問題なく動作するはずです。

#slideIn {
    background:red;
    width: 20px;
    overflow: hidden;
    float: right;
    transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
}
#slideIn:hover {
    width: 200px;
}