javascript - 重新创建Facebook帮助中心侧栏导航

在桌面上查看Facebook help center时，您会看到它具有sidebar on the left。如果单击类别之一，它将带您到子类别或主题ID。

我不是在寻找它显示和获取主题网址的方式，而是在寻找该菜单的css / javascript，以使其显示从类别到子类别或主题交易的方式。

如果有人可以给我一些重新创建的提示或帮助我重新创建，我将不胜感激。

谢谢

最佳答案

这是一个简单的示例，这是一个FIDDLE

<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);

关于javascript - 重新创建Facebook帮助中心侧栏导航，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22799399/