Super Simple jQuery Sidebar Sliding Menu Plugin - Slidx

Just another jQuery plugin for creating sidebar menu which slides out from the left or right hand side of your browser window. Once the sliding menu is opened, a fullscreen overlay will cover over the document content with subtle fade in/out effects.

How to use it:

1. Make sure you have jQuery library included in your document. And then add the jQuery slidex plugin's script after it.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="src/js/slidx.js"></script>

2. Create a link with CSS class 'slidx-button' to toggle a sliding menu.

<a id="slidx-button">Menu</a>

3. Wrap your menu items into a container element with CSS class of 'slidx-menu'.

<div class="slidx-menu">
  <li href="#"><a href="#">Link</a></li>
  <li href="#"><a href="#">Link</a></li>
  <li href="#"><a href="#">Link</a></li>
  ...
</div>

4. Add a background color to the sliding menu to improve its appearance.

.slidx-menu { background-color: #777777; }

5. Config the sliding menu at the beginning of the slidx.js.

• var button = '# slidx-button': Element in which the user clicks to open and close the menu.
• var menu = '.slidx-menu': Responsive element that contains the menu. 
• var mode = 'click': Write 'click' or 'hover' if you want to open in menu by pressing the button or override it. 
• var buttonMove = 'yes'': Indicates whether you want the button to also move when you open the menu mode 'click' ('yes' or 'no')
• var side = 'right': Indicates which side is the menu ('right' or 'left') 
• var shadow = 'yes': Indicates whether a shadow is created in the rest of the page when the menu ('yes' or 'no') opens 
• var opacity = 0.6: Opacity of the shadow that is created in the rest of the page with the menu open. (0 = transparent 1 = opaque) 
• var size = 250: Menu width. 
• var speed = 0.5: Opening and closing speed (in ms.​​) 
• var menuTime = 300: Time taken to close the menu when you click an item in the menu (in ms.).
• var menuTop = 0: Space between the top of the menu and the top of the screen (in px. Default = 0).
• var menuBottom = 0: Space between the bottom of the menu and the bottom of the screen (in px. Default = 0).
• var zIndexMenu = 98: z-index of the menu.

Change log:

v3.0 (2014-09-14)

• Fixing bugs.
• Adding new variables.

v2.8 (2014-08-18)

• Fixing bugs.
• Adding more configurations.

---

This awesome jQuery plugin is developed by ivarcia. For more Advanced Usages, please check the demo page or visit the official website.