响应式水平滚动菜单

Question

一旦您从手机设备查看,http://healthunit.com在屏幕顶部有一个干净的水平滚动菜单.我正在尝试模仿相同的功能,这要归功于我正在使用大量导航元素重新设计的网站.

要求:

1. 左右滚动单击选项
2. 以空间为中心的居中列表项选项
3. 一次只能看到一个列表项
4. 横向滚动和响应
5. 单击列表中的最后一个或第一个选项将转到列表中的第一个选项或最后一个选项

我此部分的当前HTML是:

<nav id="sub" class="clearfix">
  <ul class="wrapper">
    <a href="#"><li>Estimate</li></a>
    <a href="#"><li>About</li></a>
    <a href="#"><li>Customer Information</li></a>
    <a href="#"><li>Financing</li></a>
    <a href="#"><li>Careers</li></a>
    <a href="#"><li>Locate Us</li></a>
    <a href="#"><li>Inspiration</li></a>
  </ul>
</nav>

目前附加到它的CSS是:

nav#sub {
  background: #004173;
  background: linear-gradient(to bottom, #004173 0%,#014f8d 100%);
  background: -moz-linear-gradient(top, #004173 0%, #014f8d 100%);
  background: -ms-linear-gradient(top, #004173 0%,#014f8d 100%);
  background: -o-linear-gradient(top, #004173 0%,#014f8d 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#004173), color-stop(100%,#014f8d));
  background: -webkit-linear-gradient(top, #004173 0%,#014f8d 100%);
  border-bottom: #00325a solid 3px;
  box-shadow: 0 4px 6px 0 #BFBFBF;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004173', endColorstr='#014f8d',GradientType=0 );
  webkit-box-shadow: 0 4px 6px 0 #BFBFBF;
}

#sub ul {
  text-align: center;
}

#sub ul li {
  padding: 10px 3.3%;
}

#sub a {
  color: #fff;
  font-size: 10pt;
  font-weight: 400;
  text-decoration: none;
}

#sub ul a:hover li {
  background: #007FEB;
}

Answer 1

所以,最后我想我有你想要的东西:

小提琴: http ://jsfiddle.net/fzXMg/2/

CSS和HTML在小提琴......

JS:

$(function(){
    var state = 0;
    var maxState = 6;
    var winWidth = $(window).width();
    $(window).resize(function(){
        winWidth = $(window).width();
        $('.box,.container_element').width(winWidth-100);
    }).trigger('resize');
    $('#lefty').click(function(){
        if (state==0) {
           state = maxState;
        } else {
           state--;
        }
        $('.container_element').animate({scrollLeft:((winWidth-100)*state)+'px'}, 800);
    });
    $('#righty').click(function(){
        if (state==maxState) {
           state = 0;
        } else {
           state++;
        }
        $('.container_element').animate({scrollLeft:((winWidth-100)*state)+'px'}, 800);
    });
});

这再次使用jQuery.