Trong chúng ta tôi dám chắc rằng
không còn ít người học thiết kế website 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;
}
0 nhận xét:
Đăng nhận xét