Off-Canvas Menu Effects

Some inspiration for off-canvas menu effects and styles using CSS transitions and SVG path animations.

Off-Canvas Menu Effects

Today we’d like to share a couple of styles and effects for off-canvas menus. The off-canvas sidebar is widely used and we have already created some effect inspiration before. Like with everything, style evolves and today we want to show a new set of modern effects for your inspiration. Different layouts and synced transitions of the menu and the page can make everything look more interesting and we can make use of the available space for side-menus and controls. SVG allows us to play with organic shapes and add some unexpected and stylish moves to a design.

We use CSS transitions, CSS animations created with bounce.js and animated SVGs with the help of Snap.svg. We also use Font Awesome and the profile picture is from the Random User Generator.

Please note that the effects serve as inspiration and will work (best) in modern browsers.

Let’s take a look at some of the styles.

OffCanvasMenuEffects01
This first demo is inspired by the Dribbble shot Old Designspiration Menu Concept One by Michael Martinho.

OffCanvasMenuEffects02
The idea behind the corner box effect is to translate an off-canvas box into the viewport while moving the content to the opposite corner, too, creating a window-like effect.

OffCanvasMenuEffects03
Following the simple corner box, we can think of another “layer” that will move on top of the previous box and that will make the content translate another “step”.

OffCanvasMenuEffects04
This menu expands from the menu button itself, taking up a space that was revealed by pushing down the content of the page. You might have seen this effect on a sidebar in one of our Morphing Buttons demos.

OffCanvasMenuEffects05
This menu is not an off-canvas one, but more like an expanding box with a content overlay. Here we use a jelly-like animation created with bounce.js.

OffCanvasMenuEffects06
This demo is using Snap.svg for animating SVG paths. Using a combination of a morphing wave with delayed menu item appearances, an organic feel is created.

We hope you enjoyed the effects and get inspired!

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.

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

Feedback 90

Comments are closed.
  1. Any chance of pointing me at the installation instructions…I have searched high and low. Site reports a missing template when I load it into the themes dir

  2. exceptional work !, can somebody help me with the bubble effect , i want to move the button and transition to the right side. The button should be on the right top and when i click on it the panel should open from right to left on the right side of the screen.

    Thank you

  3. First thank you for this great work.

    I am using side slide and i want to show menu first 3 second on page load and then hide it.How can i do it?

    Thank you

  4. hi

    You’re the best!
    can please me out how regular navigation with multiple nested LIST items for the slider canvas off menu

    thanks

  5. These menu effects look great! Can anyone help me in how to use one of these in WordPress? Thanks!

  6. I feel like I am missing something… I love the menu but how am I missing the tutorial : /

  7. Hi,

    I would instal on my wordpress website a menu of this codrop tutorial, but I don’t succeed in find the explication of installation.

    • hi, did you succed install this menu on wordpress? can you tell me how to do it?

  8. There is a problem in Side Slide and Wave Page. (Problem is when u try to scroll down the page using your keyboard up, down arrows it shows one another background coming from bottom.)

    Can you please fix this or let me what I should do for this to remove?

  9. Hi Mary!
    I’m a nob at svg … can you please let me know if there is such thing as a svg path morphing tool? How do you guys do it?
    I really need to make the bubble menu open from the right hand side rather then the left hand side, and looking at the path on the svg I really don’t understand much… it looks to me as it’s generated.

    Can you please let me know if there is a demo for the bubble menu opening from the other side or how exacly does one change the morphing paths?

    Thank you kindly!

  10. Hello.

    This menu is great. I have it working nice on my site, but it’s making the other absolute elements on the site fixed for some reason. It’s something in the menu_sideslide.css file. Have you encountered this? Is it an easy fix?

  11. on the top side scrolling does not run well on the browser chrome, please help me

  12. Hi, thanks for the great job!
    One question – how can I do the Elastic effect from the right to the left?
    Thanks!

  13. Hello Mary Lou,
    Please help.
    How do I make the menu and its trigger button appear at the right side instead of the at the left, as well as the menu contents sliding from right to left?
    Thank you so much.

  14. Hello Mary Lou, I have downloaded this Off-canvas-menu-effects but the “hamburger” icon (button-menu) is not visible at all. The square where it’s supposed to be is there and active, I can even change the color but the three lines are not there.
    I’ve tried several times with same result. Thanks in advance

  15. Hi,Hello Mary Lou, I have downloaded this Off-canvas-menu-effects
    thanks for the great job!
    plse send other types of navigation bar.

  16. Just a heads up. I implemented the menu on charleshaggas.com but I’m having issues with scrolling animations and one page smooth navigation scrolling. I’ll keep playing around with it but it seems like the menu may create bugs with plugins that are oriented around scrolling.

    Love what you’re doing here though.

  17. Hi!
    I liked so much these effects!
    I’ll try to use the side slide example, but I need with two levels.
    Can You help me, please???

    Tank´s a lot.
    Fernando

  18. Hello everyone.
    I already checked the web but could not really find a solution, yet.

    I am having a certain problem which is about to drive me mad:

    I built an off-canvas menu which contains some references that are anchor-linked to content on the very same site.
    Unfortunately after having clicked on those references, the menu does not disappear.

    What is the right way, to close the off-canvas menu by clicking on a link in order to show the set anchor?

    I’d appreciate your assistance very much!

    Best Regards
    Kay

  19. How did you achieved the bubble effect.Did you made it yourself using some sodrt of software or you did it using some jQuery….please tell me 🙂

  20. In wave menu there are a bug
    if you tried to press space Button on the keyboard , there is an error and the menu is uncompleted
    also if you pressed Ctrl+end to get the end of the page

  21. Thanks for this creative article.

    I have one question though. Is it possible for the contents to move while the scrolling on the menu when the menu is open? Currently body scroll is only possible when the mouse is outside the menu-wrap.

    /ASZ

  22. Great article I love this menu, however I am trying to get the top expand menu to have the menu come from the right rather than left, I’ve tried all sorts but I’m stuck as to how to achieve this any ideas?

    Thanks in advance.

  23. There’s a bug on iOS devices. The smooth scroll is disabled, because you get stuck on the page if you try to scroll with smooth scroll enabled.

  24. Elastic effect on right

    .menu-wrap {
    position: absolute;
    z-index: 100;
    width: 67%;
    right: -40%;
    top: 0;
    bottom: 0;
    height: 100%;
    font-size: 1.15em;
    overflow: hidden;
    -webkit-transform: translate3d(67%,0,0);
    transform: translate3d(67%,0,0) ;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    }

    .menu {
    background: #373a47;
    width: 100%;
    height: 100%;
    padding: 1em 1em;
    margin-left: 120px;
    z-index: 101;
    }
    .morph-shape {
    position: absolute;
    width: 120px;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    fill: #373a47;
    z-index: -1;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    }
    .show-menu .content-wrap {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
    -webkit-transform: translate3d(-100px,0,0);
    transform: translate3d(-100px,0,0);
    }