我想知道是否有可能获得这样的菜单: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>
bit 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文档中读到什么来制作这样的东西。或者也许你们中的一些人已经有类似的东西?
编辑:点击位置 - 你会看到整个列表向下或向上移动,这就是我需要的效果。
答案 0 :(得分:1)
这样可以吗?
演示: 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;
});
答案 1 :(得分:0)
你只需要一个在jQuery中调用animate函数的悬停事件处理程序。像这样:
$(".scrollmenu li").hover( function() {
$(this).animate({
margin-left: '+=10', //or whatever number of pixels you want
}, 600);
}, function() {
$(this).animate({
margin-left: '-=10',
}, 600);
});
});