options.html

<h2>Options</h2>

<p>This is a full list of options.
You can override the single option by using the plug-in API or directly in the function.</p>

<h3>How to use the public access to plug-in options:</h3>

<p>The base API is <code>$.fn.simpleSidebar.settings</code>. Check <a href="#options-list">Options List</a> out to see the full list of available APIs.</p>

<pre>
$.fn.simpleSidebar.settings.opener = '#toggle-sidebar';
$.fn.simpleSidebar.settings.wrapper = '#wrapper';
$.fn.simpleSidebar.settings.sidebar.align = 'left';
$.fn.simpleSidebar.settings.sidebar.width = '300';
$.fn.simpleSidebar.settings.sidebar.closingLinks = '.close-sidebar';
$.fn.simpleSidebar.settings.sidebar.css.zIndex = '3000';

$( '#sidebar' ).simpleSidebar();
</pre>

<p>Overriding multiple options can be buggy, especially when you try to override <code>sidebar</code>, the plug-in will crash.</p>

<pre>
$.fn.simpleSidebar.settings.mask.css = {
	//your style
};
</pre>

<h3 id="options-list" class="anchor">Options List</h3>

<ul>
	<li><b>opener</b>: selector for the button/icon that will trigger the animation.</li>
	<li><b>wrapper</b>: selector for the content of your entire website except all elements that are positioned fixed (for example <code>#navbar</code> and </code>#sidebar</code>), position absolute elements inside this wrapper must be wrapped inside a div with </code>position:relative</code> attribute.</li>
	<li><b>ignore</b>: selector for all elements that must be ignored.</li>
	<li><b>add</b>: selector for all elements that must be added if the plugin is ignoring them accidentally.</li>
	<li><b>attr</b>: the <code>data-*</code> attribute to make the plugin works. If <code>simplesidebar</code> is somehow causing you issues, you can change it.</li>

	<li><b>animation</b>:
		<ul>
			<li><b>duration</b>: the duration of the animation in milliseconds.</li>
			<li><b>easing</b>: the type of animation. For more animations include the <i>jQuery-UI</i> library and check out <a href="https://jqueryui.com/easing/" target="_blank">this page</a>. I strongly suggest not to play with easing because they haven't been tested all yet. I suggest to use simple easing like <code>easeOutQuint</code>.</li>
		</ul>
	</li>

	<li><b>sidebar</b>:
		<ul>
			<li><b>align</b>: default is <code>undefined</code> which means that is aligned to <i>right</i>. If you want to align it to left, write <code>left</code>.</li>
			<li><b>width</b>: the max width of the sidebar, this option is default to 300, please change it as you please.</li>
			<li><b>gap</b>: the gap is the space between the left margin of the sidebar and the left side of the window (and viceversa). It is useful so that the user can click that space to close the sidebar.</li>
			<li><b>closingLinks</b>: links or elements that close the sidebar. I suggest to choose a class and give it to all links and other elements such as icons, banner, images, etc, that are links or that are supposed to be clicked. By default it is <code>a</code> so every link in the sidebar will close the sidebar. You can use multiple selectors too but, avoid using nested selector otherwise the function will be triggered twice. For example you can select <code>'a, .close-sidebar'</code> but if an element is <code>&lt;a class=".close-sidebar"&gt;</code> the animation will be triggered twice.</li>
			<li><b>css</b>: here you can store all css, anyway I suggest not to add more css attributes to the one below.
				<ul>
					<li><b>zIndex</b>: by default is is 3000 but you have to change it to the higher z-index number in your css plus 1.</li>
				</ul>
			</li>
		</ul>
	</li>

	<li><b>sbWraper</b>:
		<ul>
			<li><b>display</b>: <code>true</code> or <code>false</code>. <code>false</code> will remove this option.</li>
			<li><b>css</b>: here you can store all css attributes to give the sbWrapper. However I suggest to do it in your stylesheet except for these below. You can call this by its data attribute ex: <code>[data-simplesidebar="sbwrapper"]</code>.
				<ul>
					<li><b>position</b>: <code>'relative'</code>.</li>
					<li><b>height</b>: <code>'100%'</code>.</li>
					<li><b>overflowY</b>: <code>'auto'</code>.</li>
					<li><b>overflowX</b>: <code>'hidden'</code>.</li>
				</ul>
			</li>
		</ul>
	</li>

	<li><b>mask</b>:
		<ul>
			<li><b>display</b>: <code>true</code> or <code>false</code>. <code>false</code> will remove this option.</li>
			<li><b>css</b>: here you can store all css attributes to give the mask div. However I suggest to do it in your css file except for these below. You can call this div by its data attribute for example: <code>[data-simplesidebar="mask"]</code>.
				<ul>
					<li><b>backgroundColor</b>: the color of the mask. By default is <code>'black'</code>.</li>
					<li><b>opacity</b>: by default is 0.5.</li>
					<li><b>filter</b>: IE opacity 0.5 = 50 and so on: <code>'Alpha(opacity=50)'</code>.</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>