2 Demos of jQuery side toggle menu: sideToggle

What is sideToggle plug-in?

The sideToggle is a jQuery plug-in that you may use for creating the side toggle menu on your website. Basically, this plug-in toggles the elements sideways, however, the usage can be menus or toggling other elements.

The jQuery default toggle behavior is towards up and down as explained in this tutorial of toggle method. The plug-in enables toggling elements towards left and right.

The plug-in file size is only 1K.

Demo1 Demo2
Developer’s page Download plug-in

How to set up sideToggle plug-in on your website?

Include the plug-in file after the jQuery library:

<script src=’js/sideToggle/sideToggleExtended.js’></script>

You may optionally add the velocity.js library for the better performance over the $.animate() method of jQuery:

<script src=’https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js’></script>

The markup:

Create the container with links if that is a menu:

 

Place the element that will toggle the above menu container:

Initiate the plug-in with left or right options:

 

See the demos below with complete code.

A demo of sideToggle with right option

In this example, the element will toggle towards the right side. For that, the direction option is set as right. Click on the icon towards the right corner (three horizontal lines) and see how menu appears and disappears in the demo page:

jQuery side menu

See online demo and code

The markup for this example:

 

The jQuery code:

 

A demo of side menu towards the left

For creating the side menu that slides from left, use the left direction option. For that, you also need to make slight changes in the CSS file that comes up with the plug-in.

Find the #sideMenuContainer and change the right: -200px;  to left: -200px;, that’s it. If you do not make this small change, then first time menu will slide from the right to left.

See the demo:

jQuery side menu left

See online demo and code

You can see, the three horizontal icon for the menu is placed towards left. As you click it, the element containing menu slides from the left. If you click it again, it disappears towards the left.

The jQuery code:

 

I have also changes the reference of style.css to style2.css where left: -200px; property is used.

Customizing the look of the menu

As motioned earlier, the plug-in also comes up with the style.css file that also defines the color scheme of the menu. The default is blackish as shown in above two demos.

If you require modifying to match it with your web design then you may look for different properties defining the layout of the sliding menu, link colors, and other elements.

The font-awesome icons are used with menu items and for that its library is also included in the <head> section.

For more on this cool plug-in, visit the developer page.