Menu nằm ngang - Hiệu ứng sổ menu con kiểu 1 hàng ngang (Mootools effect) - Tạp chí thời trang và làm đẹp
vietnamese Tiếng Việt english English
Hôm nay: Chủ nhật, ngày 13 tháng 04 năm 2025
Home »

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;
}

- Chú ý: Thay các link ảnh màu xanh bằng link ảnh của bạn.

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>
- 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

8. Save lại. Như vậy đã xong.

Chúc các bạn thành công.
Tags: , , , ,

Comments[ 0 ]


Đăng nhận xét