Bạn đã bao giờ tạo thanh điều hướng Bootstrap với menu thả xuống chưa? . Thay vào đó, chúng xuất hiện bằng cách nhấp vào nó. Đây là một quyết định thiết kế có chủ ý theo Mark Otto, một trong những người sáng lập Bootstrap
“Mục đích của trạng thái di chuột là để cho biết nội dung nào đó có thể nhấp được [văn bản được gạch chân] hoặc để cung cấp một số thông tin nhanh [URL đầy đủ trong chú giải công cụ]. Mục đích của một cú nhấp chuột là để thực sự làm điều gì đó, để thực hiện một hành động rõ ràng. ” – Mark Otto
Điểm công bằng Mark. Nhưng vẫn có một số tình huống mà các nhà phát triển có thể thích di chuột hơn. Vì vậy, trong hướng dẫn ngắn này, chúng ta sẽ xây dựng một thanh điều hướng Bootstrap điển hình với một giải pháp nhanh chóng để hiển thị danh sách thả xuống của nó khi di chuột
Ghi chú. Hướng dẫn này giả định rằng bạn đã có một số sự quen thuộc với Bootstrap 4
Bootstrap Navbar thả xuống khi di chuột
Đây là những gì chúng ta sẽ xây dựng.
Ghi chú. Để chúng ta có thể thấy các menu thả xuống đang hoạt động được nhúng trên trang này, tôi đã sử dụng các lớp mở rộng đáp ứng của Bootstrap; . Bạn có thể muốn sử dụng điểm ngắt lớn hơn để tránh nhấn đúp khi di chuột trên iPad
Tốt hơn nữa, vì bạn không nên đánh giá khả năng cảm ứng của màn hình theo kích thước của màn hình, bạn có thể sử dụng Truy vấn phương tiện CSS cấp 4 để phát hiện xem người dùng có thể di chuột hay không hoặc phát hiện tính năng JavaScript như Modernizr. Tuy nhiên, cả hai điều này đều không thể đánh lừa được 100%
Dù sao đi nữa, chúng ta hãy bắt đầu
1. Bao gồm nội dung Bootstrap
Để bắt đầu, chúng tôi sẽ bao gồm các tệp CSS và JavaScript cần thiết trong bản demo Codepen của chúng tôi
2. Tạo thanh điều hướng đơn giản
Để tạo thanh điều hướng của chúng tôi, chúng tôi sẽ dựa vào một số mã ví dụ cho thành phần thanh điều hướng do Bootstrap cung cấp
1
2
3
4
5
0
1
2
3
4
5
6
7
8
9
20
21
22
23
24
25
26
27
28
29
0
1
2
3
4
5
6
7
8
9
30
31
32
33
34
35
36
25
38
27
0
1
2
1
4
3
6
7
8
7
40
9
42
31
44
33
46
35
48
25
0
1
2
3
4
5
6
7
8
9
3. Thêm một số kiểu cơ bản
Tiếp theo, chúng tôi chỉ định ba quy tắc CSS cơ bản cho thành phần của chúng tôi. Họ không làm gì nhiều, chỉ cần thêm một số khoảng cách theo phong cách và làm cho mũi tên thả xuống chuyển xuống dưới khi kích hoạt danh sách thả xuống
1
51
2
53
3
55
4_______8
58
0
0
2
55
4
6
5
8
7
20
55
Đó là nó. Cho đến nay, chúng tôi đã xây dựng được một thanh điều hướng Bootstrap điển hình
Kiểm tra phiên bản máy tính để bàn của thanh điều hướng để có ấn tượng đúng về những gì đang diễn ra. Trong mọi trường hợp, hãy lưu ý rằng trình đơn thả xuống sẽ mở ra mỗi khi bạn nhấp vào liên kết gốc tương ứng
4. Tùy chỉnh danh sách thả xuống
Bây giờ, hãy tùy chỉnh hành vi mặc định của danh sách thả xuống
Trên màn hình nhỏ trở xuống [