Transitions for Off-Canvas Navigations

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

From our sponsor: Get started on your Squarespace website with a free trial

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. From a developer’s perspective, your code has a huge amount of markup and depends on quite a number of CSS and JS files…and just for a menu effect? The tutorials on this website are nice, but the code is bloated and not practical for production use. It’s reminiscent of the early dotcom days when people would create impractical animation tutorials with Flash. I would love to use the examples provided on this website, but for the betterment of the design and development community, I urge you to write simple, lightweight code!

    • Hi Hudson, honestly I’m getting a bit tired of explaining that some demos on Codrops have the sole purpose of providing inspiration for effects (like mentioned in the first paragraph). This is neither a tutorial (that’s why the category of this post is “Playground”), nor a production ready project. I’d really really appreciate it if you’d read the article first before commenting such nonsense. And if you have any specific suggestions for improvements, you are always welcome to contribute constructively. Cheers, ML

    • Hi Mary Lou,

      I understand both your perspective and Hudson’s perspective, however, you are taking Hudson’s observations too personally. Hudson was commenting on the structure of the code. He, or she, did offer “specific suggestions for improvement” by recommending to write simply, lightweight code.

      Your comment was a bit heavy handy, and distasteful in my opinion.

    • Hi ML,

      I don’t appreciate you using me as a scapegoat, when other people have commented on the lack of functionality with this menu example.

      I am not here to argue about semantics about the words “inspiration” or “playground”, and your use of the words is subjective.

      I did read your article, several times, and took the time to look thorough your code.

      If you’re not open to constructive feedback, then perhaps you should disable the comments.

    • @Hudson, by no means I wanted to use you as a scapegoat, I apologize if it came over a bit rough. I am very much open to constructive criticism but I don’t see how something general like “write simple, lightweight code” helps anybody in any way. Looking at the example and given the aim of showing all effects in one page, I would really love to hear concrete suggestions on simplifying and improving the code.

      @Parker, I know that Hudson did not mean to be “personal” in any way, but please understand that there is a person behind this work and I do tend to take some comments personally especially if I feel that they are inappropriate.

      Thank you for your feedback, cheers, ML

    • Ah, yes, the mythical bloated-code-beacuse-of-extra-divs nonsense. If a few extra divs to achieve an engaging effect is all you worry about in your work, I’m afraid you aren’t working on high level products. Surely you can take all the time you need to optimize every last div on your brochure sites. But just tell me the real cost of 2, even 100 extra divs ? Real test cases in multiple modern browsers ? 0.001ms extra paint time ?

      This site has some of the best modern web design stuff around, it’s really annoying to see these envious dogmatic elitists downplay this great free content…

    • @Yuri, I own a design firm, and all of our clients are Fortune 50 corporations, far from the “brochure” websites you mention. I agree with you that this website features some of the “best” web design “stuff”, however, the web development techniques could be better. You are correct that a few extra divs does not does not add a significant increase to the physical file size. However, the bloated code that Hudson mentions refers to the way in which the code was written. We consistently design and develop websites for major clients, and the structure of the HTML/CSS/JS is extremely important in planning and developing a large-scale website.

  2. I appreciate the article, ML. It is obvious that in a real world situation, only one effect will be in the menu, so I don’t find the code excessive at all. It seems to me that Hudson and Parker don’t fully understand. Making a suggestion that it should be simple and lightweight without sharing this simple and lightweight solution is not constructive. I am sure that all would welcome improvements but please show them to us. The playground articles are not meant for the copy & paste viewers. Also, if we are always designing by looking backwards to cater to relic technology, coding would be going nowhere and there would be no need for modern browsers. It is easy enough to design a fall-back if you want to use cutting edge effects. I thank you for your many inspirational articles, ML.

  3. This article serves as a source of inspiration, not a source for copying/pasting code into a production site. If you do, it’s at your own risk. I figured that out as soon as I saw the code and read the opener. Enjoy it for what it is, use it as an inspiration, improve upon it, and if so inclined, share it so that others can copy your perfected code. Until then, chill, and enjoy. Awesome effects by the way. Thanks ML.

  4. Thanks for your inspirational articles ML, seeing some of these eh me given the task of using javascript with jquery and js GreenSock, to achieve similar effect, since they are made for modern browsers, according to http://www.zdnet .com/web-browser-war-the-early-2013-report-7000013354 / more than half of the world uses IE, scary, but are q items like these help us to do that give more than they can, inspiration is given, thanks renovated.

  5. Hi there, i tried your off canvas navigation on because i love the transitions, but i got a problem when i tried loading it on chrome in ubuntu…
    Im using the scale and rotate pusher, when i load the page..the body was pulled on the right side that made a grey part, on the left side, appear, and also,the tyransition is not working….this also happened on other transitions,the display is messed and transitions are not working well…
    Hope that there will be updates regarding that matter..anyway,,,good work…That error would be the only problem

    Thanks 🙂

    • Jack, this is possible, you’ll need to create a new effect. Take a look at the CSS example effects in the demo and create your own based on that. Trial and error my friend.

  6. Hi,

    This is really good the only problem is that if you have a fixed header and you scroll down the page and then click on the menu icon it does not show the menu because it’s all the way up.

    Any idea how to fix that without having to change the entire structure.

    Thanks,
    Filipe

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

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

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

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

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

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

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

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