Transitions for Off-Canvas Navigations

Some inspiration for transition effects for off-canvas navigations.

sidebartransitions

View demo Download source

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!

View demo Download source

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 145

  1. 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. 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. 3

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

  4. 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. 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. 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. :)

    • 8

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

      give me solution….

Follow this discussion

Leave a Comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>