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

6 7.698

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

Có làm thì mới có ăn như ai đó từng nói - Vài dòng ngắn cho QUẢNG CÁO nhé

Các bạn cần hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn đăng ký và sử dụng hosting từ link trên, Góc Làm Web sẽ có một ít tiền để duy trì. 

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

"Người ta tắt AdsBlock không phải vì người ta dại, mà người ta quý mình nên coi quảng cáo"

Hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn

+ 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

Bạn cũng có thể thích
  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ố.