easy way navbar bootstrap

I started to use Bootstrap. Right now I am looking for a navbar in bootstrap here. The side navbar html and JavaScript I tried to take (the fixed side navbar see it in the link not the example in the link)

the code:

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

But it's not clear in JavaScript. How to open and select active element when he scroll and design?

I am looking some open source or project like jqueryui.

Answers:

Answer

If you're looking to add the fixed sidebar like bootstrap uses for their docs, like noted here http://getbootstrap.com/javascript/#affix, try this:

Add id="foo" data-spy="affix" data-offset-top="100" data-offset-bottom="10" to the <div> or <ul> you want to lock in place upon scroll.

and add the javascript at the bottom of your page:

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

From there, you'll want to adjust the height at which you want it to lock by adjusting the 'top' elements.

For example:

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

FYI, I would suggest a more new title for your post, perhaps "Fixed/sticky navigation with bootstrap." instead of "easy way navbar bootstrap" (just my opinion)

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.