Menu nằm ngang với hiệu ứng thay đổi ảnh
[FD's BlOg] - Bài viết trước mình có giới thiệu cách tạo menu nằm ngang có sổ dọc với hiệu ứng thay đổi màu nên. Hôm nay mình xin giới thiệu 1 style khác, đó là hiệu ứng dùng hình ảnh. Bài này mình sẽ giới thiệu 11 style khác nhau cho các bạn lựa chọn.☼Các bước chuẩn bị:
- Đầu tiên các bạn download file này về: CSSMenu.zip
- Sau đó giải nén ra, ta sẽ thấy 22 file ảnh, có tên tương ứng từ A --> K (mỗi lọai 2 file), và 1 file menus.htm .
- Các bạn có thể mở file menus.htm để xem offline các bản demo của các style, rồi lựa chọn style mình thích. (xem hình bên dưới)
- Các style được đặt tên theo thứ tự, từ A đến K, khi bạn đã lựa chọn được file nào thì copy 2 file hình của style tương ứng, và up lên host để lấy link.
- Ví dụ ở đây mình chọn style E, khi đó mình sẽ chọn 2 file ảnh :tableftE.gif và tabrightE.gif để up lên host.
☼Bây giờ ta bắt đầu tạo menu chính:
1. Đăng nhập blog
2. Vào Bố cục(layout)
3. Vào chỉnh sửa CodeHTML
4. Chèn đọan code CSS bên dưới lên trên dòng ]]></b:skin>
#tabsE {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;
}
#tabsE ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsE li {
display:inline;
margin:0;
padding:0;
}
#tabsE a {
float:left;
background:url("LINK OF tableftE.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsE a span {
float:left;
display:block;
background:url("LINK OF tabrightE.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsE a span {float:none;}
/* End IE5-Mac hack */
#tabsE a:hover span {
color:#FFF;
}
#tabsE a:hover {
background-position:0% -42px;
}
#tabsE a:hover span {
background-position:100% -42px;
}
Chú ý: thay code màu xanh bằng link hình mà bạn đã up, nhớ fải đúng thứ tự các file.
- Và 1 điều lưu ý nữa là : khi bạn thay đổi ảnh (tức là không sử dụng những hình ảnh mình đưa) thì bạn phải chỉnh code màu cam cho phù hợp với ảnh của bạn. Ở đây 42px chính là 1/2 chiều cao của ảnh.
5. Save template lại.
6. Tiếp tục vào Bố cục
7. Tạo một Widget HTML/Javascript.
8. Chèn đọan code bên dưới vào :
<div id="tabsE">
<ul>
<li><a href="#" title="Link 1"><span>Link 1</span></a></li>
<li><a href="#" title="Link 2"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3"><span>Link 3</span></a></li>
<li><a href="#" title="Link 4"><span>Link 4</span></a></li>
</ul>
</div>
Chú ý:
- Thay href="#" thành href="URL Liên kết"
- Thay code màu đỏ bằng thành tên menu của bạn.
- Thay Code màu xanh là mô tả menu.
Như vậy ta đã thực hiện xong 1 menu nằm ngang dùng hiệu ứng thay đổi ảnh.
☼ Tạo thêm menu con cho menu chính với hiệu ứng sổ dọc.
- Đầu tiên để có hiệu ứng sổ dọc xuống bạn phải chèn đọan file javascript ngay sau dòng lệnh <head>
1. Vào Bố cục - Chỉnh sửa code HTML - và dán đọan code bên dưới vào ngay bên dưới thẻ <head>
<script src='http://data.fandung.com/js/dropdown2.js' type='text/javascript'/>
2. Khoan save template lại, tiếp tục chèn đọan code CSS của menu con lên trên dòng ]]></b:skin>
.submenu {
background:#F57900;
margin-top:1px;
padding:1px;
color: #fff;;
margin: 1 1px;
padding: 5px 10px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
border-top:1px #fff solid;
cursor:pointer;
}
3. Save template lại.
4. Và bây giờ bắt đầu tạo menu hòan chỉnh (ở đây mình chỉ ví dụ cho 2 menu chính và 2 menu con cho nó gọn, còn muốn nhiều hơn thì các bạn cứ thêm vào).
- Bây giờ tạo 1 widget HTML/JavaScript và dán code bên dưới vào:
<script type="text/javascript">
function otab()
{
document.write('<table border="0" bordercolor="#999" style="background-color: #FFF" cellspacing="0" cellpadding="0">');
}
function submn(submn_label,submn_text)
{
document.write('<tr><td onmouseover="this.style.background=\'#039\'" onmouseout="this.style.background=\'#F57900\'" class="submenu" onclick="window.location.href=\'http://YOURBLOG.blogspot.com/search/label/'+submn_label+'\'">'+submn_text+'</td></tr>');
}
function ctab(){
document.write('<\/table>');
}
function otab(child_id)
{
document.write('<table id="' + child_id +'" border="0" bordercolor="#999" style="background-color: #FFF" cellspacing="0" cellpadding="0">');
}
</script>
<div id="tabsE">
<ul>
<li><a id="sub1" href="#" title="Link 1"><span>Link 1</span></a></li>
<li><a id="sub2" href="#" title="Link 2"><span>Link 2</span></a></li>
</ul>
</div>
<script type="text/javascript">
otab("sub1_child");
submn('Label1','Label1');
submn('Label2','Label2');
ctab();
at_attach("sub1", "sub1_child", "hover", "y", "pointer");
otab("sub2_child");
submn('Label3','Label3');
submn('Label4','Label4');
ctab();
at_attach("sub2", "sub2_child", "hover", "y", "pointer");
</script>
☼Giải thích 1 chút về code:
- Các code màu tím của menu chính và con phải hòan tòan giống nhau.
- Các code màu xanh chính là các Nhãn trong của blog bạn mà bạn muốn hiển thị trên trên menu.
- Thay dòng YOURBLOG.blogspot.com thành blog của bạn
- onmouseover="this.style.background='#039'" : code màu đỏ chính là màu hiển thị khi bạn rê chuột lên 1 menu con.
- onmouseout="this.style.background='#F57900'" : code màu đỏ là khi ta không rê chuột vào 1 menu con.
- Hãy thay đổi các code màu đó theo ý bạn.
5. Save lại, như vậy đã xong.
Chúc các bạn thành công.