Transitions for Off-Canvas Navigations

Some inspiration for transition effects for off-canvas navigations.
sidebartransitions

From our sponsor: Jamf Now sets up and secures your team's Apple devices so you can get back to more creative work.

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:

Mary Lou

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

http://www.codrops.com

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

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 174

Comments are closed.
  1. 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.

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

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

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

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

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

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

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

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

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

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

  12. 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);
    }

  13. Awesome !

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

    Thank you in advance ^^

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

  15. 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;
    }

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