a developer's notes – a semi-technical web development BLOG

May 30, 2015

Example Slide Menu using Slidebars

Filed under: CSS / Styling,HTML — Duy Nguyen @ 12:50 pm
Tags: , , , ,

I’ve been looking for an easy way to implement a side menu that works with Bootstra’s navbar. Here is a great plugin to use!

http://plugins.adchsm.me/slidebars/

To use this, you just need to add in the Slidebar css and javascript file to your page.  You can also use a cdn:

The CSS

https://cdnjs.cloudflare.com/ajax/libs/slidebars/0.10.2/slidebars.css

The Javascript
https://cdnjs.cloudflare.com/ajax/libs/slidebars/0.10.2/slidebars.js

The trick is to disable Bootstrap’s mobile menu click. You can achieve this by removing the attribute, data-toggle=”collapse” from your button. (I just added a ~tilde to the value like this, data-toggle=”~collapse”, so that I can disable it.) At full view, the Bootstrap navbar drop down menus still work. But the mobile menu will slide out a new menu similar to how a mobile app works.

sidemenu3

When the view port is small enough, the Bootstrap mobile menu will appear. And when you click on this, your side menu will appear!

sidemenu1

I also added a second button to show how I would toggle another side menu.

sidemenu2

Here is a live demo.
http://jsfiddle.net/np5y3r0k/1/

Advertisements

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: