从左侧开启SLide，在链接点击时从右侧开始

Question

我正试图在导航div上获得此效果... http://www.vogue.co.uk/topic/vogue-view（点击菜单并过滤图标）我有这个

var boxes = $('ul.topLevelNavigation');

$('.button').click(function(e) {
    e.preventDefault();
    var box = $($(this).attr('href'));
    if (!box.hasClass("current")) {
        var current = $('.current');
        current.stop().animate({left: '150%',}, 500 ).removeClass('current');
        box.stop().animate({left: '50%',}, 500 ).addClass('current');
    }
});

<div id="topNavigation">
<ul class="topLevelNavigation">
  <a href=".topLevelNavigation1" class="button"><li>Link #1</li></a>
  <a href=".topLevelNavigation2" class="button"><li>Link #2</li></a>
  <a href=".topLevelNavigation3" class="button"><li>Link #3</li></a>
  <a href=".topLevelNavigation4" class="button"><li>Link #4</li></a>
  <a href=".topLevelNavigation5" class="button"><li>Link #5</li></a>
  <a href="#box1" class="button"><li>Link #6</li></a>
  <a href="#box1" class="button"><li>Link #7</li></a>
  <a href="#box1" class="button"><li>Link #8</li></a>
  <a href="#box1" class="button"><li>Link #9</li></a>
  <a href="#box1" class="button"><li>Link #10</li></a>
  </ul>
  <ul class="topLevelNavigation2">
  <li>Link #1</li>
  <li>Link #2</li>
  <li>Link #3</li>
  <li>Link #4</li>
  <li>Link #5</li>
  <li>Link #6</li>
  <li>Link #7</li>
  <li>Link #8</li>
  <li>Link #9</li>
  <li>Link #10</li>
  </ul></div>

CSS

#topNavigation  {
margin-top:50px;
top: 0;
overflow:hidden;
postition:absolute;
}
ul.topLevelNavigation {
margin-left: 18px;
list-style: none;
}
ul.topLevelNavigation2, ul.topLevelNavigation3, ul.topLevelNavigation4,  {
margin-left: -55px;
}
ul.topLevelNavigation li {
color: #ccc;
font-size:24px;
margin:5px 0 10px 0;
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
 }

你可以在这里看到，它不起作用http://keithfrenchdesigns.com/RunwayMag/index.html

我对jQuery很新，所以任何帮助都会很棒！