Javascript 重新创建facebooks帮助中心侧栏导航

在桌面上查看时，您可以看到它有一个。如果您单击其中一个类别，它将带您进入子类别或主题id

我不是在寻找它显示和获取主题URL的方式，我只是在寻找该菜单的css/javascript，它以显示类别到子类别或主题事务的方式工作

如果有人能给我一些关于再创造的建议或者帮助我再创造，我将不胜感激

谢谢

在Tympanus就是一个很好的例子

---

不过，仅限于浏览器支持，polyfill可以提供帮助

这里有一个简单的例子，这里有一个

---

（函数（$）{
$（'.sub-li:last child'）。在（'
back
'）之后；
$（'.toggle'）。单击（函数（）{
$（'.main'）.animate（{marginLeft:'-250px'}，400）；
$（this）.next（'.sub'）.animate（{left:'0'}，400）.css（{display:'block'}）；
});
$（'.back'）。单击（函数（）{
$（'.main'）.animate（{marginLeft:'0'}，400）；
$（'.sub'）.animate（{left:'250px'}）.fadeOut（400）；
});
})（jQuery）；

我知道这是一条旧线，但如果是100%宽度，我该怎么办？不是250像素？

<nav id="navigation">

  <ul class="main">

    <li class="withsub"><span class="toggle">Link</span>
      <ul class="sub">
          <li><a href="#">Sub Link</a></li>
          <li><a href="#">Sub Link</a></li>
          <li><a href="#">Sub Link</a></li>
          <li><a href="#">Sub Link</a></li>
          <li><a href="#">Sub Link</a></li>
          <li><a href="#">Sub Link</a></li>
      </ul>
    </li>
    <li class="withsub"><span class="toggle">Link</span>
      <ul class="sub">
          <li><a href="#">Sub Link</a></li>
          <li><a href="#">Sub Link</a></li>
          <li><a href="#">Sub Link</a></li>
          <li><a href="#">Sub Link</a></li>
          <li><a href="#">Sub Link</a></li>
          <li><a href="#">Sub Link</a></li>
          <li><a href="#">Sub Link</a></li>
          <li><a href="#">Sub Link</a></li>
      </ul>
    </li>
    <li class="withsub"><span class="toggle">Link</span>
      <ul class="sub">
          <li><a href="#">Sub Link</a></li>
          <li><a href="#">Sub Link</a></li>
          <li><a href="#">Sub Link</a></li>
          <li><a href="#">Sub Link</a></li>
          <li><a href="#">Sub Link</a></li>
          <li><a href="#">Sub Link</a></li>
          <li><a href="#">Sub Link</a></li>
          <li><a href="#">Sub Link</a></li>
          <li><a href="#">Sub Link</a></li>
          <li><a href="#">Sub Link</a></li>
      </ul>
    </li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>

  </ul>

</nav>

#navigation {
  position: relative;
  float: left;
  width: 250px;
  overflow: hidden; 
}
#navigation ul {
  list-style: none;
}
#navigation li {
  width: 236px;
  height: 36px;
  padding-left: 7px;
  line-height: 36px;
  font-size: 12px;
  color: #6f7bbf;
  cursor: pointer;
  border-bottom: 1px solid #eee;
  text-shadow: 1px 1px 0 #fff;
}
#navigation li a {
  display: block;
  width: 100%;
}
#navigation li:hover,
#navigation li a:hover {
  background: #ebeef4;
}
.sub {
  position: absolute;
  display: none;
  top: 0;
  left: 250px;
}

(function($) {
  $('.sub li:last-child').after('<li class="back">Back</li>');

  $('.toggle').click(function() {
    $('.main').animate({ marginLeft: '-250px' }, 400);
    $(this).next('.sub').animate({ left: '0' }, 400).css({ display: 'block' });
  });

  $('.back').click(function() {
    $('.main').animate({ marginLeft: '0' }, 400);
    $('.sub').animate({ left: '250px' }).fadeOut(400);
  });
})(jQuery);