Bootstrap Hover Dropdown là một plugin mở rộng hữu ích cho phép các menu thả xuống của Bootstrap được kích hoạt khi di chuột qua thay vì phải nhấp chuột. Điều này mang lại trải nghiệm người dùng mượt mà hơn, đặc biệt trên các trang web có nhiều menu.

Tìm hiểu về Bootstrap Hover Dropdown

Plugin này bổ sung thêm khả năng hiển thị menu thả xuống khi người dùng di chuyển chuột qua chúng, đồng thời hỗ trợ tính năng đóng chậm để tránh việc menu bị đóng ngay lập tức khi chuột vô tình rời khỏi khu vực. Nó cũng duy trì chức năng kích hoạt bằng cách nhấp chuột, đảm bảo tương thích với cả thiết bị máy tính và di động.

Hướng dẫn cài đặt nhanh chóng

Cách 1: Sử dụng npm

npm install bootstrap-hover-dropdown

Cách 2: Tải thủ công

1. Clone kho lưu trữ:

git clone https://gitcode.com/gh_mirrors/bo/bootstrap-hover-dropdown

2. Thêm các tệp cần thiết vào HTML theo thứ tự sau:

<!-- Thêm jQuery và Bootstrap trước -->
<script src="/duongdan/jquery.min.js"></script>
<script src="/duongdan/bootstrap.min.js"></script>
<!-- Sau đó thêm tệp plugin -->
<script src="/duongdan/bootstrap-hover-dropdown.min.js"></script>

Hướng dẫn sử dụng trong 3 phút

Cách 1: Sử dụng thuộc tính data (khuyến nghị)

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false">
    Tài khoản <b class="caret"></b>
  </a>
  <ul class="dropdown-menu">
    <li><a tabindex="-1" href="#">Tài khoản của tôi</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Thay đổi email</a></li>
    <li><a tabindex="-1" href="#">Thay đổi mật khẩu</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Đăng xuất</a></li>
  </ul>
</li>

Cách 2: Khởi tạo bằng JavaScript

$('.dropdown-toggle').dropdownHover({delay: 800, hoverDelay: 300});

Các tùy chọn cấu hình phổ biến

• delay: Thời gian chờ trước khi đóng menu (ms), mặc định là 500ms.
• hoverDelay: Thời gian chờ trước khi mở menu khi di chuột qua (ms), mặc định là 0ms.
• instantlyCloseOthers: Có đóng tất cả các menu khác đang mở hay không, mặc định là true.

Mẹo sử dụng và thực hành tốt nhất

• Plugin tự động tắt chức năng di chuột qua trên thiết bị cảm ứng, đảm bảo tương thích tốt trên điện thoại di động.
• Khi giao diện điều hướng ở trạng thái thu gọn, chức năng di chuột qua sẽ bị vô hiệu hóa.
• Bạn có thể áp dụng plugin chỉ cho các menu cụ thể bằng cách sử dụng các selector CSS.

Hỗ trợ trình duyệt

Plugin này hỗ trợ tất cả các trình duyệt hiện đại như Chrome, Firefox, Safari và Edge. Đối với IE, khuyến nghị sử dụng phiên bản từ IE9 trở lên.