juliancruzsanchez / css3sidebar

Super simple css3 sidebar, to style by your own!

css3sidebar

Simple css3 sidebar

Step 1:

include dist/jquery.css3sidebar.js and css/css3sidebar.css in your html.

step 2:

add a trigger button:

<button type="button" class="navbar-toggle collapsed" data-toggle="css3sidebar" data-target="#primary-sidebar" aria-expanded="false">Trigger</button>

##Step 3: Add the sidebar html:

<div class="css3sidebar sidebar-left" id="primary-sidebar">
		<div class="menu-wrapper">
		{{ your custom html }}
		</div>
</div>

##Step 4: Style your sidebar and add custom html code!

##Methods

$(element).css3sidebar('openSidemenu');
$(element).css3sidebar('closeSidemenu');
$(element).css3sidebar('toggleSidemenu');

##SASS When you work with SASS you can edit the breakpoints. By adding the following files to your project:

@import "_base.scss";
@import "_base.show-desktop.scss";
@import "_base.popin.scss";

And prepend thos with:

$sidebarbreakpoint: 768px; // your breakpoint

##Work on desktop screens By default the sidebar will work on mobile and desktop. If you want to exclude the functionality on desktop. add the following to your sidebar wrapper:

	<div class="css3sidebar css3sidebar-lg sidebar-left" id="primary-sidebar"></div>