Bootstrap's Affix menu with sub menus

Question

If you take a look at Twitter Bootstrap's Affix menu, then you'll see that it also has sub menu items. They only show when you click on one of the main menu items or when you scroll pass the titles that correspond to the sub menu item

I have an Affix menu working on my site, but I would like to have the same sub menu functionality as you see on the Bootstrap site.

How can i achieve the same thing? Is it standard functionality in BS 3.x? Or do I have to do this my self? If so, what would be a good approach?

Answer 1

The scroll part is Bootstrap's ScrollSpy component. To customize the style of the active link can be easily done with a little CSS..

/* hide sidebar sub menus by default */
#sidebar.nav .nav {
    display: none;
    font-size:12px;
}

/* show sub menu when parent is active */
#sidebar.nav>.active>ul {
    display: block;
}

Bootply demo: http://bootply.com/109952