Question

在桌面上查看Facebook help center时，您会发现它有sidebar on the left。如果单击其中一个类别，则会转到子类别或主题ID。

我不是在寻找它显示的方式并获取主题网址，我只是在寻找该菜单的css / javascript，以便将其显示为子类别或主题事务的类别。

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

由于

Answer 1

我发现这个链接有希望它有所帮助，它似乎是你正在寻找的： http://exisweb.net/incredibly-useful-list-of-responsive-navigation-and-menu-patterns

Answer 2

在鼓室的

Multi Level Push Menu就是一个很好的例子。

虽然仅限于浏览器支持，但polyfill可以提供帮助。

Answer 3

以下是一个简单示例，此处为 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);

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

3 个答案: