thiết kế thanh tùy chọn lọc theo yêu cầu của khách hàng

17020932 · Apr 8, 2019 · 3f73d5a · 3f73d5a
1 parent 434c60b
commit 3f73d5a
Showing 1 changed file with 51 additions and 0 deletions.
diff --git a/web-bán-hàng/views/element/nav-bar-right.ejs b/web-bán-hàng/views/element/nav-bar-right.ejs
@@ -0,0 +1,51 @@
+<div class=" col-lg-2 mt-4 ml-4" id="navbar-right">
+    <!-- <img src="./img/logo1.PNG" alt="logo" style="width:322px; height:150px;"> -->
+    <!-- <div class="list-group bg-light">
+            <% statusFilter.forEach((item)=>{ %>
+                <a href="/danh-muc-san-pham/<%= item.value %>" class="list-group-item bg-<%= item.class %>"><%= item.name %></a>
+            <% }) %>
+    </div> -->
+    <div class="m-2 p-2" style="color: brown"><h4><b>Bộ lọc sản phẩm</b></h4></div>
+    <div><p><b>Theo Danh mục sản phẩm</b></p></div>
+    <div class="list-group bg-light">
+        <% statusFilter.forEach((item)=>{ %>
+        <button class="dropdown-btn"><%= item.name %> 
+          <i class="fa fa-caret-down"></i>
+        </button>
+        <div class="dropdown-container" style="display: none">
+            <% for(let i = 0; i < item.value.length; i++) { %>
+                <a href="/danh-muc-san-pham/<%= item.value[i] %>" class="list-group-item bg-<%= item.class %>"><%= item.value[i].split('-').join(' ') %></a>
+            <% } %>
+        </div>
+        <% }) %>
+    </div>
+    <script>
+        
+        var dropdown = $(".dropdown-btn");
+        var i;
+        console.log(dropdown)
+        for (i = 0; i < dropdown.length; i++) {
+            dropdown[i].addEventListener("click", function() {
+                this.classList.toggle("active");
+                var dropdownContent = this.nextElementSibling;
+                if (dropdownContent.style.display === "block") {
+                    dropdownContent.style.display = "none";
+                } else {
+                    dropdownContent.style.display = "block";
+                }
+            });
+        }
+    </script>
+
+    <div class="mt-2"><p><b>Theo giá sản phẩm</b></p></div>
+    <div class="form-group">
+      <p>Từ :</p>  
+      <input type="text" name="" id="" class="form-control mb-2" placeholder="" aria-describedby="helpId">
+      <p>Đến :</p>
+      <input type="text" name="" id="" class="form-control mt-2 mb-2" placeholder="" aria-describedby="helpId">
+      <input type="submit" name="" id="" class="btn btn-danger" value="ÁP DỤNG">
+    </div>
+
+    </form>
+</div>
+