Bootstrap sidenav

Bootstrap official website style sidebar navigation plugin!

Dependences

• Bootstrap 3 CSS
• jQuery
• Bootstrap 3 Affix plugin
• Bootstrap 3 ScrollSpy plugin

How to use

include CSS style

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="sidenav.css">

include JavaScript

<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="sidenav.js"></script>

Via data attritube

<div id="post" 
     data-toggle="sidenav" 
     data-container="#sidenav" 
     data-hs="h1, h2, h3"
     data-top="#sidenav"
     data-bottom=".bs-footer"
     data-to-top-href="#top"
     data-to-top-text="Back to top">

Via JavaScript

$('#post').sideNav({
    container: '#sidenav',
    hs: ['h3', 'h4', 'h5'],
    top: 125,
    bottom: 50,
    toTopHref: '#top',
    toTopText: 'Back to top'
});

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-container="#sidenav".

Name	Attribute	type	default	description
-	data-toggle	String	sidenav	Active sidenav without writing JavaScript.
container	data-container	String	'body'	Element to contain the sidebar navigation.
hs	data-hs	Array/String	['h2', 'h3', 'h4']	Headers to generate sidebar navigation.
smartId	data-smart-id	Boolean	false	Set true to use the ID link with title text.
top	data-top	Number/String	undefined	Pixels to offset top from screen when calculating position of scroll.
bottom	data-bottom	Number/String	undefined	Pixels to offset bottom from screen when calculating position of scroll.
toTopHref	data-to-top-href	String	'#top'	The link of back to top.
toTopText	data-to-top-text	String	'Back to top'	The text of back to top.