Làm menu sidebar

24/05/2019

Bài sau » « Bài trước

Hôm nay chúng ta làm tiếp bài tập nhỏ đó là làm menu sidebar nhé.

Kết quả mong muốn:

- Làm được menu sidebar
- Kết hợp jquery để show/ hide menu con

Đầu tiên, tạo cấu trúc HTML của sidebar

<div class="sidebar-left"> <h3 class="sidebar-title">Menu sidebar</h3> <ul class="sidebar-menu"> <li><a href="#" >Trang chủ</a> </li> <li class="has-child"> <a href="#" >Sản phẩm <i class="icon"></i></a> <ul class="menu-sub" > <li><a href="#" >Sản phẩm A</a> </li> <li class="has-child"> <a href="#" >Sản phẩm B <i class="icon"></i></a> <ul class="menu-sub" > <li><a href="#" >Sản phẩm B - 1</a> </li> <li><a href="#" >Sản phẩm B - 2</a> </li> <li><a href="#" >Sản phẩm B - 3</a> </li> <li><a href="#" >Sản phẩm B - 4</a> </li> </ul> </li> <li><a href="#" >Sản phẩm C</a> </li> <li><a href="#" >Sản phẩm D</a> </li> </ul> </li> <li class="has-child"> <a href="#" >Về chúng tôi <i class="icon"></i></a> <ul class="menu-sub" > <li><a href="#" >Lịch sử hình thành</a> </li> <li><a href="#" >Mục tiêu và sứ mệnh</a> </li> <li><a href="#" >Đối tác</a> </li> </ul> </li> <li><a href="#" >Chính sách</a> </li> <li><a href="#" >Liên hệ</a> </li> </ul> </div>

Tiếp theo, Code CSS : - Trước khi code nhớ reset CSS nhé. Các bạn có thể tìm trên google có sẵn file reset.css lấy về chèn vào web. - Cho sidebar left màu nền và padding: 15px;

*{margin: 0;padding: 0;} ul,ol{list-style: none;} a{text-decoration: none;} .sidebar-left { background-color: #f9fafb; border-radius: 5px; padding: 15px; }

- Code tiêu đề h3:

.sidebar-left .title-sidebar { color: #333; font-size: 18px; line-height: 22px; font-weight: bold; margin: 0 0 15px; }

- Code menu:

.sidebar-left .sidebar-menu{ list-style: none; } .sidebar-left .sidebar-menu li{ display: block; } .sidebar-left .sidebar-menu li a{ display: block; font-size: 16px; line-height: 1.2; text-decoration: none; padding: 5px 0; position: relative; color: #333; } .sidebar-left .sidebar-menu li a:hover{ color: #4caf50; } .sidebar-left .sidebar-menu li ul{ padding-left: 20px; list-style: none; }

Sau khi code xong 2 đoạn trên ta được menu như thế này:

Làm menu sidebar

Tiếp theo, Code css cho ẩn menu cấp 2, 3 đi.

.sidebar-left .sidebar-menu li ul{ padding-left: 20px; list-style: none; display: none; }

CSS icon :

.sidebar-left .sidebar-menu li.has-child .icon { content: ''; position: absolute; right: 0; top: 4px; width: 20px; height: 20px; background: url(//theme.hstatic.net/1000006434/1000468887/14/menu-arrow.png?v=491) center center no-repeat; background-size: 14px; transition: all 0.3s ease-in-out; }

Kết quả tới bước này đạt được như sau:

Làm menu sidebar

Cuối cùng, code đoạn jquery khi click vào icon mũi tên thì hiển thị menu con.

<script> $(document).ready(function(){ $('.sidebar-menu li.has-child > a .icon').click(function(e){ e.preventDefault(); $(this).parent().parent().toggleClass('menu-open'); }); }) </script>

Đoạn script ở trên chỉ xử lý vấn đề duy nhất là add hoặc remove class (thông qua hàm .toggleClass() ) khi click vào mũi tên.

Ý nghĩa của đoạn code trên là: Khi click vào mũi tên thì lùi lại 2 cấp thông qua hàm .parent() 2 lần, tức là khi đó nó ở thẻ <li class="has-child"> và chạy hàm .toggleClass('menu-open') để add class hoặc remove class.

Do đó, việc show/hide menu cấp 2,3 dựa theo class "menu-open" mà ta thêm vào. Code css như sau:

.sidebar-left .sidebar-menu li.has-child.menu-open > a .icon{ transform: rotate(180deg); /* Khi có class .menu-open thì xoay icon 180 độ */ } .sidebar-left .sidebar-menu li.has-child.menu-open > ul{ display: block; /* Khi có class .menu-open thì menu con kế tiếp hiển thị */ }

Ở bài này, chúng ta chỉ làm menu ở mức đơn giản như vậy. Ở bài sau chúng ta sẽ làm thêm hiệu ứng để menu chạy mượt hơn. Cám ơn các bạn đã theo dõi. Chúc các bạn thực hành thành công.

Link demo menu sidebar: tại đây

Tổng hợp CSS của bài thực hành:

.sidebar-left { background-color: #f9fafb; border-radius: 5px; padding: 15px; } .sidebar-left .sidebar-title { color: #333; font-size: 18px; line-height: 22px; font-weight: bold; margin: 0 0 15px; } .sidebar-left .sidebar-menu{ list-style: none; } .sidebar-left .sidebar-menu li{ display: block; } .sidebar-left .sidebar-menu li a{ display: block; font-size: 16px; line-height: 1.2; text-decoration: none; padding: 5px 0; position: relative; color: #333; } .sidebar-left .sidebar-menu li a:hover{ color: #4caf50; } .sidebar-left .sidebar-menu li ul{ padding-left: 20px; list-style: none; display: none; } .sidebar-left .sidebar-menu li.has-child > a .icon{ content: ''; position: absolute; right: 0; top: 4px; width: 20px; height: 20px; background: url(//theme.hstatic.net/1000006434/1000468887/14/menu-arrow.png?v=491) center center no-repeat; background-size: 14px; transition: all 0.3s ease-in-out; } .sidebar-left .sidebar-menu li.has-child.menu-open > a .icon{ transform: rotate(180deg); } .sidebar-left .sidebar-menu li.has-child.menu-open > ul{ display: block; }

Bài sau » « Bài trước
Back to top