Bài 10: Navbar – Tạo menu đa cấp với hiệu ứng hover và responsive

6

Trong bài này, mình sẽ hướng dẫn các bạn về navbar – tạo menu đa cấp với hiệu ứng hover và responsive. Phần lớn nội dung trong bài học sẽ lấy code mẫu từ getbootstrap.com. Tuy nhiên, chúng ta sẽ tùy chỉnh lại phần menu đa cấp với tính năng hover.

Video – Navbar – Tạo menu đa cấp với hiệu ứng hover và responsive

Hướng dẫn chi tiết

Trong bài 9: Navs, chúng ta đã biết cách tạo 1 menu đơn giản. Bài này chúng ta sẽ làm một menu phức tạp hơn.

Sử dụng menu có khả năng responsive mà Bootstrap đã dựng sẵn. Các bạn vào phần hướng dẫn về Navbar của Boottstrap Doc. Copy mã nguồn đã làm sẵn và dùng cho file html đang làm.

Menu của Bootstrap đã cung cấp cho chúng ta gồm 1 số phần phần sau:

+ navbar-brand: tiêu đề của menu

+ phần menu chính

+ search form

Ngoài ra, menu còn đặt trong collapse để biến đổi responsive theo loại màn hình.

Các bạn có thể thêm hoặc bớt các phần theo nhu cầu của mình.

Tạo menu đa cấp có tính năng đổ xuống khi hover

Thanh menu làm sẵn của Bootstrap có tính năng nhiều cấp chuyên mục dạng dropdown. Tuy nhiên, các item chỉ đổ xuống khi ta click chuột vào. Để làm tính năng hover, chúng ta cần chỉnh lại code.

File HTML

<li class="nav-item dropdown">
   <a class="nav-link" href="#" id="navbarDropdown">Dropdown</a>
   <div class="dropdown-content">
   <a class="dropdown-item" href="#">Action</a>
   <div class="dropdown-divider"></div>
   <a class="dropdown-item" href="#">Another action</a>
   <div class="dropdown-divider"></div>
   <a class="dropdown-item" href="#">Something else here</a>
   </div>
</li>

chúng ta đổi class dropdown-menu thành dropdown-content

File CSS

Chọn khối dropdown bao ngoài làm mốc

.dropdown{
   position: relative;
   display: inline-block;
}

Với các item đổ xuống, chúng ta cho ẩn đi bằng display block

/*sub-menu*/
.dropdown-content{
   display: none;
   position: absolute;
   background-color: #f5f5f5;
   z-index: 1;
   list-style: none;
}

Khi hover vào sẽ hiện ra khi set thuộc tính display: block

.dropdown:hover .dropdown-content{
   display: block;
}

Ngoài ra, các bạn có thể thêm thuộc tính transition để hiệu ứng mượt mà hơn.

Code mẫu: Download

Nếu có thắc mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Liên h

  1. Hồng nói

    Hiện tại khi người dùng di chuột vào thanh menu, lỡ bất cẩn di chuột ra ngoài thanh menu thì menu biến mất đột ngột. Em muốn khi di chuột vào thanh menu, khi rút chuột ra thì sau 1 giây menu mới biến mất, như vậy người dùng di chuyển qua lại giữa các danh mục con thì menu không biến mất đột ngột. Vậy phải code thế nào ạ?

    1. Admin nói

      nếu như vậy người dùng hover vào menu con xong hover menu con kah1c nó bị đè lên nhau rồi sao :v

  2. le nói

    a ơi cho e hỏi vd, mình chia 1 bài làm 2 cột 2-10 mình làm sao để thanh điều hướng của nó thả xuống 1 lần cả 2 được ạ

    1. Admin nói

      thì bn thả xuống 1 row

  3. […] thể sử dụng code có sẵn của Bootstrap (link). Hoặc tự code như hướng dẫn ở bài 10: Navbar – tạo thanh menu đa cấp với hiệu ứng hover và […]

  4. […] các bạn chưa hiểu rõ về menu trong Bootstrap, có thể xem lại Bài 9 – Navs và Bài 10: Navbar […]

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.