3

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.

enter image description here

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

Pedro
  • 573
  • 5
  • 16
  • 1
    menuItem_position = - (menuItem_place * 200) + 25; http://jsfiddle.net/2Vngt/1/ – David Fregoli Apr 10 '13 at 11:25
  • That fixes the centering issue. Thanx David! You don't happen to know how to set different css values for the inside/outside center area, do you? – Pedro Apr 10 '13 at 11:41
  • 1
    the best thing would be to add a css class to the active element: http://jsfiddle.net/2Vngt/3/ – David Fregoli Apr 10 '13 at 11:49
  • Works great. There's just one problem: it won't run in IE8. Could you make use of the jQuery animate() instead of using css3? Thanx. – Pedro Apr 10 '13 at 12:06

1 Answers1

3

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.

Ejaz
  • 8,719
  • 3
  • 34
  • 49
  • Works great too! By the way, is it possible to have a mouseover+click option as well? – Pedro Apr 10 '13 at 12:09
  • 1
    yes certainly, using CSS `:hover` or `jQuery.hover(..,..)` .. Edit: ah, do you mean `click menuItem to scroll next`? – Ejaz Apr 10 '13 at 12:15
  • Not the buttons. :) I meant the items themselves - when clicked bring them to the middle. – Pedro Apr 10 '13 at 12:23
  • That's exactly what I mean. Thank you Ejay! – Pedro Apr 10 '13 at 12:39
  • Ejay, there's just two things left to do: **disable left/right buttons** when the items reach their limits (I tried to play with the some if statements, but I didn't get it) and **add a simple mouseenter/mouseleave (scale resize)** that disables itself also when reaching the left/right end boundaries. [fiddle](http://jsfiddle.net/xkUYm/) update. – Pedro Apr 11 '13 at 09:01