jquery вертикально прокручиваемое меню (scrollTo?) - PullRequest
Новая
       15

jquery вертикально прокручиваемое меню (scrollTo?)

1 голос
/ 16 февраля 2011

Мне было интересно, возможно ли получить меню как это: http://www.pitgroup.nl/over-ons/ (над меню слева), но писать меньше кода.

Что у меня есть: 

<div class="scrollmenu">
    <ul class="scrollframe">
        <li><a href="#">Tony Start - CEO</a></li>
        <li><a href="#">John Connor - Art Director</a></li>
        <li><a href="#">Samatha Carter - Designer</a></li>
        <li><a href="#">John Smith - Web developer</a></li>
        <li><a href="#">Matthew Smith - Web developer</a></li>
        <li><a href="#">John Doe - Web developer</a></li>
        <li><a href="#">Kim Lee - Web developer</a></li>
        <li><a href="#">Jason Stone - PHP programmer</a></li>
        <li><a href="#">Veronica Moore - SEO Specialist</a></li>
        <li><a href="#">Mandy Ovanova - Marketing Manager</a></li>
    </ul>
</div>

бит css: 

.scrollmenu {width:428px;border-left:1px solid #e4e4e4;border-right:1px solid #e4e4e4;height:132px;overflow:hidden;}
.scrollmenu ul {list-style:none;padding:0px;margin:0px;}
.scrollmenu ul li {display:block;}
.scrollmenu ul li a {display:block;height:32px;border-bottom:1px solid #e4e4e4;line-height:32px;padding:0px 0px 0px 15px;text-transform:uppercase;color:#484848;background:#f4f4f4;}
.scrollmenu ul li a:hover, .scrollmenu ul li a.current {background:#e4e4e4;}

это самый простой вертикальный список, и теперь я хотел бы, чтобы он вел себя так, как в указанной ссылке http://www.pitgroup.nl/over-ons/. Я искал что-то подобное несколько часов, но только те сценарии, которые я нашел, были выпадающими или аналогичными меню, но не ведет себя так, как на странице с надстройками.

Может ли кто-нибудь помочь, пожалуйста, что я должен прочитать в документации jquery, чтобы сделать что-то вроде этого. Или, может быть, у некоторых из вас есть что-то подобное?

edit: нажмите на позиции - вы увидите, что весь список движется вниз или вверх, и это тот эффект, который мне нужен.

Ответы [ 2 ]

1 голос
/ 16 февраля 2011

Это нормально?

Демо: http://jsfiddle.net/XN6VL/2/

Код: 

$('.scrollmenu a').click(function() { 
    var ul = $(this).closest('ul'),
        len = ul.children().length,
        ix = $(this).parent().index(),
        c = 'selected',
        h = $(this).outerHeight();

    ix = ix < 2 ? 2 : ix > len - 3 ? len - 3 : ix;
    ul.animate({'marginTop': (2 - ix) * h});
    $(this).addClass(c).parent().siblings().children('.' + c).removeClass(c);
    return false; 
});
0 голосов
/ 16 февраля 2011

Вам просто понадобится обработчик события hover, который вызывает функцию animate в jQuery. Примерно так: 

$(".scrollmenu li").hover( function() {

    $(this).animate({
        margin-left: '+=10',    //or whatever number of pixels you want         
      }, 600);

    }, function() {

        $(this).animate({
            margin-left: '-=10',             
          }, 600);

    });

});
...