jquery幻灯片菜单x-scroll问题

问题描述：

我已经构建了一个自定义幻灯片菜单，它给了我一点点的悲伤。 Click here for example当您单击菜单按钮时，幻灯片菜单将背景图像向右推并离开和多余的x-scroll。jquery幻灯片菜单x-scroll问题

我的这个功能的目的是让滑动菜单坐在背景图像的顶部。目前我的背景图片是<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>

有人可以告诉我，我可以解决这个问题？

使用'body {overflow-x：hidden;}'来摆脱滚动。 – Vucko

真棒它的工作 – NewBoy

然后将它作为答案发布。 – Vucko

答

的simpy添加：

Body{ 
    overflow-x:hidden; 
}

所以隐藏体 -s水平滚动。

有关owerflow的更多信息：

jquery幻灯片菜单x-scroll问题

相关推荐