响应式水平滚动菜单

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。

Answer 2

看看这个的jsfiddle：http://jsfiddle.net/7vvdB/

基本上，创建一个外最大宽度为100％的容器和overflow-x：scroll，然后创建一个固定宽度的内部容器，其大小足以容纳所有元素，然后将所有o f在内部容器中的元素。

.container_element 
{ white-space:nowrap 
    min-width:100%; 
    overflow-x:scroll; 
    overflow-y:hide; 

} 

.inner_container 
{ 
    width:5000px; 
} 
} 

Answer 3

检查出小提琴：http://jsfiddle.net/zEPQ5/15/

这不是设计的内涵完美，但它展示了这一概念。

我用jQuery的那个。

$(function(){ 
    var state = 0; 
    $('#up').click(function(){ 
     state += 1; 
     $('ul.wrapper').animate({marginTop:(15-state*35)+'px'},400); 
    }); 
    $('#down').click(function(){ 
     state -= 1; 
     $('ul.wrapper').animate({marginTop:(15-state*35)+'px'},400); 
    }); 
});