Menu nằm ngang - Hiệu ứng sổ menu con kiểu 1 hàng ngang (Mootools effect)
Thứ Sáu, 8 tháng 5, 2009
[FD's BlOg] - Bài viết hôm nay mình xin được giới thiệu một style khác trong menu dạng phân cấp. Đó là menu sổ 1 hàng ngang, kèm theo hiệu ứng đóng mở menu con khi click chuột.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.
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ó:
/* ----------- 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:
<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.
Comments[ 0 ]
Đăng nhận xét