Slide In/Out Sidebar

We are using this template in this article, download it or simply use your own

Sidebar Animation is not difficult anymore. Sliding a sidebar in/out don’t need so much to make it done with AnimatorPro plugin, so easy to do it, you just have to styling your own sidebar.

let’s start by creating new sidebar in our template and when we click on TRY THE DEMO button inside the third section, the sidebar appear and when we click on any place in the page it will disappear.

Add new div under body tag

Code   
  1. <div class="sidebar-container">
  2. <div class="sidebar-bg"></div>
  3. <div class="sidebar">
  4. <div class="sidebar-title text-center">
  5. <h1>I'm Sidebar</h1>
  6. </div>
  7. <ul class="media-list">
  8. <li class="media">
  9. <a class="pull-left" href="#">
  10. <img class="media-object" src="images/seagulls.jpg" width="100">
  11. </a>
  12. <div class="media-body">
  13. <h4 class="media-heading">Media heading</h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  14. </div>
  15. </li>
  16. <li class="media">
  17. <a class="pull-left" href="#">
  18. <img class="media-object" src="images/water-bg.jpg" width="100">
  19. </a>
  20. <div class="media-body">
  21. <h4 class="media-heading">Media heading</h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  22. </div>
  23. </li>
  24. </ul>
  25. <button type="button" class="btn btn-danger btn-lg btn-block">
  26. <i class="fa fa-remove"></i> Close Sidebar
  27. </button>
  28. </div>
  29. </div>

Now add some style to it to make it beautiful

Code   
  1. .sidebar-bg {
  2. width: 100%;
  3. height: 100%;
  4. position: fixed;
  5. top: 0;
  6. left: 0;
  7. background-color: rgba(0, 0, 0, 0.5);
  8. z-index: 1000;
  9. display: none;
  10. }
  11.  
  12. .sidebar-bg.open {
  13. display: block;
  14. }
  15.  
  16. .sidebar {
  17. position: fixed;
  18. width: 400px;
  19. height: 100%;
  20. top: 0;
  21. left: 0;
  22. background-color: #363636;
  23. z-index: 9999;
  24. padding-left: 20px;
  25. padding-right: 20px;
  26. border-left: 1px solid black;
  27. overflow-y: auto;
  28. padding-bottom: 50px;
  29. }
  30.  
  31. .sidebar h1 {
  32. color: white;
  33. text-align: center;
  34. font-weight: bold;
  35. border-bottom: 3px solid whitesmoke;
  36. display: inline-block;
  37. padding-left: 10px;
  38. padding-right: 10px;
  39. padding-bottom: 10px;
  40. }
  41.  
  42. .sidebar .media {
  43. color: white;
  44. }

Please give yourself some time to explore it. Adding the animation settings come !. Select the TRY THE DEMO button, click Animation 1 change the trigger to Click and target to .sidebar. Now change the Init state to left:-400px; and the Step 1 to left:0;, Save it and test it !.

If you click again on the button you’ll see the sidebar will not hide, do you know how to fix that? …Yeah you’re right, just change the Step 1 under the SECOND CLICK section to left:-400px;, but we will not do that, let’s click on CLOSE SIDEBAR button inside the sidebar, go to ACT panel, click on Animation 1 change the trigger to Click, target to .sidebar and Step 1 under ANIMATION STEPS to left:-400px;, test it, it’s working now.

We need to hide the sidebar when user click wherever outside the sidebar, and that’s why we have a div with class sidebar-bg. Again click on TRY THE DEMO button, click on Animation 2 change the trigger to Click and the target to .sidebar-bg, under the ANIMATION STEPS change the Add classes field to open and that’s mean, when the user click on the button add open class to the sidebar-bg, you have to add open to Add classes under the SECOND CLICK section, save it and text it, do you see what happened?. If you click on close sidebar the sidebar-bg will still there, just select the close button and add a new animation setting with target .sidebar-bg and change the Remove classes field under the ANIMATION STEPS and SECOND CLICK to open, that means remove class open from sidebar-bg when the user click the close button.

Finally when the user click on that sidebar-bg we want the sidebar and sidebar-bg to disappear, so we will add two animation settings to the sidebar-bg, the first one will be to remove open class from sidebar-bg and the second one is to side out the sidebar.

  • Animation 1
    • GENERAL
      Trigger: Click
    • ANIMATION STEPS
      Remove classes: open
    • SECOND CLICK
      Remove classes: open
  • Animation 2
    • GENERAL
      Trigger: Click
      Target: .sidebar
    • ANIMATION STEPS
      Step 1: left:-400px;

Leave a comment

Your email address will not be published. Required fields are marked *