Question

我试图建立一个简单的滑块，它包含一个静态的窗口＆＃39;和可移动的物品清单。

enter image description here

其中父容器只显示一个项目并隐藏所有其余项目。我试图做这样的事情，但看来这是错误的：

<div id="category-selector">
    <div class="categories-list clearfix">
        <a class="category">sports</a>
        <a class="category">fashion</a>
        <a class="category">health</a>
    </div>
</div>

#category-selector {
    width: 300px; margin: 0 auto; position: relative; z-index: 1;
    border: 2px solid #ccc;
   -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; height: 55px;
    overflow: hidden;
}
.categories-list {
    position: absolute; top: 0; left: 0; display: block;
}
a.category {
    display: block; float: left; width: 100%; padding: 10px;
    font-size: 30px; font-family: Cambria, 'Segoe UI', sans-serif; line-height: 35px;
    text-decoration: none; text-align: center; color: #42a6ce;
}

如何实现此功能？

Answer 1

试试这个：

.categories-list {
    display: block;
    white-space: nowrap;

    /*margin-left: -300px;*/
}
a.category {
    display: inline-block; 
    width: 280px; 
    padding: 10px;
    font-size: 30px; font-family: Cambria, 'Segoe UI', sans-serif; line-height: 35px;
    text-decoration: none; text-align: center; color: #42a6ce;
}

如果您想要从左到右排列链接，则应将它们设置为固定宽度。如果设置为100％，那么他们将始终尝试填充容器。 Setring display到inline-block允许我们通过在容器上设置white-space: nowrap;来避免包装线。要滚动它，只需在容器上设置边距，例如margin-left: -300px;

工作样本：http://jsfiddle.net/N9R2E/

或者你可以试试这个：

.categories-list {
    display: block;
    white-space: nowrap;
    margin-left: -300px;
    width: 10000px; /* long enough to fit all links */
}
a.category {
    display: block; 
    float:left;
    width: 280px; 
    padding: 10px;
    font-size: 30px; font-family: Cambria, 'Segoe UI', sans-serif; line-height: 35px;
    text-decoration: none; text-align: center; color: #42a6ce;
}

这会在您的尝试中使用display:block和float:left，但宽度是固定的。要使一行categories-list中的所有链接都必须更宽，然后将所有链接放在一起。

工作样本：http://jsfiddle.net/N9R2E/3/

Answer 2

如果你不介意使用JS或按钮，这是一种方法。

$(document).ready(function() {

var slider = $("#categoriese_list");                    
var leftProperty, newleftProperty;

// the click event handler for the right button                     
$("#right_button").click(function() { 

    // get value of current left property
    leftProperty = parseInt(slider.css("left"));

    // determine new value of left property
    if (leftProperty - 100 <= -900) {
        newLeftProperty = 0; }
    else {
        newLeftProperty = leftProperty - 100; }

    // use the animate function to change the left property
    slider.animate( {left: newLeftProperty}, 1000);

});  // end click

// the click event handler for the left button
$("#left_button").click(function() {

    // get value of current right property
    leftProperty = parseInt(slider.css("left"));

    // determine new value of left property
    if (leftProperty < 0) {
        newLeftProperty = leftProperty + 100;
    }
    else {
        newLeftProperty = -800;
    }

    // use the animate function to change the left property
    slider.animate( {left: newLeftProperty}, 1000);

   });  // end click        
}); // end ready

但是，我建议您使用<ul>制作类别列表，以使其更加符合要求。

Answer 3

你所说的基本上是一个旋转木马或滑块。我不会尝试从头开始编写代码，而是使用其中的一百万个jQuery插件来构建它。我个人非常喜欢bxslider这样的事情，因为它响应迅速且实现起来非常简单。

如何构建滑动水平菜单。 CSS

3 个答案: