Javascript Jquery幻灯片菜单x-scroll问题

我已经建立了一个自定义幻灯片菜单，这让我有点悲伤。单击菜单按钮时，幻灯片菜单将背景图像向右推，并离开和超出x-scroll

我的目标是这个功能有滑动菜单坐在背景图像的顶部。当前，我的背景图像是一个

标记，并且是

绝对的

定位，因为客户端希望手动更新图像。这可能是这个问题发生的主要原因。另外，

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

))

菜单

有人能告诉我解决这个问题的方法吗？

Simpy add:

Body{
    overflow-x:hidden;
}

因此，隐藏正文-s水平滚动条

---

有关的详细信息。

使用

body{overflow-x:hidden；}

删除滚动条。然后将其作为答案发布。

Body{
    overflow-x:hidden;
}