简单的方法导航栏引导

Question

我开始使用 Bootstrap。现在我正在寻找引导程序here 中的导航栏。我尝试使用的侧导航栏 html 和 JavaScript（固定侧导航栏在链接中看到它而不是链接中的示例）

代码：

 <ul><li>first menu</li>
 <ul><li>sub menu<li>
 <li>sub menu 2</li>
 <ul>
 <ul>

但在 JavaScript 中并不清楚。滚动时如何打开和选择活动元素 和设计？

我正在寻找一些开源或项目，例如 jqueryui。

Answer 1

如果您希望像 bootstrap 一样为他们的文档添加固定侧边栏，就像这里提到的 http://getbootstrap.com/javascript/#affix，试试这个：

将id="foo" data-spy="affix" data-offset-top="100" data-offset-bottom="10" 添加到您希望在滚动时锁定到位的<div> 或<ul>。

并在页面底部添加 javascript：

<script type="text/javascript">
 $('#foo').affix({
    offset: {
      top: 100
    , bottom: function () {
        return (this.bottom = $('.footer').outerHeight(true))
      }
    }
  })
</script>

从那里，您需要通过调整“顶部”元素来调整您希望它锁定的高度。

例如：

<div id="foo" data-spy="affix" data-offset-top="100" data-offset-bottom="10">
  <!-- everything in here is be fixed to top -->
</div>

<script type="text/javascript">
  $('#foo').affix({
    offset: {
      top: 100
        , bottom: function () {
           return (this.bottom = $('.footer').outerHeight(true))
      }
    }
  })
</script>

仅供参考，我会为您的帖子建议一个更新的标题，也许是“带有引导程序的固定/粘性导航”。而不是“简单的导航栏引导程序”（只是我的看法）