使水平导航菜单滑动以显示单击箭头的更多选项

Question

我有一个水平子菜单有8个选项（不能添加更多或它下降到第二行），但现在它需要更多，我想要一个特定的效果。我希望最后一个选项是一个箭头，当单击箭头以显示更多选项和向左滑动箭头时，整个菜单水平向左滑动。

我已经研究了几天，并且发现了一些相似的例子，但在我的案例中没有用过。此外，这个类似的事情的很多答案涉及插件或旋转木马，我不认为这些将适用于我的特定网站。

现在我的工作有点像我想要的但是它不是正确的效果。我在我的jQuery函数中使用了.hide（）和.show（），并且基本上使用了类：“firstSide”用于菜单的第一部分，它可以在从主菜单中下拉后看到，而class =“slideSide” “第二部分。我也尝试过.slideToggle（）并使用宽度但没有让它正常工作。

这是我作为示例开始的代码集：CodePen

这个codepen并不漂亮，但它适用于这个例子，这是我的功能：

$('#arrowRight').on('click', function () {
    $('.firstSide').hide(function () {
        $('.slideSide').show();
        $('#blankSub1').show();
    });
});

$('#arrowLeft').on('click', function () {
    $('.slideSide').hide(function () {
        $('.firstSide').show();
    });
});

另外我有类幻灯片设置，以便它不会与菜单的第一部分一起显示，或者它全部放在第二行，我不想要，因为8个菜单选项的宽度是关于整个网站的全宽。

.slideSide {
display: none;
}

我想要的效果可以在http://store.apple.com/us/iphone

上看到

我试过看看它是如何工作的，但还没弄明白，下面是我在该页面上讨论的菜单的屏幕截图。

任何帮助或建议都会受到赞赏，因为我有点卡住了。

Answer 1

查看此fiddle。

这是你在找什么？

您将ul嵌套在div中并在div上使用overflow:hidden。

使用jquery，您可以通过margin-left实现滑动或像

那样定位

position:relative; left:-100% 并且在单击时隐藏箭头，另一个隐藏箭头。

您可以使用这些值来满足您的需求。