Transitions for Off-Canvas Navigations

Some inspiration for transition effects for off-canvas navigations.

Today we’d like to share another set of transition effects with you. This time we’ll explore transitions for sidebars or off-canvas content like the one we’ve used in the Multi-Level Push Menu. The idea is to show some hidden sidebar with a subtle transition on the element itself and also on the remaining content. Usually the sidebar slides in, pushing the other content to the side. But there are many more possibilities for subtle and fancy effects and today we want to give you some inspiration.

The structure of our demo is very specific because we want to be able to show all effects in one page only. But in general, we need a sidebar element that will be either inside or outside of a push wrapper, depending on whether we want the sidebar to be on top of the push wrapper or under it.
So, either we’ll 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"><!-- this is the wrapper for the content -->
			<div class="st-content-inner"><!-- extra div for emulating position:fixed of the menu -->
				<!-- 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"><!-- this is the wrapper for the content -->
			<div class="st-content-inner"><!-- extra div for emulating position:fixed of the menu -->
				<!-- the content -->
			</div><!-- /st-content-inner -->
		</div><!-- /st-content -->

	</div><!-- /st-pusher -->

</div><!-- /st-container -->

An example effect is the following. We add a perspective value to the main container and then we rotate the push wrapper and the menu in 3D:

.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’re only using visibility here because we have more than one sidebar in our demo. If you just have one sidebar, you won’t have to set the visibility value from hidden to visible.

Some browsers don’t support transitions on pseudo-elements (our overlays), so you might see a quick flicker in those browsers (e.g. some mobile browsers).

IE10 does not support transform-style: preserve-3d which will break nested 3D transformed elements. We use this in a couple of examples, so you won’t be able to see the effect correctly for those ones.

SidebarTransitions_01

For the demos we are using the beautiful Linicons iconfont by Sergey Shmidt created with the help of the IcoMoon app.

We hope this collection gives you some inspiration for creating some nice effects.

I hope you enjoyed these sidebar transitions and find them inspiring!

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 174

Comments are closed.
  1. I am actually trying to marry this technique with an animated menu icon, issue I run across is the at-pusher doesn’t allow for the script to active the animate back to the normal hamburger menu. http://fragileinc.com/testing-nav/ is where this being tested. any help would be appreciated.

  2. Hi, I use this fantastic effect on my website, you can find here in a demo server fsdemo.altervista.org. I removed the overflow:hidden property from .st-container because the entire page doesn’t scroll if that parameter is set on scroll. But I want to set the overflow on hidden when I click on the open push button so I write this javascript:

    $(document).ready(function(){
    $(“.pushmenu”).click(function(){
    $(“html”).css(‘overflow’,’hidden’);
    });
    });

    $(document).ready(function(){
    $(“#filterPush”).click(function(){
    $(“html”).css(‘overflow’,’auto’);
    });
    });
    $(document).ready(function(){
    $(“body”).click(function(){
    $(“html”).css(‘overflow’,’auto’);
    });
    });

    It works, but closing the menu I lost the scroll effect, can somebody help me?
    Thanks

  3. This is awesome. I am currently trying to implement this into a wordpress navigation. Finger’s crossed!

    • Trying the same… But for some reason it’s not working in my theme, although I have the same html-structure… Did you get it working in wordpress yet?

  4. Great article! I’ve learned a lot from this.

    Could anyone help to explain why do we need the following line of code in sidebarEffects.js file (https://github.com/codrops/SidebarTransitions/blob/master/js/sidebarEffects.js)?

    document.removeEventListener(eventtype, bodyClickFn);

    The function “bodyClickFn” already has “resetMenu();” to hide the menu, just wondering why do we need to call this recursion?

    I’m still learning javascript and any explanation is much appreciated!

  5. I’m using the “st-effect-4” one. Also I have done some changes to slide it from right. But how can I make it a multilevel menu? That means when I will click on the menu level one then the corresponding sub menu will also slide from right.

    Could someone suggest on this please??

  6. I’m using the st-effect-3 and it is perfect, but I’d like to set the position of the navigation into fixed one, so that the visitors don’t need to scroll all the way to the top just to see the navigation. How can I do that?

    Oh, by the way it is a great script. Thank you very much for sharing. 🙂

    • are you find the solution for this one working in IE..

      give me solution….

    • Need a solution for IE9.
      Does someone has a workaround or maybe an other off canvas navigation (push effect) which work on all commo browsers (ie8/9+) ?

    • Thomas –

      Simply unreal. I’m def. going to be watching you. Wow. You don’t know how much you helped me. You resolved all the issues I was having implementing this approach for a project. You are the bomb. For true. I’ll send you a link privately when my little “performance” piece is live. Thank you for being so generous with your time and talent.

      Foks – take a look. You’ll be dropping your draws for drawers.

      Showing some love from New Orleans

      Mark

    • Thank you for your kind words Mark! Glad I could help.

      I’ll be adding more features and improvements over the next few weeks, so stay tuned 🙂

      Looking forward to seeing your project!

  7. Bug for IE9, the solution is change all :

    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);

    in :

    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);

    and :

    -webkit-transform: translate(-300px,0);
    transform: translate(-300px,0);

    in :

    -webkit-transform: translate(-300px,0);
    -moz-transform: translate(-300px,0);
    -ms-transform: translate(-300px,0);
    transform: translate(-300px,0);

    Sorry for my english, I’m french,

    Good luck 😉

  8. thank you thank you thank you thank you thank you thank you thank you… omg thank you. This rocks! Fully working with wordpress 4.2.2

    • I’m having a strange comparability issue with component.css and some simple scroll based java script effects. As soon as I disable component.css my scripts run fine. Any suggestions?

      jQuery(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= 200) { $(".header").addClass("scrolling"); } else { $(".header").removeClass("scrolling"); } });

      Running wordpress, hence the jQuery instead of the usual $

  9. Hey there, do you have any idea, did someone wrap this lovely code into a wordpress plugin? I’ve tried this (http://goo.gl/HTy3KI) described approach but without result.Any help will be much appreciated.tks
    @admin, please remove the above messages thanks.

  10. Thank you for this well explained article!
    Is there a way to make this navigation only visible for mobile screens?

  11. thank you so much for this tutorial.any solution for ie8 error(JS object expected error), also not working menu

  12. My header inside the main container is fixed to scroll with user. When I use this menu, the header only is fixed when the side menu is hidden. When I open the side menu, the header becomes fixed. Any ideas how to keep it fixed?

    Thanks!

  13. I have two questions:

    1- I load all the scripts using bundles and the only way to make this effect work is adding the tag in the view (sorry i forgot to mention that i’m using angular for the frontend). if i put the class.js and sidebarEffect.js the script will be loaded but the effect won work.

    2.the other question is how to make a button to open and close de effect

  14. Hi,

    Menu is on the right side and every time I go to scroll the menu pops up.
    Is there a way to have a delay before the menu pops up on mouseover? TY!

  15. Hello, first of all. Awesome!

    I was wondering if I could use any element to trigger the closing animation? I want to use a hamburger menu to open or close the nav.

    • That site was the source of a function we use in the script. I don’t know what happened to the site… Cheers.