Tạo thanh sidebar menu với trạng thái viếng thăm kiểu đánh dấu tick

Trang chủ » Menu » Bạn đang xem:

Tạo thanh sidebar menu với trạng thái viếng thăm kiểu đánh dấu tick

Chủ Nhật, 17 tháng 10, 2010

Có nhiều cách khác nhau để thể hiện sự đặc sắc và nổi bật cho thanh menu sidebar trên website của bạn. Một trong số đó là sidebar với trạng thái liên kết đã viết thăm dạng tick, tức là kiểu đánh dấu tick giống như khi bạn làm bài kiểm tra vậy. Đây cũng là một trong những kiểu menu rất độc đáo, chỉ cần vài thao tác CSS đơn giản là có thể thực hiện kiểu menu sidebar thật tuyệt vời.

Sau đây là đoạn mã cho phần CSS.

#sidebar ul {
list-style-type:none;
padding:3px;
}

#sidebar li a {
display:block;
line-height:150%;
width:239px;
background:url(ticks_grey.gif);
text-decoration:none;
}

#sidebar li a:link, a:active {
color:#666;
}

#sidebar li a:hover {
color:#F33;
background-position: 0 -20px;
}

#sidebar li a:visited {
background-position: 0 -40px;
}

Tải file hình ticks_grey tại đây.

Chú ý: Kiểu sidebar này có thể áp dụng khi thiết kế blog trên Blogger. Bạn chỉ việc dán đoạn mã CSS trên vào trước phần ]]></b:skin> khi chỉnh sửa HTML trong Template.
Copy bài viết: