Điều hướng trên trang web là một dạng danh sách và điều hướng theo tab giống như danh sách nằm ngang. Thật dễ dàng để tạo điều hướng theo thẻ ngang với CSS, nhưng CSS 3 cung cấp cho chúng tôi thêm một số công cụ để làm cho chúng trông đẹp hơn nữa.
Hướng dẫn này sẽ đưa bạn qua HTML và CSS cần thiết để tạo một menu tab CSS. Nhấp vào liên kết đó để xem nó sẽ trông như thế nào.
Menu tab này sử dụngKhông có hình ảnh, chỉ HTML và CSS 2 và CSS 3. Có thể dễ dàng chỉnh sửa để thêm các tab khác hoặc thay đổi văn bản trong đó.
Hỗ trợ trình duyệt
Menu tab này sẽ hoạt độngtất cả các trình duyệt chính. Internet Explorer sẽ không hiển thị các góc được làm tròn, nhưng nếu không, nó sẽ hiển thị các tab giống như Firefox, Safari, Opera và Chrome.
Viết danh sách menu của bạn
Tất cả các menu và tab điều hướng thực sự chỉ là một danh sách không có thứ tự. Vì vậy, điều đầu tiên bạn muốn làm là viết một danh sách không có thứ tự các liên kết đến nơi bạn muốn điều hướng theo thẻ của bạn để đi.
Hướng dẫn này giả định rằng bạn đang viết HTML của mình trong trình soạn thảo văn bản và bạn biết vị trí đặt HTML cho menu của bạn trên trang web của bạn.
Viết danh sách không theo thứ tự của bạn như thế này:
class = "danh sách tab">CSS 3id = "current"> TabDành choThực đơn
class = "danh sách tab"vàid = "hiện tại".Đầu tiên là cần thiết. Nếu bạn không đặtdanh sách tabtrong danh sách không có thứ tự của bạn, các tab sẽ không hoạt động. Thứ hai là tùy chọn. Đặtid = "hiện tại"trên bất kỳ tab nào bạn muốn được đánh dấu trên trang đó. Chúng tôi thường sử dụng điều này để làm nổi bật trang mà chúng tôi đang truy cập, nhưng bạn có thể sử dụng nó để làm nổi bật tab quan trọng nhất. Hoặc bạn có thể xóa hoàn toàn.
Bắt đầu chỉnh sửa bảng kiểu của bạn
Bạn có thể sử dụng biểu định kiểu bên ngoài hoặc một biểu định kiểu nội bộ. Trang menu mẫu sử dụng một bảng định kiểu nội bộ trong
của tài liệu.Đầu tiên chúng ta sẽ tạo kiểu cho chính nó
Đây là nơi chúng tôi sử dụng lớp họcdanh sách tab trong HTML. Thay vì tạo kiểu cho thẻ UL, nó sẽ tạo kiểu cho tất cả các danh sách không theo thứ tự trên trang của bạn, bạn chỉ nên tạo kiểu cho lớp UL.danh sách tab Vì vậy, mục đầu tiên trong CSS của bạn nên là:
.tablist {}
Chúng tôi thích đặt dấu ngoặc nhọn cuối (}) trước thời hạn, vì vậy chúng tôi không quên nó sau này.
Trong khi chúng tôi đang sử dụng một thẻ danh sách không có thứ tự cho danh sách menu tab, nhưng chúng tôi không muốn bất kỳ dấu đầu dòng hoặc số nào xâm nhập. Vì vậy, kiểu đầu tiên bạn nên thêm là.kiểu danh sách: none; Điều này cho trình duyệt biết rằng trong khi đó là danh sách, đó là danh sách không có kiểu được xác định trước (như dấu đầu dòng hoặc số).
Sau đó, bạn có thể thiết lập chiều cao của danh sách của bạn để phù hợp với không gian bạn muốn nó lấp đầy. Chúng tôi đã chọn 2em cho chiều cao của chúng tôi, vì đó là gấp đôi kích thước phông chữ chuẩn, và cung cấp cho khoảng một nửa em ở trên và bên dưới văn bản của tab.chiều cao: 2em; Nhưng bạn có thể đặt chiều rộng của mình thành bất kỳ kích thước nào bạn muốn. Thẻ UL sẽ tự động chiếm 100% chiều rộng, vì vậy trừ khi bạn muốn nó nhỏ hơn vùng chứa hiện tại, bạn có thể để chiều rộng ra.
Cuối cùng, nếu bảng định kiểu chính của bạn không có giá trị đặt trước cho thẻ UL và OL, bạn sẽ muốn đặt chúng vào. Điều này có nghĩa là bạn nên tắt đường viền, lề và đệm trên UL của mình. padding: 0; lề: 0; border: none; Nếu bạn đã đặt lại thẻ UL, bạn có thể thay đổi lề, đệm hoặc đường viền thành thứ gì đó phù hợp với thiết kế của bạn.
Lớp .tablist cuối cùng của bạn sẽ trông giống như sau:
.tablist {list-style: none; chiều cao: 2em; padding: 0; lề: 0; border: none; }
Chỉnh sửa các mục danh sách LI
Khi bạn đã tạo kiểu cho danh sách không theo thứ tự của mình, bạn cần phải tạo kiểu cho các thẻ LI bên trong danh sách. Nếu không, chúng sẽ hoạt động giống như một danh sách tiêu chuẩn và mỗi chuyển sang dòng tiếp theo mà không đặt các tab của bạn chính xác.
Trước tiên, hãy thiết lập thuộc tính kiểu của bạn:
.tablist li {}
Sau đó, bạn muốn nổi các tab của bạn để chúng xếp hàng trên mặt phẳng nằm ngang. float: trái;
Và đừng quên thêm một số lề giữa các tab để chúng không hợp nhất với nhau. margin-right: 0.13em;
Phong cách li của bạn sẽ trông như thế này:
.tablist li {float: left; margin-right: 0.13em; }
Làm cho các tab trông giống như các tab với CSS 3
Để thực hiện hầu hết việc nâng hạng nặng trong biểu định kiểu này, chúng tôi đang nhắm mục tiêu các liên kết trong danh sách không theo thứ tự. Các trình duyệt nhận ra rằng các liên kết thực hiện nhiều hơn trên một trang web hơn các thẻ khác, vì vậy sẽ dễ dàng hơn để các trình duyệt cũ tuân thủ những thứ như trạng thái di chuột nếu bạn đính kèm chúng vào thẻ liên kết (liên kết). Vì vậy, đầu tiên viết thuộc tính phong cách của bạn:
.tablist li a {} .tablist li a: hover {}
Vì các tab này sẽ hoạt động giống như các tab trong một ứng dụng, bạn muốn toàn bộ khu vực của tab có thể nhấp được, không chỉ văn bản được liên kết. Để làm điều này, bạn phải chuyển đổi thẻ A từ trạng thái "nội tuyến" bình thường thành phần tử khối. display: block; (Nếu bạn quan tâm đến việc tìm hiểu thêm về sự khác biệt này, hãy đọc Phần tử Cấp độ so với Nội tuyến).
Sau đó, một cách dễ dàng để buộc các tab của bạn được đối xứng với nhau, nhưng vẫn flex để phù hợp với chiều rộng của văn bản là để làm cho padding bên phải và bên trái giống nhau. Chúng tôi đã sử dụng thuộc tính viết tắt của padding để thiết lập trên cùng và dưới cùng là 0 và bên phải và trái sang 1em. padding: 0 1em;
Chúng tôi cũng đã chọn xóa liên kết gạch chân, để các tab trông giống như các liên kết.Nhưng nếu khán giả của bạn có thể bị nhầm lẫn bởi điều đó, hãy bỏ qua dòng này. link-decoration: none;
Bằng cách đặt một đường viền mỏng xung quanh các tab, nó làm cho chúng trông giống như các tab. Chúng tôi sử dụng tài sản viết tắt của biên giới để đưa biên giới xung quanh tất cả bốn phía border: 0.06em solid # 000; Và sau đó sử dụng thuộc tính border-bottom để loại bỏ nó từ phía dưới. border-bottom: 0;
Sau đó, chúng tôi đã thực hiện một số điều chỉnh đối với phông chữ, màu sắc và màu nền của các tab. Đặt các kiểu này cho phù hợp với trang web của bạn. phông chữ: đậm 0.88em / 2em arial, geneva, helvetica, sans-serif; màu: # 000; màu nền: #ccc;
Tất cả các kiểu trên phải đi vào bộ chọn.tablist li a, quy tắc để chúng ảnh hưởng đến các thẻ liên kết nói chung. Sau đó, để làm cho các tab xuất hiện nhiều hơn, bạn nên thêm một vài quy tắc của tiểu bang.tablist li a: di chuột.
Chúng tôi muốn thay đổi màu sắc của văn bản và nền để làm cho tab pop khi bạn di chuột qua nó. nền: # 3cf; màu: #fff;
Và chúng tôi đã bao gồm một lời nhắc nhở khác cho các trình duyệt mà chúng tôi muốn liên kết vẫn không được gạch dưới. text-decoration: none; Một phương pháp phổ biến khác là bật lại đường gạch dưới khi bạn di chuột qua tab. Nếu bạn muốn làm điều đó, hãy thay đổi nó thành text-decoration: gạch dưới;
Nhưng CSS 3 ở đâu?
Nếu bạn đã chú ý, bạn có thể nhận thấy rằng không có bất kỳ kiểu CSS 3 nào được sử dụng trong biểu định kiểu. Điều này có lợi thế là làm việc trong bất kỳ trình duyệt hiện đại nào, bao gồm cả Internet Explorer. Nhưng nó không làm cho các tab trông giống như bất cứ điều gì nhiều hơn hộp vuông. Bằng cách thêm một CSS 3 kiểu gọi đường viền bán kính (và nó liên quan đến trình duyệt cụ thể cuộc gọi) bạn có thể làm cho các cạnh tròn, để trông giống như các tab trên một thư mục manila.
Các kiểu bạn nên thêm vào .tablist li a quy tắc là: -webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; border-top-right-radius: 0.50em; border-top-left-radius: 0.50em;
Đây là những quy tắc phong cách cuối cùng mà chúng tôi đã viết:
.tablist li a {display: block; padding: 0 1em; text-decoration: none; border: 0.06em solid # 000; border-bottom: 0; phông chữ: đậm 0.88em / 2em arial, geneva, helvetica, sans-serif; màu: # 000; màu nền: #ccc; / * Phần tử CSS 3 * / webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; border-top-right-radius: 0.50em; border-top-left-radius: 0.50em; } .tablist li a: hover {background: # 3cf; màu: #fff; text-decoration: none; }
Với những kiểu này, bạn có một trình đơn tab hoạt động trong tất cả các trình duyệt chính và trông giống như các tab được in đẹp mắt trong các trình duyệt tuân thủ CSS 3. Trang tiếp theo cung cấp cho bạn thêm một tùy chọn mà bạn có thể sử dụng để ăn mặc hơn nữa.
Đánh dấu Tab hiện tại
Trong HTML chúng ta đã tạo, UL có một phần tử danh sách với một ID. Điều này cho phép bạn cung cấp cho một LI một phong cách khác với phần còn lại. Tình huống phổ biến nhất là làm cho tab hiện tại nổi bật theo một cách nào đó. Một cách khác để nghĩ về điều này là bạn muốn chuyển sang màu xám các tab không hoạt động. Sau đó bạn thay đổi vị trí của id trên các trang khác nhau.
Chúng tôi tạo kiểu cho cả thẻ #current A cũng như #current A: hover sta sao cho cả hai đều hơi khác nhau. Bạn có thể thay đổi màu, màu nền, ngay cả chiều cao, chiều rộng và phần đệm của phần tử đó. Thực hiện bất kỳ thay đổi nào có ý nghĩa trong thiết kế của bạn.
.tablist li # current {background-color: # 777; màu: #fff; } .tablist li # current a: hover {nền: # 39C; }
Và bạn đã hoàn tất! Bạn vừa tạo một menu tab cho trang web của mình.
