CSS JS Side Menu

The easiest way for doing your menu responsive.

Side menu on the left

	                <a data-fc-modules="side-panel" href="#side-menu-left" data-fc-width="200">Toggle menu left</a>

<div id="side-menu-left" class="navigation navigation-vertical hidden">
	<!-- Your content -->
	<ul>
		<li><a href="#">List 1</a></li>
		<li><a href="#">List 2</a></li>
		<li><a href="#">List 3</a></li>
	</ul>
</div>
                

Side menu on the right

	                <a data-fc-modules="side-panel" data-fc-position="right" href="#side-menu-right"  data-fc-width="200">Toggle menu right</a>

<div id="side-menu-right" class="navigation navigation-vertical hidden">
	<!-- Your content -->
	<ul>
		<li><a href="#">List 1</a></li>
		<li><a href="#">List 2</a></li>
		<li><a href="#">List 3</a></li>
	</ul>
</div>
                

Attributes

href

The href of the link will be an anchor to the menu.

data-fc-position

Define the left or right position for the panel.

DEFAULT: left

data-fc-width

Define the width for the panel.

DEFAULT: 15.6em

data-fc-clone

If you set this to true the content inside the panel should be a clone of the original. This is very useful to create sidemenus using the same menu of desktop, because the copy ignores the desktop, mobile and tablet classes.

DEFAULT: false