1 CSS menu liDock -(menu Dock) Wed Feb 24, 2010 6:03 pm
mr.winni
Thành Viên Tiêu Biểu
demo:
[You must be registered and logged in to see this image.]
[You must be registered and logged in to see this image.]
Chèn vào CSS đoạn code bên đưới:Do việc sử dụng hiệu ứng lên các thẻnên các menu đều đồng nhất với nhau, tức là có kích thước bằng nhau. Vì vậy muốn hiển thị cho đẹp, các bạn nên cân chỉnh kích thước của các menu cho phù hợp.
- Code:
/* liDock CSS */
ul#navlist {
display: inline;
list-style: none;
}
ul#navlist li {
float: left;
width: 60px;
height:24px;
}
ul#navlist li a {
text-decoration: none;
width: 50px;
height:20px;
padding:5px;
font-size:7pt;
font-family:arial;
text-align:center;
line-height:20px;
border-top: 5px solid #fff;
border-bottom: 5px solid #fff;
border-right:1px solid #fff;
border-left:1px solid #fff;
background: #003663;
display:block;
color:#fff;
}
ul#navlist li a:hover {
border-top: 5px solid #004a80;
border-bottom: 5px solid #004a80;
background:#004a80;
font-size:9pt;
font-weight:bold;
}
Tạo một widget HTML/Javascript, rồi chèn code HTML bên dưới vào.- Lưu ý :
+ width: 60px; , height:24px; : kích thước của mỗi menu khi rê chuột
+ width: 50px; , height:20px; : khíc thước mỗi menu lúc bình thường
+ line-height:20px; và height:20px; 2 code này phải có trị số bằng nhau.
+ background: #003663; : màu nền của menu lúc bình thường
+ background:#004a80; : màu nền của menu khi rê chuột vào
- Code:
[list]
[*][url=http://vnskin.forumvi.com/#]Menu 1[/url]
[*][url=http://vnskin.forumvi.com/#]Menu 2[/url]
[*][url=http://vnskin.forumvi.com/#]Menu 3[/url]
[*][url=http://vnskin.forumvi.com/#]Menu 4[/url]
[*][url=http://vnskin.forumvi.com/#]Menu 5[/url]
[/list]
Được sửa bởi mr.winni ngày Fri Feb 26, 2010 8:59 pm; sửa lần 1.