jquery plugin based on Jqeury side bar slider

Sidebar transitions is a variety of forms of sidebar sliders for JQuery plug-ins, which include 3D rotary slide out, 3D delay rotation slide out, 3D rotation disappear, direct launch, slide out from top down and so on with creative Off-canvas navigation slide out effect.

Today we want to share with you a set of transitional effects. This time we'll explore the sidebar or the close, we use the multi-level push menu to convert the content of the canvas. The idea is to show that some of the hidden sidebar has subtle transition elements themselves also on the remainder of the content.

The usual sidebar slides and pushes the contents aside. But there are more possibilities, subtle and fanciful influences, and today we are going to give you some inspiration.

The structure of our demo is very specific, because we want to be able to show all the effects on one page. But overall, we need a sidebar element that will be inside or outside of the push package, depending on whether we want to add the top package or the push down.

So, we will have

<div id= "St-container"  class= "St-container" >     <!-- content  push wrapper -->     <div class= "St-pusher" >          <nav class= "St-menu st-effect-1"  id= "menu-1" >   
          <!-- sidebar content -->         </nav>          <div class= "St-content" >              <div class= "St-content-inner" >                  <!-- the content -->              </div><!-- /st-content-inner -->          </div><!-- /st-content -->     </div><!-- / st-pusher --> </div><!-- /st-container --> or <div id= "St-container"   class= "St-container" >     <nav class= "st-menu st-effect-1"  id= "Menu-1" >         <!-- sidebar content -->      </nav>     <!-- content push wrapper -->      <div class= "St-pusher" >         <div  class= "St-content" >             <div  class= "St-content-inner" >                  <!-- the content -->              </div><!-- /st-content-inner -->          </div><!-- /st-content -->     </div><!-- / st-pusher --> </div><!-- /st-container -->

An example of the effect is the following. We add a pivot value to the main container and then rotate the push wrapper and the menu in three-dimensional space:

. st-effect-7.st-container {

perspective:1500px;

perspective-origin:0% 50%

}

. St-effect-7. st-pusher {

transform-style:preserve-3d

}

. St-effect-7.st-menu-open. St-pusher {

transform:translate3d (300px, 0, 0);

}

.    St-effect-7.st-menu {

Transform:translate3d ( -100%, 0, 0) rotatey ( -90deg);

transform-origin:100% 50%;

Transform-style:preserve-3d

}

.    St-effect-7.st-menu-open. st-effect-7.st-menu {

visibility:visible;

Transform:translate3d ( -100%, 0, 0) rotatey (0deg);

}

Note that we only use visibility here because we are demonstrating multiple sidebar. If you have a sidebar, you do not have to set visibility values from hidden visibility.

Some browsers do not support the conversion of pseudo elements (our overrides), so you may see fast flashes in these browsers (some mobile browsers).

IE10 does not support transform style: Preserve-3d This will break nested three-dimensional conversion elements. We use this example so that you can't see the effect of these effects correctly.

We hope this series will give you some inspiration and create some good results, I hope you like these tools to convert and find them inspiring!