Navbar-toggler-icon Bootstrap 5

Question

Xin chào pawled,

Nội dung chính Show

Thanh điều hướng dọc
Căn giữa thanh điều hướng
Thanh điều hướng màu
Biểu tượng thương hiệu
Văn bản thanh điều hướng
Thanh điều hướng với danh sách thả xuống
Các biểu mẫu và nút trên thanh điều hướng
Thanh điều hướng cố định

Nếu Bạn muốn thay đổi màu sắc của biểu tượng bánh hamburger Bạn có thể thêm mã này

$('.navbar-toggler').click(function() {
  if($(".navbar-toggler").attr("aria-expanded")){
    $(".fa").toggleClass(".icon-color");
  };
});

trong Vanilla JS

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

và trong tệp CSS của bạn

.iconColor {
    color: #9933CC!important;
  }

ngoài Câu hỏi tiếp theo của bạn, Bạn có thể chỉ cần thêm quy tắc bổ sung vào tệp CSS của mình

.navbar .navbar-toggler:focus {
  color: #ff4444;
}

Tôi đã tạo và cập nhật đoạn trích cho Bạn. thực đơn bánh mì kẹp thịt

Hy vọng điều này sẽ giúp ích cho Bạn.
Trân trọng

Màu của trình chuyển đổi bánh hamburger được kiểm soát bởi hai lớp sẵn có được sử dụng để thay đổi màu của nội dung trong thanh điều hướng

thanh điều hướng. Lớp này được sử dụng để đặt màu của nội dung thanh điều hướng thành tối. Nó sẽ thay đổi biểu tượng bật tắt thành các đường tối hơn
thanh điều hướng tối. Lớp này được sử dụng để đặt màu của nội dung thanh điều hướng thành ánh sáng. Nó sẽ thay đổi biểu tượng bật tắt thành các đường trắng

Ghi chú. Cách đặt tên có vẻ hơi ngược. phải không. navbar-dark để làm cho nội dung tối hơn và. navbar-light để làm cho nó nhẹ hơn?

Ví dụ

<html>

________số 8

<____10>

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

2____5____50>

<2____53

<4<5____50>

________số 8

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

2html0

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

2<html3 html4html5html6

html7html8html5

>0>

<5

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

0>

________số 8

<>7>

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

2______5 1 2html5 4>

6< 8 html8html5<1 2html5<4>

html7<7

<2<5____88>

6<

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

04 2html5

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

07

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

08

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

09____65>1

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

08>3____65>5

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

08>7____65>9>

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

21<

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

23 2html5

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

26>

html7<5____123>

6<5

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

04>

6<<8 2html5<01 <02html5<04>

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

21<<08 2html5<11>

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

08<<15 2html5<18>

<20< 8 2html5<25 html8html5<29<54 8>

Một thanh điều hướng tiêu chuẩn được tạo với lớp

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

36, theo sau là lớp thu gọn đáp ứng.

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

37 (xếp thanh điều hướng theo chiều dọc trên màn hình xxlarge, cực lớn, lớn, trung bình hoặc nhỏ)

Để thêm liên kết bên trong thanh điều hướng, hãy sử dụng một

) với

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

các phần tử có lớp

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

39 theo sau là phần tử

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

40 có lớp

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

41

Ví dụ

Liên kết 1

Liên kết 2

Liên kết 3

Tự mình thử »

Thanh điều hướng dọc

Xóa lớp

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

42 để tạo thanh điều hướng luôn nằm dọc

Ví dụ

...
Tự mình thử »

Căn giữa thanh điều hướng

Thêm lớp

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

43 vào giữa thanh điều hướng

Ví dụ

...
Tự mình thử »

Thanh điều hướng màu

Sử dụng bất kỳ lớp nào trong số các lớp

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

44 để thay đổi màu nền của thanh điều hướng (

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

45,

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

370,

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

371,

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

372,

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

373,

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

374,

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

375 và

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

376)

Mẹo. Thêm màu văn bản trắng vào tất cả các liên kết trong thanh điều hướng bằng lớp

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

377 hoặc sử dụng lớp

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

378 để thêm màu văn bản màu đen

Ví dụ

Đang hoạt động

Liên kết

Liên kết

Đã tắt

...

...Try it Yourself »

Trạng thái hoạt động/bị vô hiệu hóa. Thêm lớp

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

379 vào phần tử

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

40 để đánh dấu liên kết hiện tại hoặc lớp

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

381 để chỉ ra rằng liên kết không thể nhấp được

Biểu tượng thương hiệu

Lớp

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

382 được sử dụng để làm nổi bật tên thương hiệu/logo/dự án trên trang của bạn

Ví dụ

Biểu trưng

Try it Yourself »

Khi sử dụng lớp

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

382 với hình ảnh, Bootstrap 5 sẽ tự động tạo kiểu cho hình ảnh để khớp với thanh điều hướng theo chiều dọc

Ví dụ

Try it Yourself »

Văn bản thanh điều hướng

Sử dụng lớp

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

384 để căn chỉnh theo chiều dọc bất kỳ phần tử nào bên trong thanh điều hướng không phải là liên kết (đảm bảo phần đệm và màu văn bản phù hợp)

Ví dụ

Văn bản thanh điều hướng

Try it Yourself »

Rất thường xuyên, đặc biệt là trên màn hình nhỏ, bạn muốn ẩn các liên kết điều hướng và thay thế chúng bằng một nút sẽ hiển thị chúng khi nhấp vào

Để tạo thanh điều hướng có thể thu gọn, hãy sử dụng nút có tên

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

385. Sau đó bọc nội dung thanh điều hướng (liên kết, v.v.) bên trong một

phần tử có

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

386, theo sau là id khớp với

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

387 của nút. "mục tiêu"

Ví dụ

    Biểu trưng

Liên kết

Liên kết

Liên kết

Try it Yourself »

Mẹo. Bạn cũng có thể xóa lớp

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

388 để LUÔN LUÔN ẩn liên kết thanh điều hướng và hiển thị nút chuyển đổi

Thanh điều hướng với danh sách thả xuống

Thanh điều hướng cũng có thể giữ menu thả xuống

Ví dụ

Menu thả xuống
- liên kết
- liên kết khác
- Liên kết thứ ba

Các biểu mẫu và nút trên thanh điều hướng

Bạn cũng có thể bao gồm các biểu mẫu bên trong thanh điều hướng

Ví dụ

    Biểu trưng

Liên kết

Liên kết

Liên kết

Thanh điều hướng cố định

Thanh điều hướng cũng có thể được cố định ở đầu hoặc cuối trang

Thanh điều hướng cố định vẫn hiển thị ở một vị trí cố định (trên cùng hoặc dưới cùng) độc lập với cuộn trang

Lớp

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

Ví dụ

Sử dụng lớp

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

Ví dụ

Sử dụng lớp

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

programming bootstrap

Navbar-toggler-icon Bootstrap 5

Ví dụ

Thanh điều hướng dọc

Ví dụ

Căn giữa thanh điều hướng

Ví dụ

Thanh điều hướng màu

Ví dụ

Biểu tượng thương hiệu

Ví dụ

Ví dụ

Văn bản thanh điều hướng

Ví dụ

Ví dụ

Thanh điều hướng với danh sách thả xuống

Ví dụ

Các biểu mẫu và nút trên thanh điều hướng

Ví dụ

Thanh điều hướng cố định

Ví dụ

Ví dụ

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội