Transitions for Off-Canvas Navigations

Some inspiration for transition effects for off-canvas navigations.

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

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

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!

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.

Stay in the loop: Get your dose of frontend twice a week

๐Ÿ‘พ Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!

Feedback 174

Comments are closed.
  1. Hello (sorry for my english) .. I would like to have scroll on the left menu to list several elements (eg 30 or more) .. In this example, the scroll does not work, and I’ve tried removing “overflow: hidden” to the class. st-container but does not work well … any help? .. Thanks and great example

  2. Thanks for this !
    There was some problems on mobiles and tablets, i figured this out removing html from here :
    “html,body,.st-container,.st-pusher,.st-content {height: 100%;}”

    I hope it will help ๐Ÿ™‚

  3. Do I have to enable some experimental features on my browser?
    Just saying because the demo does not feel good in Chrome (29.0.1547.62 m)

    On Google Canary looks pefect.

    Great transitions :))

    • Yep, same here, on Chrome 29.0.1547.62 m it just feels quite wrong (There’s a vertical dim gray bar where the menu should be). It works perfectly on Firefox 23.0.1, IE10 & Canary (Latest)

  4. As ever a great idea and run through guys. Some lovely transitions, especially useful for smaller screens / break points.

    • mmmmm looks like it works great here in chrome, every effect works just fine.

      Thank you Mary Lou ๐Ÿ™‚

  5. Beautiful transitions and clean implementation, as always.
    Love seeing what you bring Mary Lou (sounds like a line from a poem ๐Ÿ™‚
    Thanks for sharing this.

    One issue though – this is not working in Windows phone (IE10 mobile). The browser receives the 300px padding from the fallback selector (which happens in IE10 desktop too, in fact), and also doesn’t trigger on any of the buttons, resulting in no menu showing up at all.
    Anyone knows how to work around this?
    Cheers.

    • The problem is in sidebarEffects js, because it doesn’t detect Windows Phone browser so it doesn’t allow to trigger menu.

    • It appears is that the problem is with this line “(navigator.userAgent||navigator.vendor||window.opera)”. When I remove it, then it works fine on IE mobile but menu closing stops working on iOS.

      Guys I need your help as never before!!

  6. Amazing CSS3 navigation tutorial. I really liked the “Open door” and “Scale down pusher” transitions.
    Would be best suited for creative websites and personal/company blogs.

  7. Wonderful work! I learn alot, and planning to use this as my main navigation ๐Ÿ™‚

    One question tho, how can I make the side menu disappear again ( animate in like when you click somewhere on the content page )
    When I press a menu button??

    Any help is greatly appreciated!

  8. Sweet! Thanks for posting ๐Ÿ™‚

    Would love if the sidebar can collapse/transition-out upon click.
    Thinking there should be a simple toggle… but where in the code can I make this change?

  9. When the menu is open, scrolling is disabled on the menu and the content. This makes it unusable on the desktop and especially mobile platforms, other than that it’s a great. Any recommendations to fix the scrolling issue?

  10. It’s a beautiful menu, but I have to agree with Eric & Brad. A non-functional menu is just eye candy. Do you plan on fixing the scrolling problem?

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

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

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

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

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

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