Loading post navigation ...
 
 

Pro page

13
Nhận xét

Menu nằm ngang - Hiệu ứng sổ menu con kiểu 1 hàng ngang (Mootools effect)

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

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


Enter your mail address:

13

Chinhnd

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

Chinhnd

Nếu anh không nhầm đây là dang menu tabs menu mouseover đúng không?

fandung

: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ó.

Khách (ẩn danh)

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!

Khách (ẩn danh)

thanks

njmjkey

Dòng "]]>" ở đâu vậy bạn

Sarge

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?

Linh

Ko làm được, ko lưu được template khi chèn code javascript

Paul Huy Phuong

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.

Fishers Of Men

Add liên kết của mình nữa nhé FD

tueman84

file java không có sao chạy đây Dũng, xem lại dùm, và cho code java kèm theo nhé.

vuatranmac

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

Unknown

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



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

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

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home