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.
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 ?
Trả lờiXóatab contact của bạn làm thế nào ? có thể hướng dẫn được ? Thanks
Trả lờiXóatab 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
Trả lờiXóaChúc bạn thành công.
đã test mà hẻm dc :-s
Trả lờiXóaNế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
Trả lờiXóahttp://fandung.blogspot.com/2009/03/code-tao-menu-thanh-menu-ngang.html
lam sao de co dc link anh vay
Trả lờiXóaà, 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
Trả lờiXóabên dưới lên trên là cái gì hả anh ?
Trả lờiXóaem không thể hiểu được câu này
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
Trả lờiXóa]]>...
@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>
Trả lờiXóanhung dien link cho menu con o dau vay
Trả lờiXóaChào anh, muốn làm menu ngang như của anh thì làm như thế nào, anh chỉ được không.
Trả lờiXóaCám ơn anh trước, yahoo là: haiha10sb2000@yahoo.com
Hình như file bị die rùi bạn...có cái dự phòng nào hok
Trả lờiXóabạ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
Trả lờiXóacá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
Admin kiểm tra dùm mình liên kết này nha : "http://data.fandung.com/js/dropdown2.js"
Trả lờiXóaLiê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
fsfd
Trả lờiXóahiệu ứng thay đổi thanh menu nằm ngang có sổ dọc khá đơn giản
Trả lờiXóahttps://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