Menu de défilement horizontal réactif

Question

http://healthunit.com dispose d'un menu de défilement horizontal propre en haut de l'écran une fois que vous l'affichez à partir d'un périphérique de téléphonie mobile. J'essaie d'imiter exactement la même fonctionnalité grâce à un site que je suis en train de redessiner avec un énorme niveau d'éléments de navigation.

Exigences:

1. gauche et cliquez sur Options de défilement droite
2. option élément de la liste Centré centrée dans l'espace
3. une seule liste élément visible à un moment
4. horizontale Scrolling & Responsive
5. En cliquant sur la dernière ou la première option de la liste, vous accéderez à la première option ou à la dernière option de la liste

Mon html actuel pour cette section est:

<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> 

Le CSS actuellement attaché à c'est:

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

Alors, enfin je pense avoir ce que vous cherchez:

Fiddle:http://jsfiddle.net/fzXMg/2/

CSS et HTML est dans le Fiddle ...

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

Ceci utilise de nouveau jQuery.

Answer 2

Vérifiez cette jsFiddle: http://jsfiddle.net/7vvdB/

Fondamentalement, créer un extérieur conteneur avec une largeur maximale de 100% et un débordement-x: faites défiler, puis créez un conteneur interne avec une largeur fixe assez grande pour contenir tous vos éléments, puis mettez tous les f vos éléments dans le conteneur interne.

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

} 

.inner_container 
{ 
    width:5000px; 
} 
} 

Answer 3

Vérifiez que le violon: http://jsfiddle.net/zEPQ5/15/

Ce n'est pas parfait dans le sens de la conception, mais il montre le concept.

J'ai utilisé jQuery avec ça.

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