RSS Posts 
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.
5/09
sorry diễn tả không rõ. Ví dụ hàng menu có 1-2-3-4. Mỗi lần mở blog nó mặc định là 1 vậy nều tôi đang ở 2 tôi click 1 nó quay về trang 1 ?
5/09
tab contact của bạn làm thế nào ? có thể hướng dẫn được ? Thanks
5/09
tab contact mình có bài viết hướng dẫn đó bạn, bạn vào đây để xem http://fandung.blogspot.com/2009/05/tao-form-lien-he-voi-kontactrcom.html
Chúc bạn thành công.
5/09
đã test mà hẻm dc :-s
6/09
Nến bạn không thực hiện đuợc menu này, có thể tham khảo bài viết này
http://fandung.blogspot.com/2009/03/code-tao-menu-thanh-menu-ngang.html
7/09
lam sao de co dc link anh vay
7/09
à, bạn download gói hình ảnh của mình về, rồi chọn style mà bạn thích, sau đó upload nó lên để lấy linkk
7/09
bên dưới lên trên là cái gì hả anh ?
em không thể hiểu được câu này
7/09
mà anh ơi em điền code thì ở trên cùng nó lại tạo ra dòng chữ code trèn bên dưới lên trên
]]>...
7/09
@ngan ling : bên dưới tức là đọan code ở dưới anh đưa đó, còn lên trên là chèn đọan code đó vào trước dòng code ]]></b:skin>
7/09
nhung dien link cho menu con o dau vay
7/10
Chào anh, muốn làm menu ngang như của anh thì làm như thế nào, anh chỉ được không.
Cám ơn anh trước, yahoo là: haiha10sb2000@yahoo.com
8/10
Hình như file bị die rùi bạn...có cái dự phòng nào hok
3/11
bạn cho mình hỏi : mình làm theo đúng cách của bạn thì menu hiện ra có 3 nhược điểm
cái nhất : căn chỉnh giữa menu con và chính không thẳng hàng với nhau
cái hai : màu sắc của menu con mặc định là màu cam , và mình không tài nào thay đổi đc cho phù hợp
cái cuối cùng là : menu con hiện ra khi chưa thực hiện thao tác trỏ chuột vào menu chính : tức nghĩa là nó có như thế nào thì nó hiện ra vậy. mong bạn chỉ dẫn cho mình cụ thể hơn , mình muốn khi nào con trỏ chuột chỉ vào menu chính thì menu con mới hiện ra vậy ! cảm ơn
2/13
Admin kiểm tra dùm mình liên kết này nha : "http://data.fandung.com/js/dropdown2.js"
Liên kết không tồn tại. Admin có thể fix lại hoặc gửi qua email cho mình 1 bản với
Email: thiensu2025@gmail.com
Cám ơn nhiều
3/14
fsfd
5/18
hiệu ứng thay đổi thanh menu nằm ngang có sổ dọc khá đơn giản
https://homedy.com/dat-nen-du-an-quan-cau-giay-ha-noi
https://homedy.com/ban-dat-nen-du-an-tp-ho-chi-minh
https://homedy.com/ban-dat-nen-du-an-quan-3-tp-ho-chi-minh
https://homedy.com/ban-dat-nen-du-an-quan-5-tp-ho-chi-minh
» Nội dung phải liên quan tới chủ đề bài viết.
»
[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]
» Có thể sử dụng các thẻ <b>,<i>,<a>.
BlOg FD chính thức đóng comment của khách ẩn danh.
BlOg FD.