jQuery Side Toggle Menu: sideToggle

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.

Note: 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 the left and right.

The plug-in file size is only 1K.

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:

<div id="sideMenuContainer">

  <h2>heading</h2>

  <a href="https://www.jquery-az.com/jquery-tips/" title="jQuery Tutorials"><span class="fa fa-bolt"></span></a>

  <a href="https://www.jquery-az.com/bootstrap-tips-tutorials/" title="Bootstrap"><span class="fa fa-exclamation-circle"></span></a>

  <a href="https://www.jquery-az.com/javascript-tutorials/" title="JavaScript"><span class="fa fa-map"></span></a>

  <a href="https://www.jquery-az.com/html-tutorials/" title="HTML"><span class="fa fa-info-circle"></span></a>

  <a href="https://www.jquery-az.com/css-tutorials/" title="CSS"><span class="fa fa-users"></span></a>

</div>

Place the element that will toggle the above menu container:

  <div id="sideMenu">

    <span class="fa fa-navicon" id="sideMenuClosed"></span>

  </div>

Initiate the plug-in with left or right options:

$(document).ready(function(){

  $('#sideMenu').sideToggle({

    moving: '#sideMenuContainer',

    direction: 'right'

  });

 

});

See the demos below with the 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 the menu appears and disappears on the demo page:

A graphical animated demo of jQuery Side Toggle Menu: sideToggle

The markup for this example:

  <nav>

  <a href="#" id="userPLink">

    <span class="fa fa-user"></span>

    username

  </a>

  <div id="sideMenu">

    <span class="fa fa-navicon" id="sideMenuClosed"></span>

  </div>

</nav>

 

<div id="sideMenuContainer">

  <h2>heading</h2>

  <a href="https://www.jquery-az.com/jquery-tips/" title="jQuery Tutorials"><span class="fa fa-bolt"></span></a>

  <a href="https://www.jquery-az.com/bootstrap-tips-tutorials/" title="Bootstrap"><span class="fa fa-exclamation-circle"></span></a>

  <a href="https://www.jquery-az.com/javascript-tutorials/" title="JavaScript"><span class="fa fa-map"></span></a>

  <a href="https://www.jquery-az.com/html-tutorials/" title="HTML"><span class="fa fa-info-circle"></span></a>

  <a href="https://www.jquery-az.com/css-tutorials/" title="CSS"><span class="fa fa-users"></span></a>

  <a href="https://www.jquery-az.com/python-tutorials/" title="Python"><span class="fa fa-camera"></span></a>

  <a href="https://www.jquery-az.com/java-tutorials/" title="Java"><span class="fa fa-commenting"></span></a>

  <a href="https://www.jquery-az.com/tag/animations/" title="Animations"><span class="fa fa-heart"></span></a>

  <a href="https://www.jquery-az.com/tag/table/" title="Tables"><span class="fa fa-flag"></span></a>

</div>

jQuery code:

<script>
 

$(document).ready(function(){

  $('#sideMenu').sideToggle({

    moving: '#sideMenuContainer',

    direction: 'right'

  });

 

});

</script>

Here is the complete code:

<!DOCTYPE html>
<html>
<head>
  <link href='https://fonts.googleapis.com/css?family=PT+Sans:400,700italic,700,400italic|PT+Serif:400,700,400italic,700italic|Vollkorn|Rokkitt:400,700' rel='stylesheet' type='text/css'>

  
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/sideToggle/style.css">
</head>
<body>
  <nav>
  <a href="#" id="userPLink">
    <span class="fa fa-user"></span>
    username 
  </a>
  <div id="sideMenu">
    <span class="fa fa-navicon" id="sideMenuClosed"></span>
  </div>
</nav>

<div id="sideMenuContainer">
  <h2>heading</h2>
  <a href="https://www.jquery-az.com/jquery-tips/" title="jQuery Tutorials"><span class="fa fa-bolt"></span></a>
  <a href="https://www.jquery-az.com/bootstrap-tips-tutorials/" title="Bootstrap"><span class="fa fa-exclamation-circle"></span></a>
  <a href="https://www.jquery-az.com/javascript-tutorials/" title="JavaScript"><span class="fa fa-map"></span></a>
  <a href="https://www.jquery-az.com/html-tutorials/" title="HTML"><span class="fa fa-info-circle"></span></a>
  <a href="https://www.jquery-az.com/css-tutorials/" title="CSS"><span class="fa fa-users"></span></a>
  <a href="https://www.jquery-az.com/python-tutorials/" title="Python"><span class="fa fa-camera"></span></a>
  <a href="https://www.jquery-az.com/java-tutorials/" title="Java"><span class="fa fa-commenting"></span></a>
  <a href="https://www.jquery-az.com/tag/animations/" title="Animations"><span class="fa fa-heart"></span></a>
  <a href="https://www.jquery-az.com/tag/table/" title="Tables"><span class="fa fa-flag"></span></a>
</div>

<div id="logo" class='colorchange'>
  toggling
  <span>things is oddly satisfying</span>
</div>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js'></script>
<script src='js/sideToggle/sideToggleExtended.js'></script>

<script>
    
$(document).ready(function(){
  $('#sideMenu').sideToggle({
    moving: '#sideMenuContainer',
    direction: 'right'
  });

});
</script>

</body>
</html>

A demo of the side menu towards the left

For creating the side menu that slides from the 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 right to left.

See the output:

jQuery side menu left

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

jQuery code:

$(document).ready(function(){

  $('#sideMenu').sideToggle({

    moving: '#sideMenuContainer',

    direction: 'left'

  });

 

});

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

Customizing the look of the menu

As mentioned earlier, the plug-in also comes up with the style.css file that defines the color scheme of the menu.

The default is blackish as shown in the 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.