Bootstrap 5 codepen menu di động

Ví dụ bên dưới cũng trượt trong điều hướng bên và đẩy nội dung trang sang bên phải, chỉ lần này, chúng tôi thêm màu nền đen với độ mờ 40% cho thành phần nội dung để "làm nổi bật" điều hướng bên


Tìm hiểu cách thay đổi kích thước thanh điều hướng khi cuộn bằng CSS và JavaScript


Tự mình thử »


Cách thu nhỏ thanh điều hướng khi cuộn

Bước 1) Thêm HTML

Tạo thanh điều hướng

Ví dụ


 
 


   
   
   
 



Bước 2) Thêm CSS

Tạo kiểu cho thanh điều hướng

Ví dụ

/* Tạo thanh điều hướng dính/cố định */
#navbar {
  tràn. ẩn;
  màu nền. #f1f1f1;
  phần đệm. 90px 10px; . 0. 4s; . đã sửa; . 100%;
  transition: 0.4s; /* Adds a transition effect when the padding is decreased */
  position: fixed; /* Sticky/fixed navbar */
  width: 100%;
  hàng đầu. 0; . 99;
  z-index: 99;
}

/* Tạo kiểu cho liên kết thanh điều hướng */
#navbar a {
  float. trái;
  màu. màu đen;
  căn chỉnh văn bản. trung tâm;
  phần đệm. 12px;
  trang trí văn bản. không;
  cỡ chữ. 18px;
  chiều cao dòng. 25px;
  bán kính đường viền. 4px;
}

/* Tạo kiểu cho logo */
#navbar #logo {
  cỡ chữ. 35px;
  độ dày phông chữ. in đậm;
  chuyển tiếp. 0. 4s;
}

/* Liên kết khi di chuột qua */
#navbar a. di chuột {
  màu nền. #ddd;
  màu. đen;
}

/* Tạo kiểu cho liên kết đang hoạt động/hiện tại */
#navbar a. màu nền {
đang hoạt động. màu xanh da trời;
  màu. trắng;
}

/* Hiển thị một số liên kết ở bên phải */
#navbar-right {
  float. phải;
}

/* Thêm khả năng phản hồi - trên màn hình rộng dưới 580px, hiển thị thanh điều hướng theo chiều dọc thay vì theo chiều ngang */
@màn hình phương tiện và (chiều rộng tối đa. 580px) {
  #navbar {
    đệm. 20px 10px. quan trọng; . điều quan trọng là đảm bảo rằng JavaScript không ghi đè phần đệm trên màn hình nhỏ */
  }
  #navbar a {
    float. không;
    hiển thị. chặn;
    căn chỉnh văn bản. trái;
  }
  #navbar-right {
    float. không;
  }
}



Bước 3) Thêm JavaScript

Ví dụ

// Khi người dùng cuộn xuống 80px từ đầu tài liệu, hãy thay đổi kích thước phần đệm của thanh điều hướng và kích thước phông chữ của logo
cửa sổ. onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (tài liệu. thân thể. cuộnTop > 80. tài liệu. tài liệuElement. scrollTop > 80) {
    tài liệu. getElementById("thanh điều hướng"). Phong cách. padding="30px 10px";
    tài liệu. getElementById("logo"). Phong cách. fontSize = "25px";
  } other {
    tài liệu. getElementById("thanh điều hướng"). Phong cách. padding="80px 10px";
    tài liệu. getElementById("logo"). Phong cách. fontSize = "35px";
  }
}

Tự mình thử »

Chuyển đổi lớp phủ theo ngữ cảnh để hiển thị danh sách liên kết và hơn thế nữa bằng plugin thả xuống Bootstrap

Tổng quan

Danh sách thả xuống có thể chuyển đổi, lớp phủ theo ngữ cảnh để hiển thị danh sách liên kết và hơn thế nữa. Chúng được thực hiện tương tác với plugin JavaScript thả xuống Bootstrap đi kèm. Chúng được bật bằng cách nhấp chuột, không phải bằng cách di chuột;

Danh sách thả xuống được xây dựng trên thư viện của bên thứ ba, Popper. js, cung cấp tính năng định vị động và phát hiện khung nhìn. Hãy chắc chắn bao gồm popper. tối thiểu. js trước JavaScript của Bootstrap hoặc sử dụng


Action

4 /

Action

5 có chứa Popper. js. thuốc phiện. js không được sử dụng để định vị danh sách thả xuống trong thanh điều hướng mặc dù không yêu cầu định vị động

Nếu bạn đang xây dựng JavaScript của chúng tôi từ nguồn, nó

khả năng tiếp cận

Tiêu chuẩn WAI ARIA xác định một thực tế, nhưng điều này dành riêng cho các menu giống như ứng dụng kích hoạt các hành động hoặc chức năng. Menu ARIA chỉ có thể chứa các mục menu, mục menu hộp kiểm, mục menu nút radio, nhóm nút radio và menu phụ

Mặt khác, trình đơn thả xuống của Bootstrap được thiết kế chung chung và có thể áp dụng cho nhiều tình huống và cấu trúc đánh dấu. Chẳng hạn, có thể tạo danh sách thả xuống chứa đầu vào bổ sung và điều khiển biểu mẫu, chẳng hạn như trường tìm kiếm hoặc biểu mẫu đăng nhập. Vì lý do này, Bootstrap không mong đợi (cũng như không tự động thêm) bất kỳ thuộc tính


Action

8 và

Action

9 nào cần thiết cho các menu ARIA thực sự. Các tác giả sẽ phải tự đưa vào các thuộc tính cụ thể hơn này

Tuy nhiên, Bootstrap có thêm hỗ trợ tích hợp cho hầu hết các tương tác menu bàn phím tiêu chuẩn, chẳng hạn như khả năng di chuyển qua các phần tử


Action Toggle Dropdown

0 riêng lẻ bằng các phím con trỏ và đóng menu bằng phím ESC

ví dụ

Bọc nút chuyển đổi của trình đơn thả xuống (nút hoặc liên kết của bạn) và trình đơn thả xuống trong


Action Toggle Dropdown

1 hoặc một phần tử khác khai báo

Action Toggle Dropdown

2. Danh sách thả xuống có thể được kích hoạt từ các yếu tố

Action Toggle Dropdown

3hoặc để phù hợp hơn với nhu cầu tiềm năng của bạn

nút đơn

Bất kỳ


Action Toggle Dropdown

4 đơn lẻ nào cũng có thể được chuyển đổi thành chuyển đổi thả xuống với một số thay đổi đánh dấu. Đây là cách bạn có thể làm cho chúng hoạt động với một trong hai

yếu tố.

Action Toggle Dropdown

5


Action Toggle Dropdown

6

Và với các yếu tố


Action Toggle Dropdown

3


Action

3

Phần tốt nhất là bạn cũng có thể làm điều này với bất kỳ biến thể nút nào


Action

nút tách

Tương tự, tạo danh sách thả xuống của nút tách với cách đánh dấu gần giống như danh sách thả xuống của nút đơn, nhưng có thêm


Action Toggle Dropdown

8 để tạo khoảng cách thích hợp xung quanh dấu mũ thả xuống

Chúng tôi sử dụng lớp bổ sung này để giảm 25%


Action Toggle Dropdown

9 ngang ở hai bên của dấu mũ và loại bỏ

Action

70 được thêm vào cho các nút thả xuống thông thường. Những thay đổi bổ sung đó giữ cho dấu nháy ở giữa nút tách và cung cấp vùng nhấn có kích thước phù hợp hơn bên cạnh nút chính


Action Toggle Dropdown

định cỡ

Menu thả xuống nút hoạt động với các nút ở mọi kích cỡ, bao gồm các nút thả xuống mặc định và chia nhỏ

Nút tách lớn Toggle Dropdown

Nút tách nhỏ Toggle Dropdown


Action

7

Hướng

dropup

Kích hoạt menu thả xuống phía trên các phần tử bằng cách thêm


Action

71 vào phần tử gốc

Tách dropup Chuyển đổi thả xuống


Action

1

Thả ngay

Kích hoạt menu thả xuống ở bên phải của các phần tử bằng cách thêm


Action

72 vào phần tử chính

Tách dropright Chuyển đổi Dropright


Action

3

thả trái

Kích hoạt menu thả xuống ở bên trái của các phần tử bằng cách thêm


Action

73 vào phần tử chính


Action

5

Trước đây, nội dung menu thả xuống phải là liên kết, nhưng điều đó không còn xảy ra với v4. Giờ đây, bạn có thể tùy ý sử dụng các thành phần trong danh sách thả xuống của mình thay vì chỉ


Action Toggle Dropdown

3s.

Action

75


Action

76

Bạn cũng có thể tạo các mục thả xuống không tương tác với


Action

77. Thoải mái tạo kiểu hơn nữa với các tiện ích văn bản hoặc CSS tùy chỉnh


Action

1

Tích cực

Thêm


Action

78 vào các mục trong danh sách thả xuống để định kiểu chúng là hoạt động


Action

30

Vô hiệu hóa

Thêm


Action

79 vào các mục trong danh sách thả xuống để định kiểu chúng là bị vô hiệu hóa


Action

31

Theo mặc định, menu thả xuống được tự động định vị 100% từ trên cùng và dọc theo bên trái của menu chính. Thêm


Action

10 vào một

Action

11 để căn phải menu thả xuống

Đứng lên. Danh sách thả xuống được định vị nhờ Popper. js (trừ khi chúng được chứa trong thanh điều hướng)


Action

32

căn chỉnh đáp ứng

Nếu bạn muốn sử dụng căn chỉnh đáp ứng, hãy tắt tính năng định vị động bằng cách thêm thuộc tính


Action

12 và sử dụng các lớp biến thể đáp ứng

Để căn chỉnh menu thả xuống bên phải với điểm dừng đã cho hoặc lớn hơn, hãy thêm


Action

13

Căn trái nhưng căn phải khi màn hình lớn


Action

33

Để căn trái menu thả xuống với điểm dừng đã cho hoặc lớn hơn, hãy thêm


Action

10 và

Action

15

Căn phải nhưng căn trái khi màn hình lớn


Action

34

Lưu ý rằng bạn không cần thêm thuộc tính


Action

12 vào các nút thả xuống trong thanh điều hướng, vì Popper. js không được sử dụng trong thanh điều hướng

Thêm tiêu đề để gắn nhãn các phần hành động trong bất kỳ menu thả xuống nào


Action

35

dải phân cách

Tách các nhóm mục menu có liên quan bằng một dải phân cách


Action

36

Chữ

Đặt bất kỳ văn bản dạng tự do nào trong menu thả xuống có văn bản và sử dụng các tiện ích giãn cách. Lưu ý rằng bạn có thể sẽ cần các kiểu định cỡ bổ sung để hạn chế chiều rộng của menu


Action

37

Các hình thức

Đặt một biểu mẫu trong menu thả xuống hoặc biến nó thành một menu thả xuống và sử dụng các tiện ích lề hoặc đệm để cung cấp cho nó khoảng trống mà bạn yêu cầu


Action

38

Action

39

tùy chọn thả xuống

Sử dụng


Action

17 hoặc

Action

18 để thay đổi vị trí của danh sách thả xuống


Action

0

Cách sử dụng

Thông qua thuộc tính dữ liệu hoặc JavaScript, plugin thả xuống chuyển đổi nội dung ẩn (menu thả xuống) bằng cách chuyển đổi lớp


Action

19 trên mục danh sách gốc. Thuộc tính

Action

30 được dựa vào để đóng các menu thả xuống ở cấp ứng dụng, vì vậy bạn nên luôn sử dụng thuộc tính này

Trên các thiết bị hỗ trợ cảm ứng, việc mở menu thả xuống sẽ thêm các trình xử lý trống (


Action

31)

Action

32 cho phần tử con trực tiếp của phần tử. Bản hack xấu xí được thừa nhận này là cần thiết để giải quyết một vấn đề khó hiểu trong ủy quyền sự kiện của iOS, điều này sẽ ngăn một lần nhấn ở bất kỳ đâu bên ngoài danh sách thả xuống kích hoạt mã đóng danh sách thả xuống. Sau khi đóng danh sách thả xuống, các trình xử lý

Action

32 trống bổ sung này sẽ bị xóa

Thông qua thuộc tính dữ liệu

Thêm


Action

30 vào một liên kết hoặc nút để chuyển đổi danh sách thả xuống


Action

1

Qua JavaScript

Gọi danh sách thả xuống qua JavaScript


Action

2


Action

30 vẫn cần thiết

Bất kể bạn gọi trình đơn thả xuống của mình qua JavaScript hay thay vào đó sử dụng data-api, thì _____230 luôn được yêu cầu phải có mặt trên phần tử kích hoạt của trình đơn thả xuống

Tùy chọn

Các tùy chọn có thể được chuyển qua thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy thêm tên tùy chọn vào


Action

37, như trong

Action

38

TênTypeDefaultMô tảoffsetnumber. chuỗi. chức năng0

Độ lệch của danh sách thả xuống so với mục tiêu của nó

Khi một hàm được sử dụng để xác định phần bù, nó được gọi với một đối tượng chứa dữ liệu phần bù làm đối số đầu tiên của nó. Hàm phải trả về một đối tượng có cùng cấu trúc. Nút DOM phần tử kích hoạt được chuyển làm đối số thứ hai

Để biết thêm thông tin tham khảo Popper. js

flipbooleantrueCho phép danh sách thả xuống lật trong trường hợp phần tử tham chiếu bị chồng chéo. Để biết thêm thông tin tham khảo Popper. js. ranh giới. ranh giới ràng buộc phần tử'scrollParent'Overflow của menu thả xuống. Chấp nhận các giá trị của

Action

39,

Action

50,

Action

51 hoặc tham chiếu HTMLElement (chỉ dành cho JavaScript). Để biết thêm thông tin tham khảo Popper. js. chuỗi tham chiếu. element'toggle'Reference phần tử của menu thả xuống. Chấp nhận các giá trị của

Action

52,

Action

53 hoặc tham chiếu HTMLElement. Để biết thêm thông tin tham khảo Popper. js. chuỗi hiển thị'động'Theo mặc định, chúng tôi sử dụng Popper. js cho định vị động. Vô hiệu hóa điều này với

Action

54

Lưu ý khi


Action

55 được đặt thành bất kỳ giá trị nào khác với

Action

51, kiểu

Action

57 được áp dụng cho vùng chứa

Action Toggle Dropdown

1

phương pháp

MethodDescription

Action

59Chuyển đổi menu thả xuống của thanh điều hướng đã cho hoặc điều hướng theo thẻ.
0Hiển thị menu thả xuống của một thanh điều hướng nhất định hoặc điều hướng theo thẻ.
1Ẩn menu thả xuống của một thanh điều hướng hoặc điều hướng theo thẻ nhất định.
2Cập nhật vị trí của danh sách thả xuống của một phần tử.
3Hủy bỏ danh sách thả xuống của một phần tử

Sự kiện

Tất cả các sự kiện thả xuống đều được kích hoạt tại phần tử cha của


Action

11 và có thuộc tính
5, có giá trị là phần tử neo chuyển đổi. Sự kiện
6 và
7 có thuộc tính
8 (chỉ khi loại sự kiện ban đầu là
9) chứa Đối tượng sự kiện cho sự kiện nhấp chuột