Menu dạng tab - Phần I

Trong menu dạng này bao giờ cũng gồm 2 phần, phần 1 để chứa các tab và phần thứ hai là phần để chứa nội dung của các tab. để có hình dung rõ hơn chúng ta sẽ xem hình ảnh minh họa dưới đây.

Đầu tiên chúng ta sẽ định dạng cho phần khung của tab như sau:

div#wrapper {
margin: 50px;
padding: 0;
}

Chúng ta sẽ dùng định dạng của thẻ

để tạo lên các tab ở phần 1. Về nguyên tắc thì chúng ta có thể dùng một trong ba thẻ
,
,

. Nhưng tại sao tôi lại dùng thẻ

, là bởi vì một lý do nào đó mà trình duyệt của người xem không tải được CSS từ Website của bạn thì họ vẫn hiểu được cấu trúc tab của bạn. Định dạng của phần một như sau:


1. Trang chủ

Giới thiệu
Sản phẩm
Tin tức

Bây giờ chúng ta sẽ định dạng sao cho các tab nằm trên cùng một hàng và có hình dáng của tab.

ol.tab {
background: url(../dot.gif) repeat-x left bottom; /* ảnh 1px */
list-style: none;
margin: 0;
padding: 6px 0;
position: relative;
}

Trong cách định dạng này ta có sử dụng một kỹ thuật nhỏ, đó là chúng ta có sử dụng một ảnh .gif có kích thước 1px x 1px để thay thế border-bottom của

Khi đang ở trong trang nào đó thì tab của trang đó sẽ có màu khác với những tab khác, do vậy chúng ta sẽ đặt cho tab đó một class là active. Vì vậy chúng ta cần phải định dạng cho riêng cho các tab active như sau:

ol.tab li.active {
background: #FFF;
border-bottom: 1px solid #FFF;
font-weight: bold;
padding: 5px 10px;
}

Tiếp theo chúng ta sẽ định dạng cho các link nằm trong thẻ

ol.tab a {
font-weight: bold;
margin: 0;
padding: 5px 10px;
}

Cuối cùng bây giờ chúng ta sẽ định dạng phần chứa nội dung của mỗi tab. Phần này chỉ đơn giản là chúng ta định dạng cho thẻ

chứa nội dung.

div#content {
border: 1px solid #D3DDED;
border-top: none;
padding: 10px;
}

Và bây giờ các bạn mở file .html bằng một trình duyệt nào đó và ngắm nhìn kết quả của mình. Các bạn thấy đấy menu dạng tab đâu có quá phức tạp đúng không các bạn? các bạn có thể tải toàn bộ ví dụ tại đây.

In
Nguồn tin: thietkeweb.ttv.vn
Tin cùng loại