Chào các bạn, mình xin gửi các bạn update một tính năng nhỏ trong giao diện bán hàng v1 của Ninh Bình Web, đó là menu đa cấp “danh mục sản phẩm” (vertical menu) nằm dọc tại widget của website.
Có nhiều plugin làm menu danh mục sản phẩm bao gồm sub-menu cùng nhiều hiệu ứng rất đẹp cho website wordpress của bạn. Tuy nhiên, trong bài viết này, mình hướng dẫn các bạn tạo menu danh mục sản phẩm hoàn toàn bằng code html và css để chèn vào widget của website, nên chắc chắn một điều là cũng nhẹ hơn rất nhiều so với dùng plugin.
Xem demo: http://shopconggiao.com/
Tự đánh giá:
- Ưu điểm: Nhanh – gọn – nhẹ, phù hợp với website bán hàng ít sản phẩm
- Nhược điểm: Click vào menu mới để mở sub-menu ra chưa tự động thu phần sub-menu cũ về. Mình sẽ update trong thời gian sớm nhất.
Bước 1: Xóa widget danh mục sản phẩm cũ.
Các bạn vào giao diện > widget và tiến hành xóa widget chuyên mục đi nhé!
Bước 2: Tạo widget danh mục sản phẩm mới
Tạo widget text mới và thêm vào vị trí mong muốn (Main sidebar), đưa lên trên cùng, nhập tiêu đề và dán đoạn code sau vào:
|
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 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<head> <title>Danh mục sản phẩm</title> <style> #menu { font: 16px "roboto condensed", sans-serif; width: 100%; background: white; border-color: white; border-width: 1px;border-style: solid;} #menu ul{list-style: none;margin: 0;padding: 0;} #menu li{display: block;padding-top: 0px;background: #f1f1f1;padding-left:25px;cursor: pointer;height: 44px; } #menu li:hover{background: #e1e1e1;} #menu a {font-weight: normal;display: block;border-bottom: 1px solid #f8f8f8; padding-top: 10px;padding-bottom: 14px;padding-left: 13px;text-decoration: none;} </style> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("#menu ul").hide(); $("#menu a").click(function(){ $(this).next("#menu ul").slideToggle("slow"); }); }); </script> </head> <body> <div id="menu"> <a>Điện thoại Blackberry</a> <ul> <li><a href="#">Blackberry OS 5-7</a></li> <li><a href="#">Blackberry 10</a></li> <li><a href="#">Blackberry chạy Android</a></li> <li><a href="#">Blackberry siêu sang</a></li> </ul> <a>Điện thoại Iphone</a> <ul> <li ><a href="#">iPhone 7</a></li> <li><a href="#">phone 6</a></li> <li><a href="#">Iphone 5</a></li> <li><a href="#">Iphone 4</a></li> </ul> <a>Điện thoại HTC</a> <ul> <li><a href="#">HTC One</a></li> <li><a href="#">HTC Nexus</a></li> <li><a href="#">HTC One M</a></li> </ul> <a>Điện thoại LG</a> <ul> <li><a href="#">LG Optimus</a></li> <li><a href="#">LG G2</a></li> <li><a href="#">LG G3</a></li> <li><a href="#">LG G4</a></li> </ul> <a>Điện thoại SONY</a> <ul> <li><a href="#">Sony Xperia XA</a></li> <li><a href="#">Sony Xperia C</a></li> <li><a href="#">Sony Xperia Z</a></li> <li><a href="#">Sony Xperia Z3</a></li> </ul> <a >Điện thoại OPPO</a> <ul > <li>Oppo F1s Plus</a></li> <li>Oppo C23498</a></li> <li>Oppo Trung Quốc</a></li> <li>Oppo Việt Nam</a></li> </ul> </div> </body> |
Giải thích đoạn code: cặp thẻ <header>…</header> chứa các thông số css và các đoạn javascript cần thiết. Cặp thẻ <body>…</body> chứa các đoạn code html – nơi mà bạn cần chỉnh sửa để hiển thị menu lên website.
Bước 3: Thực hiện chỉnh sửa menu và sub-menu thủ công.
Bởi mình làm menu danh mục sản phẩm bằng html và css nên các bạn chịu khó thực hiện việc chỉnh sửa menu và sub-menu thủ công chứ không phải tự động nhé. Tìm đến nội dung bên trong cặp thẻ <body>….</body> và sửa menu (<a></a>) và sub-menu (<li>…</li>) tương ứng các bạn nhé!
Bước 4: Lưu lại và xem thành quả
Chỉ với vài dòng code đơn giản là chúng ta đã tạo được menu đa cấp làm danh mục sản phẩm hiển thị ở widget cho website rồi. Các bạn có thể tham khảo plugin nào đó phù hợp hơn, hoặc dùng tạm menu theo bài hướng dẫn này nhé. Chúc các bạn làm tốt và chúc cho công việc của các bạn luôn thuận lợi.
