{"id":5517,"date":"2016-08-16T04:00:40","date_gmt":"2016-08-16T04:00:40","guid":{"rendered":"http:\/\/tapchicntt.com\/?p=5517"},"modified":"2016-08-16T04:01:58","modified_gmt":"2016-08-16T04:01:58","slug":"mau-gio-hang-an-tuong-voi-kieu-drop-down-la-mat","status":"publish","type":"post","link":"https:\/\/tapchicntt.com\/mau-gio-hang-an-tuong-voi-kieu-drop-down-la-mat\/","title":{"rendered":"M\u1eabu gi\u1ecf h\u00e0ng \u1ea5n t\u01b0\u1ee3ng v\u1edbi ki\u1ec3u Drop Down l\u1ea1 m\u1eaft"},"content":{"rendered":"

M\u1eabu gi\u1ecf h\u00e0ng (shopping cart) m\u00e0 m\u00ecnh chia s\u1ebb cho c\u00e1c b\u1ea1n trong b\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap c\u00e1c b\u1ea1n ti\u1ebft ki\u1ec7m kh\u00f4ng gian thi\u1ebft k\u1ebf cho web, \u0111\u1ed3ng th\u1eddi c\u0169ng t\u1ea1o s\u1ef1 ti\u1ec7n d\u1ee5ng cho kh\u00e1ch h\u00e0ng d\u1ec5 d\u00e0ng quan s\u00e1t s\u1ea3n ph\u1ea9m m\u00e0 h\u1ecd \u0111\u00e3 mua tr\u00ean web v\u00e0 t\u1eeb \u0111\u00f3 n\u00e2ng cao kh\u1ea3 n\u0103ng b\u00e1n h\u00e0ng tr\u00ean website c\u1ee7a c\u00e1c b\u1ea1n.<\/p>\n

<\/p>\n

[button color=”blue” size=”medium” link=”http:\/\/demo.lyminhhoang.com\/2016\/shopping-cart-dropdown\/”]Demo[\/button] [button color=”blue” size=”medium” link=”http:\/\/demo.lyminhhoang.com\/2016\/shopping-cart-dropdown\/shopping-cart-dropdown.zip” target=”blank” ]Download[\/button]<\/p>\n

HTML<\/p>\n

\u0110\u1ea7u ti\u00ean, ch\u00fang ta s\u1ebd hi\u1ec3n th\u1ecb s\u1ea3n ph\u1ea9m trong gi\u1ecf h\u00e0ng v\u1edbi khung chu\u1ea9n html nh\u01b0 sau:<\/p>\n

\r\n\r\n\r\n<div class="container">\r\n\r\n<div class="shopping-cart">\r\n\r\n<div class="shopping-cart-header">\r\n      <i class="fa fa-shopping-cart cart-icon"><\/i><span class="badge">3<\/span>\r\n\r\n<div class="shopping-cart-total">\r\n        <span class="lighter-text">Total:<\/span>\r\n        <span class="main-color-text">$2,229.97<\/span>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n <!--end shopping-cart-header -->\r\n \r\n\r\n<ul class="shopping-cart-items">\r\n\r\n<li class="clearfix">\r\n        <img src="https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/195612\/cart-item1.jpg" alt="item1" \/>\r\n        <span class="item-name">Sony DSC-RX100M III<\/span>\r\n        <span class="item-price">$849.99<\/span>\r\n        <span class="item-quantity">Quantity: 01<\/span>\r\n      <\/li>\r\n\r\n \r\n\r\n<li class="clearfix">\r\n        <img src="https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/195612\/cart-item2.jpg" alt="item1" \/>\r\n        <span class="item-name">KS Automatic Mechanic...<\/span>\r\n        <span class="item-price">$1,249.99<\/span>\r\n        <span class="item-quantity">Quantity: 01<\/span>\r\n      <\/li>\r\n\r\n \r\n\r\n<li class="clearfix">\r\n        <img src="https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/195612\/cart-item3.jpg" alt="item1" \/>\r\n        <span class="item-name">Kindle, 6" Glare-Free To...<\/span>\r\n        <span class="item-price">$129.99<\/span>\r\n        <span class="item-quantity">Quantity: 01<\/span>\r\n      <\/li>\r\n\r\n    <\/ul>\r\n\r\n \r\n    <a href="#" class="button">Checkout<\/a>\r\n  <\/div>\r\n\r\n <!--end shopping-cart -->\r\n<\/div>\r\n\r\n <!--end container -->\r\n\r\n<\/pre>\n
CSS<\/p>\n
\r\n\r\n@import url(https:\/\/fonts.googleapis.com\/css?family=Lato:300,400,700);\r\n@import url(https:\/\/maxcdn.bootstrapcdn.com\/font-awesome\/4.4.0\/css\/font-awesome.min.css);\r\n*, *:before, *:after {\r\n  box-sizing: border-box;\r\n}\r\n \r\nbody {\r\n  font: 14px\/22px "Lato", Arial, sans-serif;\r\n  background: #0099cc;\r\n}\r\n \r\n.lighter-text {\r\n  color: #ABB0BE;\r\n}\r\n \r\n.main-color-text {\r\n  color: #6394F8;\r\n}\r\n \r\nnav {\r\n  padding: 20px 0 40px 0;\r\n  background: #F8F8F8;\r\n  font-size: 16px;\r\n}\r\nnav .navbar-left {\r\n  float: left;\r\n}\r\nnav .navbar-right {\r\n  float: right;\r\n}\r\nnav ul li {\r\n  display: inline;\r\n  padding-left: 20px;\r\n}\r\nnav ul li a {\r\n  color: #777777;\r\n  text-decoration: none;\r\n}\r\nnav ul li a:hover {\r\n  color: black;\r\n}\r\n \r\n.container {\r\n  margin: auto;\r\n  width: 80%;\r\n}\r\n \r\n.badge {\r\n  background-color: #6394F8;\r\n  border-radius: 10px;\r\n  color: white;\r\n  display: inline-block;\r\n  font-size: 12px;\r\n  line-height: 1;\r\n  padding: 3px 7px;\r\n  text-align: center;\r\n  vertical-align: middle;\r\n  white-space: nowrap;\r\n}\r\n \r\n.shopping-cart {\r\n  margin: 20px 0;\r\n  float: right;\r\n  background: white;\r\n  width: 320px;\r\n  position: relative;\r\n  border-radius: 3px;\r\n  padding: 20px;\r\n}\r\n.shopping-cart .shopping-cart-header {\r\n  border-bottom: 1px solid #E8E8E8;\r\n  padding-bottom: 15px;\r\n}\r\n.shopping-cart .shopping-cart-header .shopping-cart-total {\r\n  float: right;\r\n}\r\n.shopping-cart .shopping-cart-items {\r\n  padding-top: 20px;\r\n}\r\n.shopping-cart .shopping-cart-items li {\r\n  margin-bottom: 18px;\r\n}\r\n.shopping-cart .shopping-cart-items img {\r\n  float: left;\r\n  margin-right: 12px;\r\n}\r\n.shopping-cart .shopping-cart-items .item-name {\r\n  display: block;\r\n  padding-top: 10px;\r\n  font-size: 16px;\r\n}\r\n.shopping-cart .shopping-cart-items .item-price {\r\n  color: #6394F8;\r\n  margin-right: 8px;\r\n}\r\n.shopping-cart .shopping-cart-items .item-quantity {\r\n  color: #ABB0BE;\r\n}\r\n \r\n.shopping-cart:after {\r\n  bottom: 100%;\r\n  left: 89%;\r\n  border: solid transparent;\r\n  content: " ";\r\n  height: 0;\r\n  width: 0;\r\n  position: absolute;\r\n  pointer-events: none;\r\n  border-bottom-color: white;\r\n  border-width: 8px;\r\n  margin-left: -8px;\r\n}\r\n \r\n.cart-icon {\r\n  color: #515783;\r\n  font-size: 24px;\r\n  margin-right: 7px;\r\n  float: left;\r\n}\r\n \r\n.button {\r\n  background: #0099aa;\r\n  color: white;\r\n  text-align: center;\r\n  padding: 12px;\r\n  text-decoration: none;\r\n  display: block;\r\n  border-radius: 3px;\r\n  font-size: 16px;\r\n  margin: 25px 0 15px 0;\r\n}\r\n.button:hover {\r\n  background: #729ef9;\r\n}\r\n \r\n.clearfix:after {\r\n  content: "";\r\n  display: table;\r\n  clear: both;\r\n}\r\n\r\n<\/pre>\n
Sau \u0111\u00f3, c\u00e1c b\u1ea1n \u0111\u1ecbnh d\u1ea1ng gi\u1ecf h\u00e0ng v\u1edbi \u0111o\u1ea1n css b\u00ean d\u01b0\u1edbi.<\/p>\n
jQuery<\/p>\n
Cu\u1ed1i c\u00f9ng l\u00e0 c\u00e1c b\u1ea1n th\u00eam v\u00e0i d\u00f2ng jQuery \u0111\u1ec3 t\u1ea1o hi\u1ec7u \u1ee9ng dropdown.<\/p>\n
\r\n\r\n<script src='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/2.1.3\/jquery.min.js'><\/script>\r\n<script>\r\n(function(){\r\n  \r\n  $("#cart").on("click", function() {\r\n    $(".shopping-cart").fadeToggle( "fast");\r\n  });\r\n   \r\n})();\r\n<\/script>\r\n\r\n<\/pre>\n
Ch\u00fac c\u00e1c b\u1ea1n th\u00e0nh c\u00f4ng!<\/p>\n","protected":false},"excerpt":{"rendered":"
M\u1eabu gi\u1ecf h\u00e0ng (shopping cart) m\u00e0 m\u00ecnh chia s\u1ebb cho c\u00e1c b\u1ea1n trong b\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap c\u00e1c b\u1ea1n […]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[145,142],"tags":[],"class_list":["post-5517","post","type-post","status-publish","format-standard","hentry","category-html-css","category-thu-thuat-jquery"],"views":485,"_links":{"self":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/5517","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/comments?post=5517"}],"version-history":[{"count":0,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/5517\/revisions"}],"wp:attachment":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/media?parent=5517"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/categories?post=5517"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/tags?post=5517"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}