下拉导航与水平滚动

Question

我一直在努力寻找一个jQuery滑块来实现类似的效果发现here（如果你点击选择车辆，你会得到一个向左或向右滑动的车辆）。有谁知道一个jQuery插件来实现这一目标？

我过去使用过很多滑块插件，但看起来它们确实是用于图像（幻灯片）而不是用于导航目的。它不需要下拉，只需点击一个标签就可以循环浏览各个部分。

我想我应该澄清更多关于这一点：

我想这主要是一对夫妇的标签，我需要这将通过内容滚动下（基于其标签被点击）

Answer 1

我对了同样的问题，最后2天的工作，这里是我的解决方案：

<style> 
.horizontalni { 
    border:solid 1px rgba(0,0,0,0.3); 
    border-radius:4px; 
    box-shadow:0 0 0 4px rgba(125,125,125,0.1); 
    padding:0; 
    position:relative; 
    width:auto; 
    max-width:800px; 
    background:silver; 
    overflow:hidden; 

} 

/* navigation items */ 
.horizontalni .navigation { 
    background:rgba(0,0,0,0.1); 
    color:rgba(255,255,255,0.1); 
    display:block; 
    font-family:verdana,sans-serif; 
    font-size:3em; 
    height:55px; 
    padding-top:0px; 
    position:absolute; 
    text-align:center; 
    text-shadow:rgba(0,0,0,0.1); 0 0 2px; 
    width:50px; 
    -moz-transition:all 0.4s; 
    -ms-transition:all 0.4s; 
    -webkit-transition:all 0.4s; 
    -o-transition:all 0.4s; 
    transition:all 0.4s; 
} 

.horizontalni:hover .navigation { 
    background:rgba(0,0,0,0.3); 
    color:rgba(255,255,255,0.8); 
    text-shadow:rgba(0,0,0,0.7); 0 0 2px; 
} 

.horizontalni .navigation:hover { 
    background:rgba(0,0,0,0.5); 
} 

.horizontalni .previous { 
    left:0; 
} 

.horizontalni .next { 
    right:0; 
} 

/* carousel container */ 
.horizontalni ul { 
    -moz-box-orient:horizontal; 
    -ms-box-orient:horizontal; 
    -webkit-box-orient:horizontal; 
    -o-box-orient:horizontal; 
    box-orient:horizontal; 
    display:-moz-box; 
    display:-ms-box; 
    display:-webkit-box; 
    display:-o-box; 
    display:box; 

    list-style-type:none; 
    margin-top:5px; 
    margin-bottom:5px; 
    padding:0; 

} 

/* standard width and height for the carousel items */ 
.horizontalni li { 
    border:solid 1px #333; 
    height:40px; 
    margin-right:10px; 
    width:auto; 
    min-width:150px; 
    max-width:300px; 
} 

/* animation properties for the carousel */ 
.animate ul { 
    -moz-transition:margin 1s; 
    -ms-transition:margin 1s; 
    -webkit-transition:margin 1s; 
    -o-transition:margin 1s; 
    transition:margin 1s; 
} 

/* different color for each of our items */ 
.horizontalni li { 
    box-shadow: inset 0 0 0 1px #8a8a8a; 
    -moz-box-shadow: inset 0 0 0 1px #8a8a8a; 
    -webkit-box-shadow: inset 0 0 0 1px #8a8a8a; 
    background: #4a4a4a url(images/grad_dark.png) repeat-x left top; 
    background: -moz-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8a8a8a), color-stop(50%, #707070), color-stop(51%, #626262), color-stop(100%, #787878)); 
    background: -webkit-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%); 
    background: -o-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%); 
    background: -ms-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%); 
    background: linear-gradient(to bottom, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%); 
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0); 
    text-align: center; 
} 
.horizontalni a { 
    color: #ffffff; 
    display: inline-block; 
    font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; 
    font-size: 12px; 
    min-width: 35px; 
    text-align: center; 
    text-decoration: none; 
    text-shadow: 0 -1px 0 #333333; 
} 

.horizontalni > ul > li a { 
padding-left:10px; 
padding-right:10px; 
    line-height: 40px; 
    filter: none; 
} 

.horizontalni > ul > li:hover { 
    background: #8a8a8a url(images/grad_dark.png) repeat-x left bottom; 
    background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(50%, #4a4a4a), color-stop(51%, #3b3b3b), color-stop(100%, #525252)); 
    background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%); 
    background: -o-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%); 
    background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%); 
    background: linear-gradient(to bottom, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%); 
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0); 
    filter: none; 
} 


.horizontalni .has-sub:hover ul { 
    display: block; 
    z-index:1; 

} 
.horizontalni .has-sub ul { 
    display: none; 
    min-width: 100%; 
    text-align: center; 
    IE7 

    *width: 100%; 
} 
.horizontalni .has-sub ul li { 
    text-align: center; 
} 
.horizontalni .has-sub ul li a { 
    border-top: 0 none; 
    border-left: 1px solid #5d5d5d; 
    display: block; 
    line-height: 120%; 
    padding: 9px 5px; 
    text-align: center; 
    z-index:1; 
} 

.has-sub.parent .wrapper { 
    position: fixed; 
} 
</style> 
<div id="carousel" class="horizontalni wrapper"> 
      <a href="" class="navigation previous">&laquo;</a> 
      <a href="" class="navigation next">&raquo;</a> 
      <ul> 
       <li ><a href="#">Test1</a></li> 
       <li ><a>Test2</a></li> 
       <li><a>Test3</a></li> 
       <li ><a>Test4</a></li> 
       <li ><a>Test5</a></li> 
       <li class="has-sub parent"><a>Test6</a> 
        <div class="wrapper"> 
         <ul class="sub"> 
          <li><a>Test61</a></li> 
          <li><a>Test62</a></li> 
          <li><a>Test63</a></li> 
         </ul> 
        </div> 
       </li> 
       <li class="child-element"><a>Test7</a></li> 
       <li class="child-element"><a>Test8</a></li> 
       <li class="child-element"><a>Test9</a></li> 
      </ul> 
     </div> 
     <script src="http://www.andismith.com/flexbox-carousel/library/js/modernizr.js"></script> 
     <script src="http://www.andismith.com/flexbox-carousel/library/js/common.js"></script> 

demo

我希望它能帮助你。