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!

👋 A new version of this component is available. Download now →.

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.

<header>
   <!-- logo and menu here -->
   <div id="cd-cart-trigger"><a class="cd-img-replace" href="#0">Cart</a></div>
</header>

<main>
   <!-- content here -->
</main>

<div id="cd-shadow-layer"></div>

<div id="cd-cart">
   <h2>Cart</h2>
   <ul class="cd-cart-items">
      <li>
         <!-- ... -->
      </li>

      <li>
         <!-- ... -->
      </li>
   </ul> <!-- cd-cart-items -->

   <div class="cd-cart-total">
      <p>Total <span>$39.96</span></p>
   </div> <!-- cd-cart-total -->

   <a href="#0" class="checkout-btn">Checkout</a>

   <p class="cd-go-to-cart"><a href="#0">Go to cart page</a></p>
</div> <!-- cd-cart -->

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.

#cd-cart {
  position: fixed;
  top: 0;
  right: -100%;
  height: 100%;

  /* header height */
  padding-top: 50px;

  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  transition: right 0.3s;
}

#cd-cart.speed-in {
  right: 0;
}

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.

<header>
   <div id="logo"></div>

   <div id="cd-hamburger-menu"><a class="cd-img-replace" href="#0">Menu</a></div>
   <div id="cd-cart-trigger"><a class="cd-img-replace" href="#0">Cart</a></div>

   <!-- we use jQuery to move the #main-nav here when the viewport is > 1200px -->
</header>

<nav id="main-nav">
   <ul>
      <li><a href="#0">Home</a></li>
      <li><a href="#0">About</a></li>
      <li><!-- ... --></li>
   </ul>
</nav>

function move_navigation( $navigation, $MQ) {
   if ( $(window).width() >= $MQ ) {
      $navigation.detach();
      $navigation.appendTo('header');
   } else {
      $navigation.detach();
      $navigation.insertAfter('header');
   }
}