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

喜欢这个

<强> DEMO

<强> CSS

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

Answer 5

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

滑入菜单创建水平滚动条

5 个答案: