Transitions for Off-Canvas Navigations

Some inspiration for transition effects for off-canvas navigations.

By in Playground on
Demo Code

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.

Trigonometry in CSS and JavaScript: Introduction to Trigonometry

Repetition Image Hover Effects

Trigonometry in CSS and JavaScript: Beyond Triangles

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

Feedback 174

Comments are closed.

  1. It is not an massive and / or “messy” code. And has no relation with Flash technology. It is just an example and it’s a good one, as always. Great job ML!

  3. Really??? Someone did us a favor by posting free examples. No one is forcing anyone to use anything here.

  4. Hi Mary, Thanks for another amazing piece of inspiration! A few people have mentioned the scrolling on mobile (iOS) do you have any advice on what could cause this to happen. I’ve tried lots of things like looking at the overflow, positioning etc but cannot seem to pin poj the problem.

  5. Had I not seen this site my mind would not have being open to such ideas. Read the first few comments and I understand that people are concerned about the size of code. However, I feel people also need to focus on the ideas behind the design. Yes it may be bloated but I think it does not mean we cannot learn. What I think is people can just look at the idea and refine the code. The design and development is constantly improving. Thanks for sharing.

  6. Well done, ML.
    Really enjoyed your articles, I think they are truly amazing!
    And this one has just made my day 😀

  8. Awesome example, it works really fine, I figured out how to cut all the code and I’ve it running in one application without too much extra code. One thing I want to do is to resetMenu on any event…. do you know how can I do that? I’m including that into an Angular project, so use the href is not a solution.

  9. Gorgeous menu. I am experiencing an issue where the menu gets cut off, if the window is shorter than the length of the menu. This happens on my phone and in the web browser. Any recommendations would be greatly appreciated!

    • Brooks,

      I am having the same issue for iOS. The “rubberband” scrolling is not working on the menu nor the main page. Is there a way to add scrolling to the page or the menu?

    • scrolling fix is mentioned on page 1 of the comments. Delete this portion from the component.css file and you should be good.

      “html,body,.st-container,.st-pusher,.st-content {height: 100%;}”

    • @Johnny the only down side to deleting the code:

      html,body,.st-container,.st-pusher,.st-content {height: 100%;}

      Is that your menu height is not100% if the content is not longer than 100% of your current screen. Yes removing the code does fix the scroll issue but presents another issue in itself.

      Just an FYI to anyone 🙂

  10. MARY LOU you are so awesome, all your experiments are making me smile of excitement, i feel like implementing all the ideas all at once.

    How do u come up with all this?

  12. I’ve implement it in an website, but if i click on an link of the navigation it doesn’t respond. Can some one help me with this please?!?!

    • Sounds like something is named or arranged wrong in your code. Try debugging your page, see if there’s any Javascript errors on the page, make sure you are including the classie library and the appropriate styles.

  13. Hi,
    I want the menu to disappear when I click a link/button of the menu (just like what happens if I click outside of the menu). My skills in JS are too bad for figureing out how to do this :/ Can anybody help me please?

  14. as of right now i’m localhost-ing it
    but i am getting 1 javascript error (all 3 Chrome & Firefox IE10 (all update-to-date too))
    “TypeError: container is null sidebarEffects.js:50” or line 59 because i am using Brauson Yager’s version
    Can anyone help i haven’t gotten around to learning javascript yet

    • Try it

      //ADD A NEW DIV HERE
      Sidebar

      Using jquery:

      $(function(){
      $(window).scroll(function(){
      if($(‘#fixar-topo’).height() >= $(window).height()){
      $(‘#fixar-topo’).css(‘marginTop’,0);

      var nova_margin = $(‘#fixar-topo’).height() – $(window).height();

      if($(window).scrollTop() >= nova_margin){
      $(‘#fixar-topo’).css(‘marginTop’,$(window).scrollTop()-nova_margin);
      }
      }
      else $(‘#fixar-topo’).css(‘marginTop’,$(window).scrollTop());
      });
      })

    • I meant the above code provided. Sorry I thought this comment would of went most recent first.

    • Hey, I noticed there is not a lot of answers on this post and remembered reading it while looking for some solutions myself.
      I found none around… I was being a little lazy just looking for something to copy paste 😉

      I experimented a bit and found a simple way to make this menu fixed purely with css.
      It is pretty damn simple 🙂

      First I put the menu width padding on the whole page (I put the .st-pusher class on my main div).

      Second I put the menu-width margin on the left of the actual menu (.st-menu).

      Finally I hide the button that i use to call the menu.

      All of this is only used on screens 1240px and up (media query) so on large screens there is no pesky button pushing and on small screens, the space is utilised by the menu being off the side.

      .st-pusher { padding-left: 300px; } .st-menu { margin-left: 300px; visibility: visible; } .header .modal-login-btns #st-trigger-effects { display: none; }

      I hope this helps someone even though it is quite a late answer to these questions… I’m sure someone will stumble across it.

  17. A great nav solution!

    I’m trying to get this up and running in WordPress. It’s not a problem if I just cut and paste the HTML directly into my index.php…. but falls apart when I start spreading it around in header.php, footer.php etc…. a link is at the bottom if anyone has any ideas. the JS links work, CSS (the important stuff anyways) is embedded. I think the issue is that the buttons aren’t adding the class .st-menu-open to the container. So maybe I’ve missed something in hooking my JS files? Or maybe I’ve missed a bit of markup (hey, it’s late….). Anyways, here’s the link (no real styles up, I’m only testing!): http://wordpress.leftsidedesign.ca/

    Thanks!

    • Hey were you able to solve this problem that you posted, I have this same problem and I am not able to figure out what it is

  19. I’ve been following this site for two years and it’s served as the inspiration and source of many of my proudest abilities. I came from Flash and had a lot of ideas but no real foundation in programming… I started writing very procedural jQuery and then roped in my HTML and CSS skills but still used jQuery for far too much. Now I am using CSS for as much Presentation Layer Development creating worlds of transitions and effects for my user interfaces and experience ecosystems. It’s amazing what using keyframes or transitions and transforms can achieve with semantic classing using “off” or “active” or “open” or whatever… to simply change classes on elements and allow the browser’s rendering engine to do it’s magic. Back in the day we were doing things simply because we could do them, now with information architecture being the crux of everything we are coding for… it’s like… I’m coming up with ideas on my own that are very much aligned with these examples of what is possible. I don’t know if we’re coding the same, but I must admit coDrops is like a rare jewel out there on the web. The examples you all put out are as beautiful as they are useful and all are just as intuitive. Thanks for always inspiring and enlightening me over the last few years as I’ve made my own personal transition into web development.

  20. I am trying to make this menu fixed, and every CSS trick I have tried is not working. Not sure what I am missing here.

  21. Hi i really love you work Mary Lou but it seems you never answers any questions here ? /-)
    Here’s mine : it is possible (and how) to have all those menus opened from the right side ?
    I don’t know why all off-canvas navigations are opened from the left, whereas it’s the longuest way for our fingers ?
    Thanks

  22. Hi!

    Great article. I’ve made the nav sticky with this simple CSS change: position to fixed, and I’ve add a vertical scroll bar in case of.
    .st-menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    visibility: hidden;
    width: 300px;
    height: 100%;
    background: #48a770;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    overflow-x: hidden;
    overflow-y: auto;
    }

    But, I wish now 2 things and cant do it. I wish a stick button to fire the nav. If I add the position fixed to it, it doesnt work because something from the wrapper interfer. If I push it out the wrapper, it works, but are off course not move on the right when the nav open. How solve this?

    I wish also see 30px of the hidden nav on the right before open it. How can I solve it?

    Thx in advance for your inputs.
    dom

  23. This is friggin awesome! Will probably use this in my open source indie game project to change how the in-game audio player will be displayed.

  24. Very nice but it is not the time to use it in my projects. Maybe in 2 years because I have many users who didn’t update their browsers.

  25. Hi !

    This is a great article and thanks for this. I’m a newbie on HTML, CSS and jQuery but my current skills are too low. :{
    I’m working on a website to train myself to dev.

    The hidden panel opens correctly on click. But on a second page, I want the hidden panel to be already open on load for some reason. It must be available to click on the button to close and reopen it.
    I tried to change things on the Js files but I didn’t get to my goal ’cause of my lacking of knowledge.

    Is there anybody who can help me? it would be great.

    Thanks and sorry for my langage. Btw, this is again a cool tuto.
    Cheers.

  26. For anyone interested in having it slide from the right, I modified the css for the slide along (effect 4) as so:

    .st-effect-4.st-menu-open .st-pusher { -webkit-transform: translate3d(-300px, 0, 0); transform: translate3d(-300px, 0, 0); } .st-effect-4.st-menu { z-index: 1; -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); }

  27. Awesome !

    Anyone know how to transform the button that triggers the effects to a link <a> ?

    Thank you in advance ^^

  28. Hey guys,

    This works great, except for an odd behavioural problem on tablet and phone: the scrolling is very rigid. Normally it flows as you swipe your finger, but on this implementation it stops immediately after finger release. Almost like there’s no more inertia? I don’t know if anyone has found this? Initially I assumed that this was because I bodged something on my side, but I see it’s like that on the demo too. weird huh.

  29. I have had problems with not showing whole .st-content contents and that helped me.

    .st-content { background: #f3efe0; } .st-menu-open .st-content { overflow-y: scroll; } .st-container.st-menu-open { overflow: hidden; } .st-content, .st-content-inner { position: relative; } .st-container { position: relative; }

  30. When view via a smart phone, this seems to disable the momentum scroll on the page body. Does anyone have any idea how to fix this?

    This error is evident in the demo pages shown – try see for yourself.

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

  32. 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

    • 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

  34. 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…

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

    sincerely,
    ella (^__^)

  36. 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?

  37. 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%;
    }

  38. 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?

  39. 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.

  40. 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!

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

  41. 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?

  42. 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?

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

  44. 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).

  46. Hey! So I just noticed that the jQuery function $(window).scroll(); doesn’t work anymore since and seem to be taking up the full width… or something. Do you have an idea which div I should be looking for scroll events in this case?

    Thanks!

  47. <strong> if(classie.hasClass(container, 'st-menu-open')){ resetMenu(); } else { </strong> container.className = 'st-container'; // clear classie.add( container, effect ); setTimeout( function() { classie.add( container, 'st-menu-open' ); }, 25 ); document.addEventListener( eventtype, bodyClickFn ); }

    Will make the the button have a toggle state 🙂

    • Can you elaborate on this? Im trying to put the trigger button in an absolutely positioned high z-index header within the content area, and I cannot get it to toggle.

  48. Is there any way to enable scroll within the sidebar if the content overflows on desktop AND mobile devices? I’ve tried ‘overflow-y: scroll’ which works on desktop but not mobile touch screens.