Left/right sliding menu

Question

I have this menu that's basically an horizontal items sliding bar. All menu items have specific default css properties. I want the items to change their size and left/right margins when they reach the center of the main container and reset to the default values when they leave it (or are outside of it). See my schematic.

There's a left/right button that will trigger which direction it will slide. I know there are libraries for this sort of thing, but I really want the simplest possible thing. Here's the HTML markup:

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

... and the fiddle.

Thank you.

Pedro

Answer 1

Try this jsfiddle

It follows following approach * enclose contents of .menuItem in another container, .container so that it can move freely inside it's parent. * use the menuItem_place to get particular .menuItem that's in center.