響應式水平滾動菜單

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); 
    }); 
});