Bootstrap sidebar navigation component (Live demo)

Creating responsive sidebar sliding menu bar in Bootstrap

In this post, I am going to share a nice and simple sliding menu bar that slides from left to right. As you click the typical three horizontal lines of “mobile icon”, the menu will open in a sliding manner.

As it opens, a cross icon will also display to let the users closing the menu. As you hover over any menu item, the hover effect is used to make it prominent while you may also add sub-menus or dropdown menu.

See the following section for the live demonstration and complete code.

Dependencies for this Bootstrap side menu

This sliding menu which is based on Bootstrap requires you adding the references of Bootstrap CSS and jQuery. It also uses a little jQuery code.

The CSS is placed inside the <style> section that you may place in your own external CSS file or a separate file if not intended to use inside the web page.

A demo of sliding menu

Now, have a look at the live demo by clicking the link or image below:

bootstrap sidebar slide

See online demo and code

Following is the markup for the sidebar:

 

The CSS used in demo:

 

A little jQuery code:

 

Get the complete code from the demo page.

Credit of this menu

The credit for this awesome sidebar sliding menu goes to j_holtslander.