Navigation Bar Là Gì

  -  

Navigation Bar (thanh điều hướng) cho người dùng biết được trang web gồm có những mục gì và trang web thuộc loại trang web nào. Có 2 loại Navigation Bar được sử dụng nhiều nhất là: 

Vertical Navigation: thanh điều hướng dọcHorizontal Navigation: thanh điều hướng ngang

*
Navigation Bar là gì? Hướng dẫn tạo thanh Navigation Bar đơn giản

Navigation Bar là gì?

Vậy cụ thể Navigation Bar là gì? Navigation bar còn gọi là thanh điều hướng hay thanh menu. Nó được dùng để điều hướng các mục chính của website như: “Trang chủ”, “Tin Tức”, “Về chúng tôi”, “Liên hệ”…Thanh này thường được đặt ở đầu trang web hoặc sau header tùy theo thiết kế của bài, giúp website rõ ràng người dùng dễ dàng hiểu được trang web và tương tác đơn giản hơn

*
Navigation Bar là gì?

Cách tạo Navigation Bar

Có nhiều cách tạo Navigation Bar, trong bài viết sẽ hướng dẫn tạo Navigation bằng sử dụng danh sách các thẻ và

Ví dụ tạo thanh điều hướng gồm các mục như: “Trang chủ”, “Làng công nghệ”, “Công nghệ”, “Khoa học”, “Cuộc sống”

 

 

 

 

 

Kết quả thu được sẽ như sau:

Trang chủLàng công nghệCông nghệKhoa họcCuộc sống 

Bỏ dấu ra khỏi đầu mục và bỏ margin padding ra khỏi danh sách thực hiện:

ul {

 list-style-type: none;

 margin: 0;

 padding: 0;

}

“List-style-type: none” để loại bỏ hết các dấu đầu mục vì không cần thiếtThiết lập “margin: 0” và “padding: 0” để loại các cài đặt lề mặc định
*
Cách tạo Navigation Bar

Tạo thanh điều hướng dọc – Vertical Navigation

Xây dựng thanh điều hướng dọc, định dạng phần tử trong ví dụ trên bằng cách thêm đoạn code này vào: 

“display: block” để hiển thị liên kết ở dạng các phần tử khối, nhấp vào bất cứ đâu trong khối để mở liên kếtCó thể chi định chiều rộng, margin, padding…nếu muốn 

li a {

 display: block;

 width: 60px;

}

Thiết lập chiều rộng của cả , tạo các kết quả tương tự như trên:

ul {

 list-style-type: none;

 margin: 0;

 padding: 0;

 width: 60px;

}

li a {

 display: block;

}

*
Tạo thanh điều hướng dọc – Vertical Navigation

Tạo thanh điều hướng ngang – Horizontal Navigation

Có 2 cách tạo thanh điều hướng ngang: danh sách dạng inline hoặc float

Sử dụng Inline: hiển thị các phần tử trong cùng 1 hàng, thêm thuộc tính “display: inline” vào phần tử trong ví dụ đầu

li {

 display: inline;

}

Sử dụng Float: 

li {

 float: left;

}

a {

 display: block;

 padding: 8px;

 background-color: #e9d8f4;

}

“float: left” để các phần tử khối nổi cạnh nhau.“padding: 8px” chỉ định một số padding để làm cho chúng hiển thị gọn gàng hơn“background-color: #e9d8f4”: thêm màu nền vào mỗi phần tử
*
Tạo thanh điều hướng ngang – Horizontal Navigation

Cách cố định thanh điều hướng

Cố định thanh điều hướng:

1.Sử dụng position: fixed để cố định vị trí ở top hay bottom ( trên hay dưới) của trang. Khi ta kéo chuột lên trên hoặc xuống dưới thì thành điều hướng vẫn giữ nguyên vị trí không biến mất

Trên cùng:

ul { position: fixed; top: 0; width: 100%;}

Dưới cùng: 

ul { position: fixed; bottom: 0; width: 100%;}

2.


Bạn đang xem: Navigation bar là gì


Xem thêm: #1 : Cách Tạo Phòng Left 4 Dead 2 Nhiều Người Chơi Đơn Giản Cho Gà Mới

Sử dụng position: sticky

Khi sử dụng thuộc tính này, menu ban sẽ có vị trí linh hoạt cho tới một vị trí nhất định và “dính” tại vị trí đó

ul { position: -webkit-sticky; /* áp dụng với Safari */ position: sticky; top: 0;}

*
Cách cố định thanh điều hướng


Xem thêm: Lmht: Lịch Thi Đấu Vòng Bảng Gpl Mùa Hè 2017, Chính Thức Bắt Đầu Kế Hoạch Kiếm 2 Vé Đi Cktg Của Việt Nam

*

Nguyễn Lê Minh Dương

Nguyễn Lê Minh Dương sinh ra và lớn lên tại miền trung quê hương đất Quảng Ngãi. Tốt nghiệp trường Đại Học Công Nghệ Tin – Đại Học Quốc Gia TPHCM – Chuyên ngành Ứng Dụng Truyền Thông Xã Hội và Công Nghệ Web. Dương có niềm đam mê kinh doanh và phát triển bản thân, có định hướng nghề nghiệp rõ ràng. Năm 2021 Dương thành lập doanh nghiệp: Công ty Cổ phần Công Nghệ dnppower.com.vn hoạt động trong lĩnh vực Digital Marketing, Social Media, Thương Mại Điện Tử, Chuyển Đổi Số, Lập Trình Thiết Kế Web, Phần Mềm, Ứng Dụng.