side shopping cart preview
May 26, 2014 | 18 Feedbacks

Side shopping cart

This animated side cart is a smart and not obtrusive way to let users jump in and out from the list of products they want to buy, without having to refresh the page or fire a popup.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

CSS3 could lead to an inflation of animations and transitions. Sometimes though, this power can be used for a noble intent: a side cart, just a click away from the user, is something smart. A good example is the CreativeDash online store.

The experience is similar to the mobile apps, meaning people are used to see content coming from the side. Besides users can easily remove items from the cart, which I think is something good: the more customers feel in control, the more they trust the seller.

Lets look at the code!

Creating the structure

The HTML is quite basic. The #cd-cart-trigger is used to fire the shopping cart. The product gallery is wrapped inside the <main> element. The empty #cd-shadow-layer is used to blur the background when the cart is visible. The cart items are organized into an unordered list.

Adding style

The cart is placed off the canvas by giving it a position:fixed; and a right: -100%; When the user clicks on the cart icon, we use jQuery to add the .speed-in class to the #cd-cart. This class modifies the right value from -100% to 0. All what remains to do is adding a CSS3 transition to the right value to achieve the smooth animation.

The -webkit-overflow-scrolling: touch; is used to smooth the scrolling on touch devices (webkit browsers). It’s recommended when you use the overflow property, which causes scrolling to be buggy.

Events handling

We didn’t do a lot in jQuery, apart from adding classes according to specific events. One thing to note, though, is that in the starting HTML structure we put the navigation outside the <header>. Since we created this resource starting from mobile, we wanted the menu to slide in from the side, just like the cart – but from the opposite direction. To do so, it was easier for us to move the navigation outside the header. Once the user reaches a viewport size large enough (1200px in our demo), we use jQuery to move the navigation inside the header.

Changelog

June 8, 2014
  • Fixed bug with transition on firefox - by Cody
May 29, 2014
  • Fixed a bug that showed 2 scrolling bars on ie and firefox when cart was visible - by Cody
May 26, 2014
  • Resource released by Cody

Sebastiano Guerriero

UI/UX designer, with a huge passion for Nutella. Co-Founder of Cody. You can follow him on Twitter or Dribbble.

  • Mirko

    Great!! I saw this concept on Codepen before, but forgot about it. Now I have a need for this in one website, and I will definitely use your code as the foundation for off-canvas cart :)

    • Sebastiano Guerriero

      Sounds like a plan :)

  • mechwd

    I love it, but at least on Chrome the site bounced left and right because of the scrollbar would go out and come back in.

    • shadeobrady

      You just need to set the scroll bar to always display and it should get rid of the jumping.

    • Sebastiano Guerriero

      Right, I didn’t notice this on Windows (on Mac scrollbars don’t push the content). As @shadeobrady:disqus is suggesting, one solution would be to eliminate the .overflow-hidden class given to the body when the cart is open. Or, more extreme, you could use a plugin like http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

  • http://www.gunitrend.com mgunitrend

    i like it, but on my website not use menu fixed you have solution for normal menu ?

    thank you :)

    • Claudia Romano

      We are working on new resources. I’m sure you will find something that fits for your needs. Just stay tuned! :)

      • http://www.gunitrend.com mgunitrend

        Many Thanks :)

    • madahmani

      Make your menu fixed!

  • http://www.marcusforsberg.net/ Marcus Forsberg

    This is crazy amounts of awesome. Will be using this and the fun flying animations from UI8 for my upcoming project. Thanks for this and for an awesome site. :)

    • http://www.marcusforsberg.net/ Marcus Forsberg

      I notice it’s still scrollable on Chrome for Android, though, causing the slide-out to fly free for a moment and then jump back in place.

      • Sebastiano Guerriero

        Hi Marcus, I’m looking into this. For some reasons the overflow:hidden given to the body doesn’t work on Chrome for Android (and iOS too). Will see if I can find a solution.

        • http://www.marcusforsberg.net/ Marcus Forsberg

          Sounds good! Let me know if you can solve it, will do the same if I find a solution once I start coding my design. :)

  • Pingback: 50 Visually Appealing CSS Tutorials & Techniques – Web Designing Kerala India

  • Pingback: Visually CSS3 Tutorials to Enhance Web Designs

  • Pingback: 提高网页设计的视觉CSS3教程-字体效果、按钮样式、导航条 | Specs' Blog

  • Pingback: 50 Visually Appealing CSS Tutorials & Techniques | Brisa

  • fede

    Add this

    html {
    overflow-y: scroll;
    }
    And no more jumping