Wednesday, June 3, 2009

CSS menu liDock - Một dạng menu Dock

CSS menu liDock
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://fandung.110mb.com/test/CSSmenu-liDock.html

Hì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!


CSS menu liDock - Một dạng menu DockSocialTwist Tell-a-Friend


Đang tải xin vui lòng chờ...

/

Chuyên mục

Tool box

Liên kết

Trao đổi Liên kết
Loading Logos...
Bookmark and Share
 

Copyright 2009 All Rights Reserved iupro theme by Dang Quang Hien