Mimicking Bootstrap Documentation Sidebar

If you've spent any time looking at the Bootstrap docs you'll notice their nav bar on the right. Very slick example of both Scrollspy and Affix. I have written blog posts about both of these topics in conjunction with each other titled Bootstrap ScrollSpy Pitfalls and Fixes. In my example I use a very simple styling for my nav using nav-pills. This works out alright but what if we want to get exactly what Bootstrap is doing? Well, let's figure out just how they do it. They are using very similar code to what I had in the pitfalls and tricks post so I'll bring that in here.

<div id="side-nav" class="col-sm-2 hidden-xs hidden-sm hidden-print affix">
    <ul class="nav">
        <li><a href="#info">Info</a></li>
        <li><a href="#properties">Company Properties</a></li>
        <li><a href="#genome">Buyers/Suppliers</a></li>
        <li><a href="#blog">Recent Blog</a></li>
        <li><a href="#tests">Total Tests</a></li>
        <li><a href="#company-bio">Company Bio</a></li>
   </ul>
</div>

<div id="company-content" class="col-xs-12 col-sm-12 col-md-10">
    <a name="info" id="info"></a>
    <h4>Info</h4>
    ...
    <a name="properties" id="properties"></a>
    <h4>Company Properties</h4>
    ...

    etc.
</div>

Now that we have a simple navigation let's style it to have sub menus not be shown until the item is in view of the user, just like Bootstrap.

<div id="side-nav" class="col-sm-2 hidden-xs hidden-sm hidden-print affix">
    <ul class="nav">
        <li><a href="#info">Info</a></li>
        <li>
            <a href="#properties">Company Properties</a>
            <ul class="nav">
                <li><a href="#properties-kudos">Kudos</a></li>
                <li><a href="#properties-awards">Awards</a></li>
                <li><a href="#properties-buildings">Buildings</a></li>
            </ul>
        </li>
        <li><a href="#genome">Buyers/Suppliers</a></li>
        <li><a href="#blog">Recent Blog</a></li>
        <li><a href="#tests">Total Tests</a></li>
        <li><a href="#company-bio">Company Bio</a></li>
   </ul>
</div>

<div id="company-content" class="col-xs-12 col-sm-12 col-md-10">
    <a name="info" id="info"></a>
    <h4>Info</h4>
    ...
    <a name="properties" id="properties"></a>
    <h4>Company Properties</h4>
    ...

    etc.
</div>

We've added some sub menu items to a few of the nav elements. At this point if you were to render the page it would show all of the items in the list regardless of it being a sub menu or not. We want to change that so we only see specific sub menus when they are active. To do this we just need to add a little bit of CSS that will trigger the display of the sub menus. When the menu item is not active the sub menus are hidden. When the menu item is activated it displays the sub menus below.

<style>
    #side-nav .nav>.active>a, #side-nav .nav>.active:hover>a, #side-nav .nav>.active:focus>a {
        padding-left: 18px;
        font-weight: 700;
        color: #563d7c;
        background-color: transparent;
        border-left: 2px solid #563d7c;
    }
    #side-nav .nav .nav>.active>a, #side-nav .nav .nav>.active:hover>a, #side-nav .nav .nav>.active:focus>a {
        font-weight: 500;
        padding-left: 28px;
    }

    #side-nav .nav>li>a {
        display: block;
        font-size: 13px;
        font-weight: 400;
        color: #999;
        padding: 4px 20px;
    }
    #side-nav .nav .nav {
        display: none;
        padding-bottom: 10px;
    }
    #side-nav .nav>.active>.nav {
        display: block;
        padding-bottom: 10px;
    }
</style>

<div id="side-nav" class="col-sm-2 hidden-xs hidden-sm hidden-print affix">
    <ul class="nav">
        <li><a href="#info">Info</a></li>
        <li>
            <a href="#properties">Company Properties</a>
            <ul class="nav">
                <li><a href="#properties-kudos">Kudos</a></li>
                <li><a href="#properties-awards">Awards</a></li>
                <li><a href="#properties-buildings">Buildings</a></li>
            </ul>
        </li>
        <li><a href="#genome">Buyers/Suppliers</a></li>
        <li><a href="#blog">Recent Blog</a></li>
        <li><a href="#tests">Total Tests</a></li>
        <li><a href="#company-bio">Company Bio</a></li>
   </ul>
</div>

<div id="company-content" class="col-xs-12 col-sm-12 col-md-10">
    <a name="info" id="info"></a>
    <h4>Info</h4>
    ...
    <a name="properties" id="properties"></a>
    <h4>Company Properties</h4>
    ...

    etc.
</div>

That's all there is to it! No tricky JavaScript required, it's all CSS. Now just adjust the padding, change the color, and add sub menus to your heart's content. You now have a side nav that looks and acts just like Bootstrap's does in their docs.