Chuyện mục về tiện ích menu được nghiên cứu và ứng dụng bởi [FD's BlOg] – và được marketing bởi phattrien▲so.
Đây là menu dạng nằm ngang kèm theo hiệu ứng đóng mở menu con khi click chuột(Tab Menu Mouseover) giống như của vnexpress.net. Trong bài này xin hướng dẫn các bạn thực hiện theo cách của [FD's BlOg] để tạo nó .
Thủ thuật về menu - label với Blogspot:
► Thủ thuật tạo Tag/Label Cloud cho Blogger
Xem trực tiếp demo ở đây : http://fandung.110mb.com/FD-glassNav/index.html
Xem hình minh họa:
Như các menu khác, menu này cũng gồm 3 phần : Code Java, code CSS, và code HTML
Trước tiên bạn download gói hình ảnh này về : FD-img.rar rồi up lên host lấy link để dùng cho code CSS.
Bây giờ ta bắt đầu chèn code java và code CSS vào template:
1. Đăng nhập blog
2. Vào Bố cục(Layout)
3. Vào Chỉnh sửa code HTML (Edit code HTML)
4. Chèn code Javascript vào dưới dòng <head> (hoặc trên dòng </head>)
<script type="text/javascript" src="http://fandung.110mb.com/FD-glassNav/mootools.svn.js"></script>
<script type="text/javascript">
window.addEvent('load', function(){
$('sublinks').getElements('ul').setStyle('display', 'none');
$('s1_m').setStyle('display', 'block');
$$('#mymenu li').each(function(el){
el.getElement('a').addEvent('mouseover', function(subLinkId){
var layer = subLinkId+"_m";
$('sublinks').getElements('ul').setStyle('display', 'none');
$(layer).setStyle('display', 'block');
}.pass( el.id)
);
});
// --------------------------------------- //
// SHOW and HIDE Submenu with animation
var mySlide = new Fx.Slide('sublinks');
$('op1').addEvent('click', function(e){
var textLink = $('op1').innerHTML;
if(textLink=='Hide submenu'){
$('op1').innerHTML='Display submenu';
} else {
$('op1').innerHTML='Hide submenu';
}
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
</script>
- Chú ý: nên down file http://fandung.110mb.com/FD-glassNav/mootools.svn.js về host riêng của mình, để tránh hết bandwidth.
- Download file js tại đây
5. Tiếp tục tìm đến dòng ]]></b:skin> và chèn code CSS bên dưới lên trên nó:
- Chú ý: Thay các link ảnh màu xanh bằng link ảnh của bạn.
/* ----------- NAVIGATION----------- */
#top-navigation{
background:url(img/topnav-bg.gif) repeat-x;
width:auto;
height:48px;
margin:0 auto;
}
#navigation{
background:url(img/nav-bg.gif) repeat-x;
height:32px;
margin:0 auto;
width:auto;
}
#navigation .right_link{
float:right;
font-size:11px;
line-height:32px;
margin:0 10px;
}
#navigation ul{
height:32px;
line-height:32px;
}
#navigation ul li{
display:inline;
}
#navigation ul li a,
#navigation ul li a:visited {
background:url(img/line-a.gif) right no-repeat;
padding:0 20px;
display:block;
text-decoration:none;
float:left;
color:#000000;
font-weight:bold;
}
#navigation ul li a:hover{
color:#FFFFFF;
background:#A5A5A5;
}
/* ----------- SUBLINKS ----------- */
#sublinks{
width:auto;
margin:0 auto;
background:#888888 url(img/sublink.gif);
height:30px;
font-size:11px;
}
#sublinks ul{
height:32px;
line-height:31px;
}
#sublinks ul li{
display:inline;
}
#sublinks ul li a,
#sublinks ul li a:visited {
padding:0 20px;
display:block;
text-decoration:none;
float:left;
color:#FFFFFF;
}
#sublinks ul li a:hover{
text-decoration:underline;
}
6. Save template.
7. Vào phần tử trang, tạo 1 widget HTML/Javascript và dán code HTML bên dưới vào:
- Chú ý : các id=s1, s2, s3, s4 sẽ liên kết theo tứ tự với các id=s1_m, s2_m, s3_m, s4_m, và các id=s1_m, s2_m... là các Sub Menu
<div id="navigation">
<a href="#" class="right_link" id="op1">Hide submenu</a>
<ul id="mymenu">
<li id="s1"><a href="#">Home</a></li>
<li id="s2"><a href="#">Blog Tips</a></li>
<li id="s3"><a href="#">Web Design</a></li>
<li id="s4"><a href="#">FanDung</a></li>
</ul>
</div>
<div id="sublinks">
<ul id="s1_m">
<li><a href="#">Blog Tips</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Javascript</a></li>
</ul>
<ul id="s2_m">
<li><a href="#">Blogger</a></li>
<li><a href="#">Layout</a></li>
<li><a href="#">Code HTML</a></li>
<li><a href="#">Scrpit</a></li>
</ul>
<ul id="s3_m">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Javacsript</a></li>
</ul>
<ul id="s4_m">
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
8. Save lại. Như vậy đã xong.
Chúc các bạn thành công.
[ theo Fan Dung Blog ]
About Chinhnd
Cái này hay, giống menu của vnExpress.net. :)
ReplyDeleteCông nhận cái này hay nhỉ. Tìm mãi mới được phải copy và phổ biến không nhơ FD xoá đi thì phí phạm lắm.
ReplyDeletesao em lại nỡ xóa nó đi đc chứ ^^
ReplyDeleteAnh oi ! hien gio em da co cai menu roi nhung co cach nao them vao no ma khong lam cai nay khong ha anh ?
ReplyDeleteMa cai nay thi dep qua , em phai lam sao ? anh cho em loi khuyen voi nhe :) Thanks anh nhieu !
ReplyDeletenhưng cái menu cha cách xa cái menu con quá.sửa lại code cho nó sát vào nhau đc ko
ReplyDeletecó gì liên lạc vào yh:diangucboy_thienthangirl
ReplyDeletecảm ơn nhiều khi đã sửa xong
Đâu có xa gìđâu, chắc do template cua bạn đặt cái padding thế nào thôi, bạn có thể tham khảo cái này hay hơn http://www.vnpressnet.com/2009/07/tao-tabs-menu-mouse-over-giong.html
ReplyDeleteminh thay link vao kieu gi day? huong dan voi
ReplyDeletekiemtienso1.blogspot.com
Chào mọi nười!
ReplyDeleteMình làm theo bài này. Nhưng kết quả là Active không có tác dụng khi qua trang khác. Cụ thể là nó không giữ trạng thái đã chọn khi qua trang khác mà về mặt định là trang ban đầu