Скользящее меню влево/вправо

У меня есть это меню, которое представляет собой горизонтальную скользящую панель элементов. Все пункты меню имеют определенные свойства css по умолчанию. Я хочу, чтобы элементы меняли свой размер и левое/правое поле, когда они достигают центра основного контейнера, и сбрасываются до значений по умолчанию, когда они покидают его (или находятся за его пределами). Смотрите мою схему.

введите здесь описание изображения

Есть кнопка влево/вправо, которая определяет, в каком направлении он будет скользить. Я знаю, что для такого рода вещей есть библиотеки, но мне действительно нужна самая простая из возможных вещей. Вот HTML-разметка:

<div id="leftBtn">Left</div>
<div id="rightBtn">Right</div>

<div id="centerArea">
    <div id="menuContainer">
        <div id="menuItem_1" class="menuItem"></div>
        <div id="menuItem_2" class="menuItem"></div>
        <div id="menuItem_3" class="menuItem"></div>
        <div id="menuItem_4" class="menuItem"></div>
    </div>
</div>

... и скрипка.

Спасибо.

Педро


menu jquery sliding
person Pedro    schedule 10.04.2013    source источник
comment
menuItem_position = - (menuItem_place * 200) + 25; jsfiddle.net/2Vngt/1   -  person David Fregoli    schedule 10.04.2013
comment
Это решает проблему центрирования. Спасибо, Дэвид! Вы случайно не знаете, как установить разные значения css для внутренней/внешней центральной области, не так ли?   -  person Pedro    schedule 10.04.2013
comment
лучше всего было бы добавить класс css к активному элементу: jsfiddle.net/2Vngt/3   -  person David Fregoli    schedule 10.04.2013
comment
Прекрасно работает. Есть только одна проблема: он не будет работать в IE8. Не могли бы вы использовать jQuery animate() вместо CSS3? Спасибо.   -  person Pedro    schedule 10.04.2013

Ответы (1)


arrow_upward
2
arrow_downward

Попробуйте этот jsfiddle

Следует следующий подход * заключить содержимое .menuItem в другой контейнер, .container, чтобы он мог свободно перемещаться внутри своего родителя. * используйте menuItem_place, чтобы получить конкретный .menuItem, который находится в центре.

person Ejaz    schedule 10.04.2013
comment
Тоже отлично работает! Кстати, а можно ли также иметь опцию «наведение мыши + щелчок»? - person Pedro; 10.04.2013
comment
да, конечно, используя CSS :hover или jQuery.hover(..,..) .. Редактировать: ах, вы имеете в виду click menuItem to scroll next? - person Ejaz; 10.04.2013
comment
Не кнопки. :) Я имел в виду сами предметы - при нажатии выводить их на середину. - person Pedro; 10.04.2013
comment
Вот именно то, что я имею в виду. Спасибо, Эджай! - person Pedro; 10.04.2013
comment
Эджей, осталось сделать всего две вещи: отключить кнопки влево/вправо, когда элементы достигают своего предела (я пытался поиграть с некоторыми операторами if, но не понял) и добавьте простой mouseenter/mouseleave (изменение размера), который также отключается при достижении левой/правой концевых границ. Обновление fiddle. - person Pedro; 11.04.2013