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 129

  1. 1

    Hey! Is there a way to get animated scroll to work with this? I’ve tried a couple of different plugins but no luck.

  2. 2

    Pretty neat examples. I’ve tweaked it quite a lot for my own purpose, though, I wonder how to make it open without taking me back to the top of the page? I tried using a fixed behavior and removing top:0 position but no luck. I thought that maybe you’d have an idea. I’ll keep looking and will reply if I find a solution.

    Thanks for the inspiration and happy new year!

    Ed

    • 3

      Hey Edouard,

      I reckon this might be too late, but what you can do to fix this issue is use an inner container () and set it as fixed position with overflow-y: scroll and height the height of the screen (with javascript – $(window).height()). That way you can have a big list that is scrollable and still have to menu always there for ya on scroll.

      Hope that helps! Let me know of you need further details.

      Good luck!

      Leo

  3. 6

    Anybody have any idea how I can switch the menu from sliding in from the left to sliding in on the right? I can’t seem to figure out how it’s being positioned…

  4. 8

    hi mary!
    whenever i look for awesome web-design stuffs i always stumbled on your works. you are truly amazing.. :)

    sincerely,
    ella (^__^)

  5. 9

    This is awesome work! I was wondering if the following was possible:

    On the “Reveal” type, is it possible to have a child navigation panel that reveals to the side of the parent main navigation? The effect would be the same as when you initially reveal the parent. So when you click on a parent link with children, then that child panel reveals, an also pushes the content area the same way.

    Is it also possible in that same setup to have a small portion of the parent navigation displayed, such as just the vertical list of icons, which then reveal fully when clicked?

  6. 10

    This is amazing! Love your site.

    With this example things were looking a little odd in IE10 until I added:
    .st-content-inner {
    height: 100%;
    }

  7. 11

    Thanks for this and other similar articles which are so useful in deciding which transitions to use in a given circumstance by interactively playing with them! Keep up the great work!

    This particular one is about off-canvas side navigation/menus, is there an equivalent one for top nav menus, showcasing the different transitions that could be used to make them appear and disappear? i.e. effectively the same demo with the page rotated 90 degrees clockwise?

  8. 12

    Has anyone noticed how this effects the scrolling on mobile devices? It becomes choppy and stiff and the phone has trouble rendering content off the screen.

  9. 15

    Hey trying to get the transitions for the off-canvas navigation to work on hover and I’m failing horribly, is there a simple way to do it?

    Thanks!

    • 16

      change “eventtype” in function init() to “onmouseover”, instead of eventtype = mobilecheck() ?
      'touchstart' : 'click'

  10. 17

    I am working on a project with this. It has a frame where the data attribute changes upon the click of a next or previous button. The problem I am having is that when i click the button the frame’s data attribute wont change/refresh until i open the menu. How do i get it to change with having to open the menu?

  11. 18

    Great tutorial Mary, lovely effects, I had a question, for the slide in top effect, how can I get the nav block to fly in from the opposite side, is it done through JS?

  12. 19

    I am working in a project now, and I want to apply these nav.bar with the Foundation 5 libraries. Somebody can help me?

  13. 20

    This is awesome but would be way more useful/flexible to have an example with no filler and only the bare minimum required libraries. Ex: only index.html, component.css, and sidebarEffects.js (no classie.js code in sidebarEffects.js either).

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>