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

Điểm 4.6/5 dựa vào 87 đánh giá

(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

Loading...

34 nhận xét

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

    Trả lờiXóa
  2. 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 .

    Trả lờiXóa
  3. Code ko hoạt động, Submenu ko hiện!

    Trả lờiXóa
  4. 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.

    Trả lờiXóa
  5. 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

    Trả lờiXóa
  6. Sao menu con nó chạy mãi lên trên header vậy trời lacdau

    Trả lờiXóa
  7. sao em làm như vậy mà menu con cũng chạy ngược lên trên,,,roile

    Trả lờiXóa
  8. 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.

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

    Trả lờiXóa
  10. 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

    Trả lờiXóa
  11. @ 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é

    Trả lờiXóa
  12. 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é

    Trả lờiXóa
  13. @ 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.

    Trả lờiXóa
  14. 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?

    Trả lờiXóa
  15. @ 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!

    Trả lờiXóa
  16. hix anh ơi có phải tạo trang riêng cho từng menu không anh

    Trả lờiXóa
  17. @ 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

    Trả lờiXóa
  18. 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.

    Trả lờiXóa
  19. 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

    Trả lờiXóa
  20. @ 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.

    Trả lờiXóa
  21. @ 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ể.

    Trả lờiXóa
  22. 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

    Trả lờiXóa
  23. 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 !!!

    Trả lờiXóa
  24. 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 !!!

    Trả lờiXóa
  25. 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.

    Trả lờiXóa
  26. 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

    Trả lờiXóa
  27. anh o meu muon an bai viet o trang chu ta thay blog1 thanh gi vay anh chi em voi

    Trả lờiXóa
  28. @ 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.

    Trả lờiXóa
  29. anh ơi sao vân~ không Đươc, vâỵ

    Trả lờiXóa
  30. 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

    Trả lờiXóa
  31. 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/

    Trả lờiXóa
  32. 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

    Trả lờiXóa