Menu dạng tab - Phần I.

Trong chúng ta tôi giám chắc rằng không còn ít người vẫn còn mặc cảm với những menu dạng tab, không phải vì nó xấu mà luôn nghĩ rằng làm nó khó và cấu trúc của nó rất phức tạp. Chính bản thân tôi trước đây cũng như vậy. Nhưng thực ra có phải như vậy không? để trả lời câu hỏi đó bây giờ chúng ta cùng nhau thử Style cho một kiểu tab đơn giản để xem nó có thực sự khó như chúng ta vẫn thường nghĩ không?.

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ẻ <ol> để 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ẻ <ul>, <ol>, <dl>. Nhưng tại sao tôi lại dùng thẻ <ol>, 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

<ol class=”tab”>
<li class=”active”>Trang chủ</li>
<a href=”gioithieu.html” title=”Giới thiệu”>Giới thiệu</a>
<a href=”sanpham.html” title=”Sản phẩm”>Sản phẩm</a>
<a href=”tintuc.html” title=”Tin tức”>Tin tức</a>

<a href=”lienhe.html” title=”Liên hệ”>Liên hệ</a>
</ol>

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;
}

ol.tab li {
background: #F2F5FA;
border: 1px solid #D3DDED;
display: inline; /* các thẻ li ở trên một dòng */
margin-right: 5px;
padding: 0;
}

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 <ol>

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ẻ <div> 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.