Вертикальный слайд-тип меню

Question

Click me to see schematic

Я пытаюсь построить простое скользящий вертикальное меню - несколько дивов (#sliderOption_ ) внутри контейнера (сНа sliderContainer). Две стрелки (вверх/вниз) будут управлять скользящим эффектом. Мне нужно divs внутри ползунка для перемещения 80px (#optionMenu_ * height) вертикально, вверх или вниз. Я хочу, чтобы css (а именно, радиус границы) для div, которые находятся внутри видимой области слайдераContainer, изменяются в соответствии с их порядком (1-й, 2-й и 3-й - см. Рисунок). Средний элемент будет тем, который будет запускать другие вещи - #btn? для этой цели должно быть соответствующее. Ive проверяли другие сообщения, но не может получить решение для моего случая ... Html структуры:

<p id="upBtn">Up</p> 
<p id="downBtn">Down</p> 

<div id="sliderContainer"> 
    <div id="optionMenu_1" class="optionMenu"> Option menu 1 <div id="btn1" class="btn">1</div> </div> 
    <div id="optionMenu_2" class="optionMenu"> Option menu 2 <div id="btn2" class="btn">2</div> </div> 
    <div id="optionMenu_3" class="optionMenu"> Option menu 3 <div id="btn3" class="btn">3</div> </div> 
    <div id="optionMenu_4" class="optionMenu"> Option menu 4 <div id="btn6" class="btn">4</div> </div> 
    <div id="optionMenu_5" class="optionMenu"> Option menu 5 <div id="btn5" class="btn">5</div> </div> 
    <div id="optionMenu_6" class="optionMenu"> Option menu 6 <div id="btn6" class="btn">6</div> </div> 
    <div id="optionMenu_7" class="optionMenu"> Option menu 7 <div id="btn7" class="btn">7</div> </div> 
</div> 

я действительно хочу максимально возможную простую вещь - никаких внешних библиотек (если это возможно). Вот jsFiddle со всеми элементами.

Любая помощь приветствуется. Thanx.

Педро

Answer 1

Я обновил ваш пример проверить его here.

Я просто добавлю один div, который содержит optionMenu и некоторую магию jQuery.

объяснение:

<div id="sliderContainer"> 
    <div class="sliderContainerInside">//add just wrapper to your .optionMenu divs 
    ...... 
    ...... 
</div>//end div #sliderContainerInside 

в CSS добавить следующее:

.sliderContainerInside { 
    position:absolute; 
    top:10px; 
} 
#sliderContainer{ 
     ...... 
     ...... 
     position:relative; 
} 

В JS:

$("#upBtn").on('click', function() { 
    // slide all optionMenu_* up by 80px 
    var maxUp = ($('div.optionMenu').length - 3) * 90;//now get the max px that our .sliderContainerInside can have as top(css) value. Notice that (3) represent the number of divs that 'll be visible to the user and (90) is the optionMenu height plus the value of top padding(10) 
    if (-maxUp < parseInt($('.sliderContainerInside').css('top')) - 10) { 
     $('.sliderContainerInside').css('top', parseInt($('.sliderContainerInside').css('top')) - 90 + 'px'); 
    } 
    //console.info($('.sliderContainerInside').css('top') - 80); 
});