Влево/вправо раздвижное меню

Question

У меня есть это меню, которое в основном представляет собой горизонтальный элемент раздвижной панели. Все пункты меню имеют определенные свойства 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> 

... и fiddle.

Спасибо.

Pedro

Answer 1

Попробуйте jsfiddle

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