CSS - Thanh 导航: Cửa ngõ vào Điều hướng Website

Xin chào các bạnfuture web developers! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của CSS Navigation Bars. Là người dạy máy tính hàng xóm thân thiện của bạn, tôi ở đây để hướng dẫn bạn qua khía cạnh quan trọng này của thiết kế web. Vậy, hãy lấy饮料 yêu thích của bạn, ngồi thoải mái, và cùng nhau nhảy vào!

Thanh 导航 là gì?

Trước khi bắt đầu mã hóa, hãy hiểu Thanh 导航 là gì. Hãy tưởng tượng bạn đang ở trong một thư viện khổng lồ. Bạn làm thế nào để tìm được cuốn sách bạn muốn? Bạn sử dụng các biển hiệu và danh mục, phải không? Vậy, Thanh 导航 cũng như vậy đối với các trang web. Đó là một bộ các liên kết giúp người dùng di chuyển dễ dàng trên trang web của bạn.

Bây giờ, hãy cùng nhìn vào các loại Thanh 导航 khác nhau và cách tạo chúng bằng CSS.

CSS Thanh 导航.Horizontal

Thanh 导航.Horizontal có lẽ là loại phổ biến nhất mà bạn sẽ thấy trên các trang web. Nó giống như một hàng nút ở đầu trang.

Dưới đây là một ví dụ đơn giản:

<ul class="navbar">
<li><a href="#home">Trang chủ</a></li>
<li><a href="#about">Giới thiệu</a></li>
<li><a href="#services">Dịch vụ</a></li>
<li><a href="#contact">Liên hệ</a></li>
</ul>

Và đây là CSS để làm cho nó trông đẹp:

.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

.navbar li {
float: left;
}

.navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.navbar li a:hover {
background-color: #111;
}

Hãy phân tích này:

1. Chúng ta loại bỏ các chấm liệt kê từ danh sách với list-style-type: none;
2. Chúng ta làm nổi các mục danh sách trái để chúng nằm hàng ngang
3. Chúng ta định dạng các liên kết để trông như các nút
4. Chúng ta thêm hiệu ứng nổi khi rê chuột để làm cho nó tương tác

CSS Thanh 导航.Vertical

Đôi khi, bạn có thể muốn Thanh 导航 của bạn là dọc, đặc biệt là trên các thiết bị di động hoặc thanh bên. Dưới đây là cách bạn có thể làm điều đó:

<ul class="vertical-navbar">
<li><a href="#home">Trang chủ</a></li>
<li><a href="#news">Tin tức</a></li>
<li><a href="#contact">Liên hệ</a></li>
<li><a href="#about">Giới thiệu</a></li>
</ul>

Và CSS:

.vertical-navbar {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}

.vertical-navbar li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

.vertical-navbar li a:hover {
background-color: #555;
color: white;
}

Sự khác biệt chính ở đây là chúng ta không nổi các mục danh sách. Thay vào đó, chúng ta đặt chiều rộng cho toàn bộ Thanh 导航 và để các mục danh sách tự nhiên chồng lên nhau.

CSS Thanh 导航.Thả xuống

Bây giờ, hãy thêm một chútazz với một menu thả xuống! Điều này rất tốt để tổ chức các phân mục con.

<ul class="navbar">
<li><a href="#home">Trang chủ</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Sản phẩm</a>
<div class="dropdown-content">
<a href="#">Laptop</a>
<a href="#">Tablet</a>
<a href="#">Điện thoại thông minh</a>
</div>
</li>
<li><a href="#contact">Liên hệ</a></li>
</ul>

Và CSS:

.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

.navbar li {
float: left;
}

.navbar li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.navbar li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
display: block;
}

CSS này sử dụng伪类:hover để hiển thị nội dung thả xuống khi người dùng rê chuột vào liên kết "Sản phẩm".

CSS Thanh 导航.Fix

Thanh 导航.Fix ở lại vị trí của nó ngay cả khi bạn cuộn. Nó giống như một hướng dẫn cá nhân luôn ở đó khi bạn cần nó.

Để làm cho Thanh 导航.Fix, chúng ta chỉ cần thêm một dòng vào CSS của chúng ta:

.navbar {
/* ... các样式 khác ... */
position: fixed;
top: 0;
width: 100%;
}

Điều này giữ Thanh 导航 ở đầu màn hình mọi lúc.

CSS Thanh 导航.Dính

Thanh 导航.Dính tương tự như Thanh 导航.Fix, nhưng nó chỉ trở thành cố định sau khi bạn cuộn qua nó. Nó giống như một người bạn theo bạn, nhưng chỉ sau khi bạn đã đi một khoảng cách nhất định.

Dưới đây là cách làm cho một Thanh 导航.Dính:

.navbar {
/* ... các样式 khác ... */
position: sticky;
top: 0;
}

Sự khác biệt là chúng ta sử dụng position: sticky thay vì position: fixed.

Thanh 导航 có Lines phân cách

Đôi khi, bạn muốn phân cách các mục Thanh 导航 bằng các đường. Dưới đây là một mẹo nhỏ để làm điều đó:

.navbar li {
border-right: 1px solid #bbb;
}

.navbar li:last-child {
border-right: none;
}

Điều này thêm một đường giữa mỗi mục, ngoại trừ mục cuối cùng.

Thanh 导航.Vertical.Fix

Cuối cùng, hãy kết hợp những gì chúng ta đã học để tạo một Thanh 导航.Vertical.Fix:

<ul class="fixed-vertical-navbar">
<li><a href="#home">Trang chủ</a></li>
<li><a href="#news">Tin tức</a></li>
<li><a href="#contact">Liên hệ</a></li>
<li><a href="#about">Giới thiệu</a></li>
</ul>

Và CSS:

.fixed-vertical-navbar {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}

.fixed-vertical-navbar li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

.fixed-vertical-navbar li a:hover {
background-color: #555;
color: white;
}

Điều này tạo ra một Thanh 导航.Vertical ở bên trái màn hình và ở lại vị trí của nó khi bạn cuộn.

Kết luận

Và thế là xong, các bạn! Chúng ta đã xem xét nhiều loại Thanh 导航, từ hàng ngang đến dọc, thả xuống đến cố định. Nhớ rằng, thực hành là cách tốt nhất để thành thạo, vì vậy đừng ngại thử nghiệm với các phong cách này và tạo ra thiết kế Thanh 导航 độc đáo của riêng bạn.

Dưới đây là bảng tóm tắt các loại Thanh 导航 chúng ta đã xem xét:

Loại Thanh 导航	Thuộc tính CSS chính	Đặc điểm chính
Hàng ngang	float: left;	Các mục nằm hàng ngang
Dọc	width: [giá trị];	Các mục chồng lên nhau
Thả xuống	:hover	Hiển thị các tùy chọn bổ sung khi rê chuột
Cố định	position: fixed;	Ở lại vị trí khi cuộn
Dính	position: sticky;	Trở thành cố định sau khi cuộn qua

Nhớ rằng, mã hóa giống như nấu ăn - bạn bắt đầu với các công thức cơ bản, nhưng khi bạn trở nên thoải mái hơn, bạn có thể bắt đầu thêm các hương vị của riêng bạn. Vậy, hãy trộn lẫn và kết hợp các phong cách này, và tạo ra thứ gì đó đẹp mắt!

Chúc các bạn mã hóa vui vẻ, và hy vọng Thanh 导航 của bạn luôn dẫn đến những điểm đến thú vị!

Credits: Image by storyset