CSS JS Side Panel

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>
                

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