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

尝试这个。这对你有帮助

演示Here

Answer 4

只需使用 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;
}

Answer 5

像这样

演示

CSS

#slideIn {
    background:red;
    width: 200px;
    float: right;
    margin-right: -180px;
     margin:0;
    padding:0;
}