side shopping cart

Side Shopping Cart




Hey Guyz! In this tutorial i am going to teach to how to create a Animated Side Shopping cart with CSS and jQuery Nothing special nothing crazy so get fucking started brah.



Animated Side Shopping cart with CSS and jQuery – Demo

index.html

Their is nothing special in this file. But i will explain everything bit by bit line by line

  1. On line 4 we have included Font Awesome for using some ICONS
  2. On Line 5 we have our stylesheet style.css in which we will be writing style of side cart
  3. On line 8 we have a empty div with a class .overlay which will cover the screen when the side cart opens
  4. From line 11 to 15 we have the navbar
  5. From line 19 to 33 we have div with id #side-cart. This is the main side cart container. Inside #side-cart on line 30 we have a anchor with class
    .side-cart-toggle, This anchor will be used to open and close the side cart
  6. On line 35 we are including jQuery and On line 36 we are including a main.js file in which we will write our code
<html>
<head>
	<title>Css and jQuery Side Shopping cart</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="overlay"></div>

	<!-- navbar -->
	<nav id="navbar">
		<div class="vertical-align">
			<img src="cd-logo.svg">
		</div>
	</nav>
	<!-- /Navbar -->

	<!-- Side Shopping cart  -->
	<div id="side-cart">
		<h3>Shopping Cart</h3>
		<ul>
			<li>Product name<span>100rs</span></li>
			<li>Product name<span>100rs</span></li>
			<li>Product name<span>100rs</span></li>
			<li>Product name<span>100rs</span></li>
		</ul>

		<button class="yellow-btn">Checkout</button>
		<a href="#" class="side-cart-toggle">
			<i class="fa fa-shopping-cart"></i>
		</a>
	</div><!-- / Side shopping cart -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>

style.css

We have very basic style. I don’t think its necessary to explain all the style but i will cover main one

  1. On line 36 #side-cart we are setting the max-width of side cart to 250px and give it a negative margin-right: of -250px this will hide the side cart
  2. On line 48 we create a class .side-cart-open with margin-right:0px, when we add this class to #side-cart our side cart show and when we remove this class the side-cart will hide
/* default styles */
*{
	box-sizing:border-box;
}
body{
	background: #eeeff7;
	margin: 0;
	padding: 0;
}
/* class to vertically align a element*/
.vertical-align{
	position: relative;
    top: 50%;
    transform: translateY(-50%);
}
/* overlay */
.overlay{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: black;
	opacity: .5;
}
/* navbar */
#navbar{
	background: #435779; 
	height: 80px;
	width: 100%;
	line-height: 80px;
	padding: 20px;
}
/* Side Cart */
#side-cart{ 
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	width: 100%;
	max-width: 250px;
	background: black;
	color: white;
	font-family: verdana;
	margin-right: -250px;
}

.side-cart-open{
	margin-right: 0 !important;
	transition: margin 200ms ease-in-out;
}
.side-cart-toggle{
	position: absolute;
	top: 80px;
	left: -50px;
	height: 60px;
	width: 50px;
	background: black;
	padding: 15px;
}
.side-cart-toggle i{
	font-size: 25px;
	color: white;
}
#side-cart > h3{
	padding: 20px;
}
#side-cart > ul{
	list-style: none;
	margin: 0;
	padding: 0;
}
#side-cart > ul > li:first-child{
	border-top: 1px solid #858383;
}
#side-cart > ul > li{
	width: 100%;
	border-bottom: 1px solid #858383;
	padding: 10px;	
	color: #f1c71e;
}
#side-cart > ul > li > span{
	display: block;
	color: white;
}
.yellow-btn{
	margin-top: 20px;
	width: 100%;
	height: 50px;
	background: #f1c71e;
	color: white;
	border: 1px solid #f1c71e;
	outline: none;
	font-size: 20px;
}
.yellow-btn:hover{
	background: #F4D24B;
	cursor: pointer;
}

main.js

In main.js we are waiting for .side-cart-toggle to click and as soon as the button is clicked we toggleClass .side-cart-open, which will make the side cart open if it was close and vise versa AND we also show the .overlay if it was hidden and vise versa

$(document).ready(function(){
//when side cart toggle anchor is clicked	
	$(".side-cart-toggle").click(function(e){
		e.preventDefault();
		$("#side-cart").toggleClass("side-cart-open");
		$(".overlay").toggle();
	});
});

Leave a Reply

Your email address will not be published. Required fields are marked *