Cart menu

• Posted: January 15, 2016
• / By: Magda
• / In:

Here you will find the products you added to your cart.

HTML markup

CSS

<article class="ct-cart-menu"> <button type="button" class="ct-cart-menu__button morph-button-close ct-js-close-button ct-js-cart-menu__button"> close <i class="fa fa-shopping-cart"></i> </button> <div class="ct-cart-menu__content"> <ul class="ct-cart-menu__products"> <li class="ct-cart-menu__product"> <figure><img src="assets/images/demo-content/cart_item01.jpg" alt=""></figure> <h5 class="ct-cart-menu__product-name">jacob_night</h5> <div class="ct-cart-menu__product-info"> <p>Medium | 1000x1000 | 04.5 MB</p> </div> <button type="button" class="ct-cart-menu__remove-button ct-js-cart-menu__remove-button"> <i class="fa fa-times"></i> Remove </button> <div class="ct-cart-menu__product-price"><span>$6.00</span></div> </li> <li class="ct-cart-menu__product"> <figure><img src="assets/images/demo-content/cart_item02.jpg" alt=""></figure> <h5 class="ct-cart-menu__product-name">jacob_night</h5> <div class="ct-cart-menu__product-info"> <p>Medium | 1000x1000 | 04.5 MB</p> </div> <button type="button" class="ct-cart-menu__remove-button ct-js-cart-menu__remove-button"> <i class="fa fa-times"></i> Remove </button> <div class="ct-cart-menu__product-price"><span>$6.00</span></div> </li> </ul> <div class="ct-cart-menu__summary"> <div class="ct-cart-menu__total"><span>Total</span><span class="ct-cart-menu__total-price">$12.00</span></div> <div class="ct-cart-menu__checkout"><a href="#">Checkout </a></div> </div> </div> </article>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

<article class="ct-cart-menu">   <button type="button" class="ct-cart-menu__button morph-button-close ct-js-close-button ct-js-cart-menu__button">     close     <i class="fa fa-shopping-cart"></i>   </button>   <div class="ct-cart-menu__content">         <ul class="ct-cart-menu__products">       <li class="ct-cart-menu__product">         <figure><img src="assets/images/demo-content/cart_item01.jpg" alt=""></figure>         <h5 class="ct-cart-menu__product-name">jacob_night</h5>         <div class="ct-cart-menu__product-info">           <p>Medium | 1000x1000 | 04.5 MB</p>         </div>         <button type="button" class="ct-cart-menu__remove-button ct-js-cart-menu__remove-button">           <i class="fa fa-times"></i>           Remove         </button>         <div class="ct-cart-menu__product-price"><span>$6.00</span></div>       </li>       <li class="ct-cart-menu__product">         <figure><img src="assets/images/demo-content/cart_item02.jpg" alt=""></figure>         <h5 class="ct-cart-menu__product-name">jacob_night</h5>         <div class="ct-cart-menu__product-info">           <p>Medium | 1000x1000 | 04.5 MB</p>         </div>         <button type="button" class="ct-cart-menu__remove-button ct-js-cart-menu__remove-button">           <i class="fa fa-times"></i>           Remove         </button>         <div class="ct-cart-menu__product-price"><span>$6.00</span></div>       </li>     </ul>     <div class="ct-cart-menu__summary">           <div class="ct-cart-menu__total"><span>Total</span><span class="ct-cart-menu__total-price">$12.00</span></div>       <div class="ct-cart-menu__checkout"><a href="#">Checkout   </a></div>     </div>   </div> </article>

Screenshot

Cart Menu example