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

我希望它会对你有所帮助。

水平滚动下拉导航

1 个答案: