Menu nằm ngang với hiệu ứng thay đổi ảnh
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://fandung.110mb.com/JS-files/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!
Đang tải xin vui lòng chờ...
0 comments:
Post a Comment
[▼/▲] Chèn biểu tượng vui