Как построить скользящее горизонтальное меню. CSS

0

Я пытаюсь создать простой слайдер, который состоит из статического "окна" и подвижного списка элементов.

Изображение 174551

где родительский контейнер показывает только один элемент и скрывает все остальное. Я пытался сделать что-то подобное, но кажется, что это неправильно:

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

Как достичь этой функциональности?

  • 0
    как вы ожидаете, чтобы изменить между элементами?
Теги:

3 ответа

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%, то они всегда будут пытаться заполнить контейнер. Настройка 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/

Поделиться
  • 0
    Я также думал об использовании отрицательных полей. Единственное, что я считаю неправильным в вашем ответе, это то, что white-space: nowrap должен быть помещен в a.category где установлен display: inline-block , я прав?
  • 0
    @ brick Нет. Если вы хотите, чтобы текст не nowrap , вы устанавливаете nowrap на контейнер, содержащий этот текст. inline-block рассматривается как встроенный элемент с точки зрения размещения, так что это именно то, что я хотел. Благодаря этому все ссылки в одну строку. Установка white-space: nowrap; на a.category повлияет на элементы внутри этого элемента. Вот пример: jsfiddle.net/N9R2E
Показать ещё 5 комментариев
1

То, о чем вы говорите, это, по сути, карусель или слайдер. Вместо того, чтобы пытаться закодировать его с нуля, я бы просто использовал один из миллионов плагинов jQuery для его создания. Мне лично нравится bxslider много для таких вещей, потому что он реагирует и очень прост в реализации.

Поделиться
  • 0
    Спасибо, что поделились ссылкой на bxslider. Мне это и вправду нравится! Конечно, я понимаю, что заново изобретаю колесо. Я просто решил попробовать это сам. Также сторонние плагины могут быть огромной болью при интеграции их в приложение Backbone.
  • 1
    @ кирпич Ты направляешься в правильном направлении. В основном вам просто нужен скрытый переполненный «оконный» div с абсолютно позиционированным содержимым под ним. Затем просто анимируйте позицию содержимого div с помощью javascript по мере необходимости. Вы также можете сделать это в чистом CSS3, но это более сложно и не так широко совместимо.
1

Если вы не против использования 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> чтобы держать его в очереди.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню