CSS menu liDock - Một dạng menu Dock
Thứ Năm, 21 tháng 5, 2009
CSS menu liDock[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.
- Tiện ích Top Commentators cho blogspot
- Chèn link Google Search vào footer của bài viết
- SlideTab Recent posts (jQuery)
- [Update] Tạo Menu Thanh menu ngang có sổ dọc xuống
- Ngẫu hứng Blogger (3)
- Ngẫu hứng Blogger (2)
- Bạn biết gì về Blogspot, hãy chia sẻ cùng tôi.
- Blogger chính thức add avatar vào comment feed
- Thêm Reactions vào bài viết của blogspot
- Share 3 template bloger đẹp cho anh em
- 12 cách giảm thời gian load trang cho bloger
- Blogger Templates Vector Responsive
Comments[ 0 ]
Đăng nhận xét