Side Panel / Menu

The right page

Inside this panel you can add the code you want, you can use it to show some info, add a menu or an image gallery for example.

Side Panel on the left

Toggle panel left

Hey ya!

Left do this!

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

<div id="side-panel-left" class="box _foreground">
	<h1>Hey ya!</h1>
	<p>Left do this!</p>
</div>

Side panel on the right

Toggle panel right

Hi there!

I'm on the right side.

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

<div id="side-panel-right" class="box _background">
	<h1>Hi there!</h1>
	<p>I'm on the right side.</p>
</div>

Side panel tabbed

If you include the link inside sidepanel it will be shown as a vertical tab. If you want to personalize the appearance just use the data-fc-class parameter.

Like a virgin!

I'm on the right side.

Panel 1

Like a virgin!

I'm on the right side.

Panel 2

<div id="side-panel-tab-1" class="box _foreground">
	<h1>Like a virgin!</h1>
	<p>I'm on the right side.</p>
</div>
<a data-fc-modules="side-panel" data-fc-position="right" data-fc-tab-top="22%" data-fc-width="600" data-fc-tab="true" href="#side-panel-tab-1" class="button button-primary">Panel 1<i class="icon-arrow-right"></i> </a>

<div id="side-panel-tab-2" class="box _foreground">
	<h1>Like a virgin!</h1>
	<p>I'm on the right side.</p>
</div>
<a data-fc-modules="side-panel" data-fc-position="right" data-fc-tab-top="35%" data-fc-tab="true" href="#side-panel-tab-2" class="button button-secondary">Panel 2 <i class="icon-arrow-right"></i> </a>

The side panel is also 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 _primary _vertical hidden">
	<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 _primary _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-tab

If it's set to true will move the open link to a side tab on the side you specified in position

DEFAULT: false

data-fc-tab

If it's set to true will move the open link to a side tab on the side you specified in position

DEFAULT: false

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