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

Posted by chiasedamme on Sunday, October 17, 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.

{ 0 comments... read them below or add one }

Post a Comment