RSS Posts 
[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.
Món này anh tìm mãi mà không ra đó FD à, thank em nhiều nhiều.
À, anh là dân mù tin học đó em, có gì hướng dẫn anh với nhé.
Nếu anh không nhầm đây là dang menu tabs menu mouseover đúng không?
:D
Đúng rồi anh, đây là dạng menu tabs mouseover, đây là 1 trong những serie thủ thuật về mootools. Trong 1 lần em tìm được nó trên mạng và thấy nó có nhiều ứng dụng trong việc thiết kế web nên em đem vô blog xài thử. Có vài cái thủ thuật về mootools không chạy được nên em ko post.
Mootools cũng là một trong các ứng dụng của javascript, nó và jquery tương tự nhau, 1 dạng thư viện script có thể chạy nhiều ứng dụng từ nó.
Submenu của "Web Design" & "FanDung" hiển thị không đẹp. Cụ thể là nó luôn căn về bên trái nên rất xa menu chính, gây khó khăn cho người sử dụng. Anh Dũng nên xem lại chỗ này và có cải tiến thích hợp. Thanks!
thanks
Dòng "]]>" ở đâu vậy bạn
Chào fandung
Anh có làm thử cái menu này ở blog http://hatcafe.blogspot.com.
Nhưng menu chỉ hiển thị tốt trên ie còn trên chrome và ff thì có một đường phân cách giữa navitagion và sublink. Em xem có thể giúp anh fix lỗi này được kg?
Ko làm được, ko lưu được template khi chèn code javascript
FD có thể chỉ cho mình làm menu sổ ngang y chang FD được không, chỉ cho mình cách thay đổi màu thanh menu, thêm các ID và menu con, gửi cho mình file Javascript vào địa chỉ mail ppbinhan@gmail.com nhé.
Thank.
Chúc Blog FD ngày càng phát triển.
Add liên kết của mình nữa nhé FD
file java không có sao chạy đây Dũng, xem lại dùm, và cho code java kèm theo nhé.
Gửi admin,
Tình hình là link http://fandung.110mb.com/FD-glassNav/mootools.svn.js không còn tải được. Admin có thể điều chỉnh lại hoặc gửi cho qua email cho mình với thiensu2025@gmail.com. Cám ơn admin nhiều
Nếu chỉ sử dụng CSS thôi thì có tạo được kiểu nằm ngang cho menu con không. Mình không muốn kiểu dropdown mà là inline cho menu con cơ.
» 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.