Javascript CSS：制作水平滚动菜单

我想在我的应用程序屏幕上添加一个菜单。当按下向左或向右箭头时，菜单将具有可水平滚动的菜单图标，一次只能滚动一个菜单。根据菜单屏幕，菜单应滚动至该菜单屏幕的菜单图标

例：

---

---

假设一次有6个菜单图标和3个可见图标。按向右箭头时，它应一次滚动一个项目

如果我的屏幕与菜单4相关，则必须定位菜单4

---

---

而且每个菜单项都应该是可点击的

请让我知道，我如何才能做到这一点

更新 让js用于鼠标悬停

<script type="text/javascript">
    $(function () {
        var div = $('div.sc_menu'),
             ul = $('ul.sc_menu'),
             ulPadding = 15;
        var divWidth = div.width();
        div.css({ overflow: 'hidden' });
        var lastLi = ul.find('li:last-child');
        div.mousemove(function (e) {
            var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;

            var left = (e.pageX - div.offset().left) * (ulWidth - divWidth) / divWidth;
            div.scrollLeft(left);
        });
    });
</script>

$（函数（）{
var div=$（'div.sc_menu'），
ul=$（“ul.sc_菜单”），
ulPadding=15；
var divWidth=div.width（）；
css（{overflow:'hidden'}）；
var lastLi=ul.find（'li:last child'）；
div.mousemove（函数（e）{
var ulWidth=lastLi[0]。offsetLeft+lastLi.outerWidth（）+ulPadding；
var left=（e.pageX-div.offset（）.left）*（ulWidth-divWidth）/divWidth；
左分区（左）；
});
});

JSFiddle

更新3

更新4

这是从db build和ul&li检索的动态菜单。如果有超过屏幕宽度的Li，我只想在左侧和右侧有一个箭头来滚动额外的Li，如果有的话。

查看此小提琴：

$（文档）.ready（函数（）{
$（'.right'）。单击（函数（）{
var position=$（'.container'）.position（）；
var r=position.left-$（window.width（）
$（'.container'）。设置动画({
'左'：''+r+'px'
});
});    
$（'.left'）。单击（函数（）{
var position=$（'.container'）.position（）；
var l=position.left+$（window.width（））
如果（lhop），这将帮助您查看链接


请参见第页最后一页的非图像内容

请看这篇文章：
关于水平滚动菜单的好文章

和（注意：减小浏览器的大小）
@Mohsen请查看更新，这是我为悬停效果准备的。但是如果有任何溢出，我希望使用onClick。如果可以添加JSFIDLE，那就太好了..“添加javascript html css代码”这正是我想做的，但我需要它来与触摸一起工作。你知道如何将触摸添加到滚动中吗？就像你在单击左侧或右侧时提到的那样，它会滚动。使用这个想法，你可以为你的页面创建所需的页脚。我已经添加了一个更新。如果这不是你想要的，请截图。将其添加到我在雅虎的主页上没有看到任何类似于你所要求的herdear@Zword的内容，谢谢你的帮助，但要澄清，你能看到我的原始问题吗？我在哪里发布。这是从db build和ul&li检索的动态菜单。如果li超过屏幕宽度，我只需要一个向左和向右的箭头滚动额外的li，如果有。清楚吗？亲爱的@Aliana，我如何处理溢出时箭头的可见性？如果发生溢出，我希望有条件地将箭头放在一侧。谢谢@Mikhail，但我确实需要我所要求的。
 <   menu4     |  menu5  |   menu6   >

<script type="text/javascript">
    $(function () {
        var div = $('div.sc_menu'),
             ul = $('ul.sc_menu'),
             ulPadding = 15;
        var divWidth = div.width();
        div.css({ overflow: 'hidden' });
        var lastLi = ul.find('li:last-child');
        div.mousemove(function (e) {
            var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;

            var left = (e.pageX - div.offset().left) * (ulWidth - divWidth) / divWidth;
            div.scrollLeft(left);
        });
    });
</script>

$(document).ready(function () {
$('.right').click(function () {
    var position = $('.container').position();
    var r=position.left-$(window).width()
    $('.container').animate({
        'left': ''+r+'px'
    });
});    

$('.left').click(function () {
    var position = $('.container').position();
    var l=position.left+$(window).width()
    if(l<=0)
    {
    $('.container').animate({
        'left': ''+l+'px'
    });
    }
});    
});