在创建水平滚动条的菜单中滑动

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

像这样

DEMO

CSS

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

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

Answer 4

body 
{ 
overflow-x:hidden; 
} 

应该可以帮助你..

Answer 5

试试这个。这对你很有帮助

演示Here