"Tạo menu sổ xuống với hiệu ứng trượt ngang bằng Jquery"

(Traidatmui.com) – Vô tình mình thấy được một style menu trên trang ebank.vtc.vn, menu với hiệu ứng trượt khá đẹp mắt. Và mình thấy nó có thể ứng dụng cho blogger nên hôm nay xin chia sẻ đến các bạn thủ thuật này. Thủ thuật này sử dụng Jquery làm cho phần submenu trượt khá mượt khi bạn rê chuột vào menu chính. Bạn có thể ứng dụng menu này cho blog của mình bằng cách thực hiện một vài bước bên dưới.

1. Đăng nhập vào Blogspot
2. Vào thiết kế (Design) và chọn chỉnh sửa HTML
3. Chèn code bên dưới vào sau thẻ <head>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/Jquery1.3.2.js"></script>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/smartmenu.js"></script>

4. Bạn chèn tiếp code sau vào trước thẻ ]]></b:skin>
.smrtmenu{
background: url(http://lh5.ggpht.com/_BTztXRwC9ik/TOHRzzQQTPI/AAAAAAAAE28/KweTFMdi_yI/bg_menu.gif) repeat-x; /*nền của menu*/
height: 31px; /*chiều cao menu*/
width:600px; /*độ rộng menu*/
}

.smartmenu li ul {
display: none;
padding:0px;
}
.smartmenu ul, .smartmenufloaty ul {
margin: 0px;
padding: 0px;
list-style: none;
}
.smartmenu ul li a {
font-family:Arial;
padding: 5px 10px 5px 10px;
float: left;
font-weight:bold;
color: #FFF; /*màu text menu chính*/
background:url(http://lh6.ggpht.com/_BTztXRwC9ik/TOHRzyrt5LI/AAAAAAAAE3I/xHZt_QqoqCg/line.gif) no-repeat right;}

.smartmenufloaty {
position: absolute;
border: none;
width: auto;
height: auto;
left: 0px;
top: 0px;
z-index: 1000;
}

.smartmenufloaty .tip {
background: url(http://lh3.ggpht.com/_BTztXRwC9ik/TOHRz_iWdcI/AAAAAAAAE3E/cho804P59SE/floatytip.gif) no-repeat;
height: 10px;
width: 50px;
margin-top: -5px;
overflow: hidden;
}

.smartmenufloaty li {
background: url(http://lh5.ggpht.com/_BTztXRwC9ik/TOHRz2ioAeI/AAAAAAAAE3A/MoNJA5-wJX0/floatybg.gif);
border-bottom: 1px dotted #fff;
padding: 1px 8px 1px 8px;

}
.smartmenufloaty li.last {
border: none;
}
.smartmenufloaty a {
font-family:Arial;
font-size: 13px;
text-decoration: none;
line-height: 20px;
color:#fff; /*màu text submenu*/
}

.smartmenufloaty a:hover {
color: #0000ff; /*màu text submenu khi rê chuột*/
}

5. Bây giờ bạn save template lại và trở về phần tử trang
6. Thêm 1 HTML/Javascript và thêm vào HTML/Javascript code bên dưới
<div class="smrtmenu"><div id="navigation" class="smartmenu">
<ul>
<li><a href="URL home">Home</a></li>
<li><a href="URL menu 1">Menu 1</a>
<ul>
<li><a href="URL submenu 1.1">Submenu 1.1</a></li>
<li><a href="URL submenu 1.2">Submenu 1.2</a></li>
</ul></li>

<li><a href="URL menu 2" target="_blank">Menu 2</a>
<ul>
<li><a href="URL menu 2.1">Submenu 2.1</a> </li>
<li><a href="URL menu 2.2">Submenu 2.2</a> </li>
<li><a href="URL menu 2.3">Submenu 2.3</a> </li>
<li><a href="URL menu 2.4">Submenu 2.4</a> </li>
<li><a href="URL menu 2.5">Submenu 2.5</a> </li>
</ul></li>

<li><a href="URL menu 3" target="_blank">Menu 3</a>
<ul>
<li><a href="URL menu 3.1">Submenu 3.1</a> </li>
<li><a href="URL menu 3.2">Submenu 3.2</a> </li>
<li><a href="URL menu 3.3">Submenu 3.3</a> </li>
<li><a href="URL menu 3.4">Submenu 3.4</a> </li>
<li><a href="URL menu 3.5">Submenu 3.5</a> </li>
</ul></li>

<li><a href="URL menu 4" target="_blank">Menu 4</a>
<ul>
<li><a href="URL menu 4.1">Submenu 4.1</a> </li>
<li><a href="URL menu 4.2">Submenu 4.2</a> </li>
<li><a href="URL menu 4.3">Submenu 4.3</a> </li>
<li><a href="URL menu 4.4">Submenu 4.4</a> </li>
<li><a href="URL menu 4.5">Submenu 4.5</a> </li>
</ul></li>

<li><a href="URL menu 5" target="_blank">Menu 5</a>
<ul>
<li><a href="URL menu 5.1">Submenu 5.1</a> </li>
<li><a href="URL menu 5.2">Submenu 5.2</a> </li>
<li><a href="URL menu 5.3">Submenu 5.3</a> </li>
<li><a href="URL menu 5.4">Submenu 5.4</a> </li>
<li><a href="URL menu 5.5">Submenu 5.5</a> </li>
</ul></li>

<li><a href="URL menu 6">Menu 6</a></li>

</ul>
</div>
</div>

<script type="text/javascript">
jQuery(window).ready(function(){
jQuery("#navigation").Smartmenu({animationDuration: 250});
});
</script>

☼ Chỉnh code:
- Các dòng màu xanh đậm trong code là phần hiển thị trên menu, bạn hãy thay thành tên của các menu chính và menu con tương ứng.
- Dòng màu đỏ đậm chính là các link của các menu chính và menu con, bạn hãy thay thành link tương ứng với từng menu chính và các menu con.

7. Sau khi chỉnh sửa xong bạn save tiện ích lại

Ở trên mình chỉ có 6 menu chính nếu bạn muốn thêm nhiều menu hơn thì bạn chỉ việc thêm code như bên dưới vào sau menu 6 như bên dưới
<li><a href="URL menu 6">Menu 6</a></li>

<li><a href="URL menu 7">Menu 7</a></li>
<li><a href="URL menu 8">Menu 8</a></li>


Nếu muốn thêm menu con cho menu nào đó bạn làm như sau, ví dụ chúng ta sẽ tạo thêm menu con cho menu 6 ở trên.
<li><a href="URL menu 6" target="_blank">Menu 6</a>
<ul>
<li><a href="URL menu 6.1">Submenu 6.1</a> </li>
<li><a href="URL menu 6.2">Submenu 6.2</a> </li>

</ul></li>

Bạn muốn thêm nhiều menu con trong menu 6 trên, bạn chỉ việc thêm dòng code tương tự bên dưới vào sau submenu 6.2 ở trên.
<li><a href="URL menu 6.3">Submenu 6.3</a> </li>

Chúc bạn thành công

Xem khác cùng chủ đề

34 nhận xét | Viết lời bình

11/16/2010 03:42:00 CH Trả lời

menu này nom lại quá, phải marks ngay mới dc

11/26/2010 04:48:00 SA Trả lời

bài viết quá hay . bữa giờ mình làm theo bên fan dũng mà ko dc . bên đó file js die hết rùi . tốn công quá . thật may mắn tìm dc trang traidatmui.com thanks các bạn nhiều lắm .

4/09/2011 08:06:00 SA Trả lời

Code ko hoạt động, Submenu ko hiện!

Admin
4/09/2011 09:42:00 SA Trả lời

Code vẫn hoạt động bình thường bạn ah,có thể nó bị xung đột code JS nào đó trong blog bạn.

5/01/2011 05:30:00 SA Trả lời

bài này thật đó, mình đã làm đc rồi, mình làm theo Fandung hoài mà ko đc, cám ơn Traidatmui

5/01/2011 06:04:00 SA Trả lời

Chúc mừng bạn nhé.;))

8/22/2011 04:28:00 SA Trả lời

Sao menu con nó chạy mãi lên trên header vậy trời lacdau

10/07/2011 09:20:00 CH Trả lời

sao em làm như vậy mà menu con cũng chạy ngược lên trên,,,roile

10/08/2011 02:56:00 SA Trả lời

anh ơi em muốn cho vào lệnh menu của anh gắn vào lệnh làm thế nào vậy? vì blogspot của em không có tiện ích HTML/Javascript anh giúp em với cảm ơn anh nhiều.

Admin
10/08/2011 07:43:00 SA Trả lời

@ binhminhcoem: Em có thể tham khảo cách thêm tiện ích trong Blogspot tại đây nhe

10/08/2011 09:23:00 SA Trả lời

còn cái của em menu con nó ngược lên trên thì phải làm sao vậy anh,giúp em với roile

Admin
10/08/2011 11:29:00 SA Trả lời

@ vulang086: Có thể do một số lệnh trong template blog bạn chi phối đến menu này, ở template mình đã test thì rất OK, để mình test lại ở những mẫu của blogger và trả lời bạn sau nhé

10/09/2011 09:06:00 CH Trả lời

anh ơi em hỏi blog Của em không có dòng thêm tiện ích. em muốn làm thêm tiện ích thì làm thế nào hả anh giúp em với em rất thích cái thanh menu của anh đó.em muốn lệnh như trang này http://dunghennessy.blogspot.com/2011/08/menu-ngang-xo-doc-xuong-nhieu-cap-kieu.html anh gip em nhé

Admin
10/09/2011 09:21:00 CH Trả lời

@ binhminhcoem: Em có thể tham khảo cách mở tính năng thêm tiện ích (Add a Gadget) tại đây nhe.

10/11/2011 08:50:00 CH Trả lời

cảm ơn anh nhé em đã làm được menu của anh dùi. nhưng khi em đang bài lên thi trang nào cũng giống nhau. em muốn đang bài theo tưng menu 1 thì làm thế nao vậy anh giúp em với. em muốn trang chủ không hiện bài viết chỉ trang chí thì làm thế nao vậy anh?

Admin
10/11/2011 09:23:00 CH Trả lời

@ binhminhcoem: Khi em đăng bài, những bài viết có cùng một chủ đề thì em cho vào cùng một nhãn (label) sau đó lấy link của nhãn đó đưa vào menu nhé.

Còn em muốn ẩn bài viết ở trang chủ thì em thêm code bên dưới vào trước thẻ </head>

<b:if cond='data:blog.url == data:blog.homepageUrl'>#Blog1 {display:none;}</b:if>

Chào em!

10/11/2011 11:27:00 CH Trả lời

hix anh ơi có phải tạo trang riêng cho từng menu không anh

Admin
10/12/2011 12:27:00 SA Trả lời

@ binhminhcoem: Có nhiều cách để em lấy link đưa vào menu, nếu em có thể tạo trang riêng cho từng nhãn và lấy link đưa vào menu cũng được, hoặc đơn gian hơn là em lấy link của một nhãn (chứa các bài viết cùng chủ đề) và đưa vào URL menu. Tức là em phân loại cho các bài viết trên blog của em

Link nhãn thường có dạng http://www.traidatmui.com/search/label/Advanced blogger

10/12/2011 08:46:00 CH Trả lời

Các menu đa số dùng JS, nên về cơ bản mình thử và chọn lựa những menu mà tốc độ loafd nó nhanh và ổn định.

10/12/2011 08:58:00 CH Trả lời

anh ơi em hỏi chút tại sao em chèn hiệu ứng tuyết rơi vào bolog thi menu lại không sổ xuống được vậy anh giúp em với

Admin
10/12/2011 09:29:00 CH Trả lời

@ binhminhcoem: Nếu em dùng tuyết rơi bằng JQuery thì nên giữ lại 1 jquery.min trong template hoặc em sử dụng tuyết rơi tại đây có thể tránh được việc xung đột.

Admin
10/12/2011 09:33:00 CH Trả lời

@ Blogger: Hiện nay có rất nhiều thủ thuật tạo menu được các Blogger giới thiệu, có đơn giản, có phức tạp. Tuy nhiên xu hướng chọn ưu tiên vẫn là không làm giảm tốc độ load trang hoặc ảnh hưởng không đáng kể.

10/13/2011 01:27:00 SA Trả lời

anh ơi em làm thế này sao không được vầy anh vn htt://hoangtugia.blogspot.com/menu 1/submenu 1.1 blogspot
ở đây menu 1 la menu chính còn submenu 1.1 là nhãn của bài viết em làm thế đã đúng chưa anh. giúp em với cảm ơn anh nhiều

10/13/2011 01:43:00 SA Trả lời

không biết CSS của mình nó xung đột cái Js nào không mà nó ra hết cả toàn bô menu cha lẩn con. Ai rành chuẩn bệnh dùm mình nha !!!

10/13/2011 03:25:00 SA Trả lời

Blog của mình : Suyniemloichua.blogspot.com
các bạn ghé thăm chuẩn bệnh em nó dùm nha, nếu biết thì hướng dẩn mình thêm !!!

10/14/2011 08:34:00 CH Trả lời

anh ơi em muon dung hieu ung sao roi cho toan trang nhu kieu sao roi o trang nay http://thuthuat.clanteam.com/baiviet.php?idbv=4 nhung khi dua no vao thi moi chuc nang cua blog khong su dung duoc vd: nhu menu .....vv anh chi em cach nhe vi em dat thich hieu ung nay heee cam on anh.

10/16/2011 11:08:00 CH Trả lời

anh o em dung phan trang nen ko an duoc bai viet o trang chu anh dup em voi duoc ko anh.cam on anh nhe

10/16/2011 11:15:00 CH Trả lời

anh o meu muon an bai viet o trang chu ta thay blog1 thanh gi vay anh chi em voi

Admin
10/16/2011 11:33:00 CH Trả lời

@ binhminhcoem: Muốn ẩn bài viết ở trang chủ em chèn code bên dưới vào trước thẻ </head>

<style type='text/css'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>#Blog1 {display:none;}</b:if>

</style>

Sau này có comment em vui lòng bỏ dấu tiếng việt dùm anh nhe.

10/17/2011 12:46:00 SA Trả lời

anh ơi sao vân~ không Đươc, vâỵ

10/17/2011 08:57:00 SA Trả lời

anh admin có khi nào trong blog có nhiều file js quá nên có cái không chạy được, tại em chèn cái menu vào blog thì nó không hiện submenu

Admin
10/17/2011 10:59:00 CH Trả lời

@ [Kem] Zageti: Đó cũng tùy script nữa bạn

Nặc danh
11/22/2011 09:02:00 SA Trả lời

bạn cho mình hỏi, mình làm theo như của bạn nhưng một menu bị nhảy xuống và bị mất background xanh xanh luôn. link hình ảnh: http://imageshack.us/photo/my-images/705/menumy.png/

tuấn
2/22/2012 08:32:00 CH Trả lời

Mình muốn làm menu như vậy mà web mình làm bằng joomla có làm được ? ko tìm hoài mà ko thấy thẻ "]]>"
mong admin tư vấn

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang