javascript - Jquery 幻灯片菜单 x 滚动问题

Question

我创建了一个自定义幻灯片菜单，这让我有点难过。 Click here for example当您单击菜单按钮时，滑动菜单会将背景图像向右推，并离开和多余的 x 滚动。

我对这个功能的目标是让滑动菜单位于背景图像之上。目前我的背景图片是 <img>标记并且是 absolute定位为客户希望手动更新图像。这可能是出现此问题的主要原因。还有 div id="right"正在包装所有内容，包括背景图像。我试着把内容放在我包装的地方，但是我想不出一种方法来使它正常工作我想知道是否有办法解决这个问题下面是一段代码，包括 javascript 和 HTML 结构.

$('#button').toggle( 
function() {
    $('#right').animate({ left: 400 }, 'slow', function() {
        $('#button').html('Close');
    });
}, 
function() {
    $('#right').animate({ left: 0 }, 'slow', function() {
        $('#button').html('Menu');
    });
}

);

<div id="right">
    <div id="menubar">
        <div id="button">
            Menu
        </div>
    </div>

<div id="menu">
    <ul>
        <li><a href="#">Menu Item 1</a></li>
        <li><a href="#">Menu Item 2</a></li>
        <li><a href="#">Menu Item 3</a></li>
        <li><a href="#">Menu Item 4</a></li>
        <li><a href="#">Menu Item 5</a></li>
        <li><a href="#">Menu Item 6</a></li>
        <li><a href="#">Menu Item 7</a></li>
        <li><a href="#">Menu Item 8</a></li>
        <li><a href="#">Menu Item 9</a></li>
        <li><a href="#">Menu Item 10</a></li>
        <li><a href="#">Menu Item 11</a></li>
        <li><a href="#">Menu Item 12</a></li>
    </ul>
</div>

有人可以建议我解决这个问题的方法吗？

Answer 1

简单添加:

Body{
    overflow-x:hidden;
}

所以隐藏body-s水平滚动条。

关于 owerflow 的更多信息.