导航条引导的简单方法

easy way navbar bootstrap

本文关键字：简单 方法 导航      更新时间：2023-09-26

我开始使用Bootstrap。现在我正在寻找一个导航条在引导这里。侧导航栏的html和JavaScript我试图采取(固定侧导航栏看到它在链接而不是在链接中的例子)

代码:

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

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

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

如果您正在寻找添加固定的边栏，如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>

从那里，你要调整高度，你想要锁定它通过调整'top'元素。

例如:

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

供参考，我建议为你的文章取一个更新的标题，也许是"固定/粘性导航与引导"，而不是"简单的方式导航条引导"(只是我的意见)

相关文章：