Hidden Flyout Shopping Cart Menu with CSS3

For every modern eCommerce website the shopping cart is a crucial feature. Most of the time visitors will have to click a link or button to view all the items in their cart. This is a much cleaner solution because everything can be listed on the page without sacrificing extra information.

Live Demo - Download Source Code

For this tutorial I want to demonstrate how to build a simple hidden flyout shopping cart menu with CSS3 animation. I got the idea from a related WooCommerce cart menu plugin which has extra features for a flyout menu. A small tab will appear over to the side and once a user hovers this tab it will flyout onto the page. This is not a full cart display but it does offer a quick peek for curious shoppers. Take a look at my sample demo to see the final result.

Getting Started with Our Shopping Cart Menu Tutorial

Although we don't need any extra dependencies I did include a copy of jQuery to stop blank HREF links from loading. You do not need jQuery to make the flyout menu effect - I'm just using it for my demo. Aside from that I have a separate CSS file included into the page structure.

Within the page body I have a div with the ID #wrapper. This contains all of the page content including the tabbed shopping cart. Truthfully you could place that HTML code anywhere since it will be using absolute CSS positioning. I find that it's best to keep all the page elements in order so that they're easier to edit.

My first block of code includes everything needed for the tabbed cart menu. The .cart-tab class will contain everything including the hover link and contents. Internally .cart-link is the hoverable tab which creates the animation effect.

Another block using the class .cart will hold all the items. I've only added two products as an example, but the flyout could probably display 3 or 4 different items. At some point you'll reach a number that looks too big for the screen and defeats the purpose of this flyout. But notice how you could include a total number of items along with a few sample items(perhaps most recently added products).

Beneath this block of code I have a page body which includes a few larger sample products. These extra items do not affect the flyout menu - I just added them because it makes the page look bigger. The code itself is quite simple but definitely not required.

Designing the Page

Moving right along into my stylesheet let's take a peek at how the page is setup and how the animation unfolds. I am using a number of CSS resets to style a generic page with traditional margins/padding along with equalized font sizes.

After these resets I have a few properties for the page wrapper and the internal product listing. The ID for #productlist is a container which targets the overall list.

/** page structure **/
#wrapper {
  display: block;
  width: 850px;
  background: #fff;
  margin: 0 auto;
  margin-bottom: 35px;
  padding: 25px 30px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(205,205,205,0.55);
}


#productlist {
  display: block;
  margin-bottom: 15px;
}

#productlist li {
  display: block;
  float: left;
  margin-bottom: 35px;
}

#productlist li img {
  display: block;
  float: left;
  margin-right: 10px;
}
#productlist li .details {
  display: block;
  float: left;
  width: 180px;
}

As I mentioned before these product list items do not have any effect on the flyout menu. But most eCommerce shops will have a general product listing which includes a thumbnail shot along with related information.

CSS3 Animation

Beneath that block of code I've added my flyout menu properties. .cart-tab is the overall container class which uses position: fixed to keep it scrolling along with the page. I'm using CSS3 transition properties to animate the menu out from offscreen.

/** flyout menu **/
.cart-tab { 
  width: 22em;
  position: fixed;
  top: 5em;
  z-index: 9999;
  background: #fff;
  right: -22em;
  -webkit-transition: right ease .5s;
  -moz-transition: right ease .5s;
  -o-transition: right ease .5s;
  transition: right ease .5s;
}

.cart-tab a.cart-link {
  position: absolute;
  top: 0;
  left: -9em;
  width: 8.6em;
  display: block;
  background: #fff;
  padding: 1.8em;
  text-decoration: none;
  -webkit-transition: left ease .5s;
  -moz-transition: left ease .5s;
  -o-transition: left ease .5s;
  transition: left ease .5s;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-bottomleft: 3px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.cart-tab a.cart-link:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: -10px;
  width: 10px;
  height: 100%;
  background: #fff;
}

.cart-tab:hover { right: 0; }

The container class .cart-tab has a width of 22em along with a left position of -22em. It forces the entire menu completely offscreen and out of view regardless of the window size. Then the actual link is moved left by -9em to just peek out from the side. Once a user hovers over this link it starts the transition effect by animating completely into view.

I should mention that CSS3 makes the animation simpler but it's also not supported by all browsers. jQuery animation works in a similar way by animating CSS properties, thus it would be simple to translate this effect into JavaScript. But I find the CSS3 code to be cleaner and moving towards a more advanced method of frontend web development.

The rest of my code simply targets internal elements of the cart. These are individual items along with relevant context like titles and links. At the bottom of the flyout cart you'll notice a link that reads "Go To Checkout". In my demo the link doesn't work but for a live website this can be the best solution to get customers closer to paying for their items.

.cart-tab a.cart-link .amount { 
  display: block; 
  color: #515151; 
  font-size: 1.5em; 
  line-height: 1.7em; 
  font-weight: bold; 
  margin-bottom: 8px;
}
.cart-tab a.cart-link .contents { 
  display: block;
  color: #666;
  font-size: 1em;
}

.cart-items { display: block; margin-bottom: 25px; }
.cart-items ul { display: block; list-style: none; }
.cart-items ul li { display: block; margin-bottom: 8px; padding-bottom: 10px; cursor: pointer; border-bottom: 1px dotted #888; }

.cart-items ul li .item-price, .cart-items ul li .quantity { display: block; margin-bottom: 2px; font-size: 1.1em; }
.productimg { display: block; float: left; margin-right: 8px; }

.cart-tab .cart { padding: 1.5em; margin: 0; }
.cart-tab .cart .checkout {
  font-size: 1.2em;
  padding: 4px 11px;
  border: 1px solid #467fc5;
  color: #467fc5;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.cart-tab .cart .checkout:hover { background: #467fc5; color: #fff; }

.cart-tab a.cart-link,.cart-tab .cart {
  -webkit-box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2);
  -moz-box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2);
  -o-box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2);
  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2);
}

.cart-tab .cart {
  -webkit-border-bottom-left-radius: 3px;
  -webkit-border-bottom-right-radius: 3px;
  -moz-border-radius-bottomleft: 3px;
  -moz-border-radius-bottomright: 3px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

All the other styles are relatively aesthetic by adding borders, big text, box shadows and rounded corners. Some of these features would be more useful on a live website but presentation is still a big factor when it comes to user experience design.

I also mentioned that my demo includes a small bit of jQuery to stop links from loading with hashed HREF values. Definitely useful when creating a wireframe or quick mockup for the site, but perhaps not as useful if your links will actually lead somewhere. Feel free to remove that block of jQuery when copying my source code into your own project.

Closing

This effect would really spruce up the user experience of an eCommerce shopping page. Users get a quick glimpse at their cart and the animation is very smooth. Take a look at my sample demo and please feel free to download a copy of the project source code. This makes an excellent addition to any eCommerce project to enhance the digital shopping experience.