Home » Thủ thuật blog
CSS menu liDock - Một dạng menu Dock
Thứ Năm, 21 tháng 5, 2009
[FD's BlOg] - Lại một bài viết về thủ thuật tạo các thanh menu cho blog, lần này mình giới thiệu một menu nằm ngang, không có sổ dọc. Với hiệu ứng tương tự menu Dock, nhưng ko có dùng ảnh. Thủ thuật sử dụng sử dụng trực tiếp hiệu ứng vào thẻ <li> nên có tên là liDock.
Xem demo trực tiếp ở đây: http://data.fandung.com/blog/html/dock-menu.htmHình minh họa:

Do việc sử dụng hiệu ứng lên các thẻ <li> 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.
☼ Bây giờ ta bắt đầu thủ thuật:
1. Đăng nhập blog
2. Vào bố cục (layout)
3. Vào chỉnh sửa code HTML
4. Chèn đọan code CSS bên dưới vào trước dòng code ]]></b:skin>
/* 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;
}
- 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
5. Save template.
6. Tạo một widget HTML/Javascript, rồi chèn code HTML bên dưới vào.
<ul id="navlist">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</ul>
7. Save widget.
Chúc các bạn thành công.

- Cài đặt theo dõi Google analytics cho blogspot
- Cách tạo khung Form đăng nhập cho blogspot
- Thêm chia sẻ Like và share bài viết cho blogspot [trên trang itviet360]
- Thêm nút theo dõi (Follow) cho blogspot
- Feedburner Google và cách lấy tùy chỉnh cho blogspot
- Tiện ích Popular Posts - Bài xem nhiều với CSS3
- Mạng xã hội theo dõi với hiệu ứng rê chuột cho blogspot
- Mudim - Thêm bộ gõ tiếng Việt cho blogspot
- Hiệu ứng màu chạy lấp lánh trong chữ cho blogspot
- Thủ thuật thêm "comment mới gần đây nhất" cho blogspot
- Template dịch vụ, công ty giới thiệu cho blogspot
- Thủ thuật tạo khung liên kết thanh cuộn cho blogspot
Comments[ 0 ]
Đăng nhận xét