» » Tạo menu Dropdown Multi-level Lamp Menu bằng JQuery
Người đăng: | 16/05/2011 | 13:46

Tạo menu Dropdown Multi-level Lamp Menu bằng JQuery

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

(Traidatmui.com) – Hôm nay mình chia sẻ cùng các bạn cách để tạo menu Drop Down Multi-Level với hiệu ứng JQuery. Mình cũng đã từng giới thiệu cùng các bạn dạng menu Drop Down Multi-Level, tuy nhiên ở mỗi menu đều có hiệu ứng khác nhau và mang nét đẹp riêng của mỗi menu. Với menu này, chỉ với hiệu ứng lóe sáng đơn giản nhưng không kém hấp dẫn, độc đáo. Khi bạn rê chuột vào các menu thì sẽ thấy một chùm sáng chạy theo và trở về menu home khi bạn không còn rê chuột. Bạn sẽ thấy hiệu ứng này ở DEMO bên dưới.


Hình ảnh minh họa
» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head>
<script src="http://data-traidatmui.appspot.com/scripts/jquery.min.v1.4.1.js" type="text/javascript"></script>
<script src="http://data-traidatmui.appspot.com/scripts/jquery.easing.1.1.js" type="text/javascript"></script>
<script src="http://data-traidatmui.appspot.com/scripts/jquery.lavalamp.0.1.0.js" type="text/javascript"></script>
<script src="http://data-traidatmui.appspot.com/scripts/jquery.lavalamp_menus.js" type="text/javascript"></script>

5. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>
#menu{height:41px; /*chiều cao của menu*/
background:url(https://lh6.googleusercontent.com/_9-sNIAfGhKg/Tah-rYpsNJI/AAAAAAAAAOk/_9j_c8951no/main-bg.png) repeat-x;}
#menu ul {margin:0;padding:0;list-style:none;float:left;}
#menu ul.menu {padding-left:30px;}
#menu li {position:relative;z-index:9;
margin:0;
padding:0 5px 0 0;
display:block;float:left;}
#menu li:hover>ul {left:-2px;}
#menu a {position:relative;z-index:10;
height:41px;
display:block;
float:left;line-height:41px;
text-decoration:none;
font:normal 12px arial;}
#menu a:hover, #menu a:hover span {color:#fff;}
#menu span {
display:block;
cursor:pointer;
background-repeat:no-repeat;
background-position:95% 0;}
#menu ul ul a.parent span {
background:url(https://lh4.googleusercontent.com/_9-sNIAfGhKg/Tah-q4p0CII/AAAAAAAAAOY/6PLMwZFlBNw/item-pointer.gif) no-repeat 95% 8px;}
#menu ul ul a.parent:hover span {
background:url(https://lh6.googleusercontent.com/_9-sNIAfGhKg/Tah-q7QKSOI/AAAAAAAAAOg/LOdZvkst3bI/item-pointer-mover.gif)no-repeat 95% 8px;}
#menu a {padding:0 10px 0 10px;line-height:30px;color:#e5e5e5;}
#menu span {margin-top:5px;}
#menu li{background:url(https://lh3.googleusercontent.com/_9-sNIAfGhKg/Tah-rtGIIFI/AAAAAAAAAOs/AKcEjo5LPGM/main-delimiter.png) 98% 4px no-repeat;}
#menu li.last {background:none;}
#menu ul ul li {background:none;}
#menu ul ul {position:absolute;top:38px;
left:-999em;
width:163px; /*độ rộng của các submenu*/
padding:5px 0 0 0;
background:rgb(45,45,45);
margin-top:1px;}
#menu ul ul a {padding:0 0 0 15px;height:auto;
float:none;
display:block;
line-height:24px;
color:rgb(169,169,169);}
#menu ul ul span {margin-top:0;
padding-right:15px;_
padding-right:20px;
color:rgb(169,169,169);}
#menu ul ul a:hover span {color:#fff;}
#menu ul ul li.last {background:none;}
#menu ul ul li {width:100%;}
#menu ul ul ul {padding:0;
margin:-38px 0 0 163px !important;
margin-left:172px;}
#menu ul ul ul {background:rgb(41,41,41);}
#menu ul ul ul ul {background:rgb(38,38,38);}
#menu ul ul ul ul {background:rgb(35,35,35);}
#menu li.back {background:url(https://lh4.googleusercontent.com/_9-sNIAfGhKg/Tah-rH0DA1I/AAAAAAAAAOo/HxgV8Z4q-ao/lava.png) no-repeat right -44px !important;
background:url(https://lh4.googleusercontent.com/_9-sNIAfGhKg/Tah-q-94SNI/AAAAAAAAAOc/x9MeVvwNvHg/lava.gif);width:13px;height:44px;z-index:8;
position:absolute;
margin:-1px 0 0 -5px;}
#menu li.back .left{background:url(https://lh4.googleusercontent.com/_9-sNIAfGhKg/Tah-rH0DA1I/AAAAAAAAAOo/HxgV8Z4q-ao/lava.png) no-repeat top left !important;background-image:url(https://lh4.googleusercontent.com/_9-sNIAfGhKg/Tah-q-94SNI/AAAAAAAAAOc/x9MeVvwNvHg/lava.gif);
height:44px;
margin-right:8px;}

6. Save template lại và trở về phần tử trang (Page Elements)
7. Thêm 1 HTML/Javascript và thêm vào code bên dưới
<div id="menu"><ul class="menu">
<li><a href="URL link" class="parent"><span>HOME</span></a><ul>
<li><a href="URL link" class="parent"><span>Sub Item 1</span></a><ul>
<li><a href="URL link" class="parent"><span>Sub Item 1.1</span></a><ul>
<li><a href="URL link"><span>Sub Item 1.1.1</span></a></li>
<li><a href="URL link"><span>Sub Item 1.1.2</span></a></li></ul></li>
<li><a href="URL link"><span>Sub Item 1.2</span></a></li>
<li><a href="URL link"><span>Sub Item 1.3</span></a></li>
<li><a href="URL link"><span>Sub Item 1.4</span></a></li>
<li><a href="URL link"><span>Sub Item 1.5</span></a></li>
<li><a href="URL link"><span>Sub Item 1.6</span></a></li>
<li><a href="URL link" class="parent"><span>Sub Item 1.7</span></a><ul>
<li><a href="URL link"><span>Sub Item 1.7.1</span></a></li>
<li><a href="URL link"><span>Sub Item 1.7.2</span></a>
</li></ul></li></ul></li>
<li><a href="URL link"><span>Sub Item 2</span></a></li>
<li><a href="URL link"><span>Sub Item 3</span></a></li></ul></li>
<li><a href="URL link" class="parent"><span>MENU 1</span></a><ul>
<li><a href="URL link" class="parent"><span>Sub Item 1</span></a><ul>
<li><a href="URL link"><span>Sub Item 1.1</span></a></li>
<li><a href="URL link"><span>Sub Item 1.2</span></a></li></ul></li>
<li><a href="URL link" class="parent"><span>Sub Item 2</span></a><ul>
<li><a href="URL link"><span>Sub Item 2.1</span></a></li>
<li><a href="URL link"><span>Sub Item 2.2</span></a></li></ul></li>
<li><a href="URL link"><span>Sub Item 3</span></a></li>
<li><a href="URL link"><span>Sub Item 4</span></a></li>
<li><a href="URL link"><span>Sub Item 5</span></a></li>
<li><a href="URL link"><span>Sub Item 6</span></a></li>
<li><a href="URL link"><span>Sub Item 7</span></a></li></ul></li>
<li><a href="URL link"><span>MENU 2</span></a></li>
<li><a href="URL link"><span>MENU3</span></a></li>
<li><a href="URL link" class="parent"><span>MENU4</span></a><ul>
<li><a href="URL link"><span>Sub Item 1</span></a></li>
<li><a href="URL link"><span>Sub Item 2</span></a></li>
<li><a href="URL link"><span>Sub Item 3</span></a></li>
<li><a href="URL link"><span>Sub Item 4</span></a></li>
<li><a href="URL link"><span>Sub Item 5</span></a></li>
</ul>
</li>
<li class="last"><a href="URL link"><span>MENU5</span></a></li>

</ul></div>

<div id="copyright"><a href="http://apycom.com/"></a></div>

» Chỉnh sửa code:
- Phần màu xanh đậm là tên của các menu chính, bạn thay đổi cho phù hợp với blog của bạn và các (URL link) bạn thay thành link tương ứng với từng menu chính và menu con (Submenu), ví dụ: http://www.traidatmui.com/.
- Phần màu tím là các submenu cấp 1 của các menu chính tương ứng, phần màu cam là submenu cấp 2 và phần màu xanh là submenu cấp 3, bạn thay thành tên của các submenu bạn muốn hiển thị trong menu của bạn.

Để tạo menu con cho các menu chính thì mỗi một cấp bạn sẽ phải cho nó nằm trong thẻ <ul> </ul>

8. Cuối cùng save tiện ích lại là xong

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

Tham khảo apycom

Chuyên mục:

7 nhận xét

  1. Nặc danh5/17/2011 01:18:00 CH

    Rất thích Blog bạn! Ngày nào cũng vào xem có thủ thuật gì mới ko, cảm ơn bạn nhiều lắm. Hy vọng sẽ có thêm nhiều thủ thuật hay hơn nữa cuoilon

    Trả lờiXóa
  2. Công Nghệ Thủ Thuật5/17/2011 01:24:00 CH

    Hi! Cảm ơn bạn rất nhiều, mình sẽ cố gắng để chia sẻ cùng mọi người nhiều điều hữu ích hơn mà mình có thể. Mong được sự ủng hộ từ các bạn! battay

    Trả lờiXóa
  3. Unknown5/30/2011 12:03:00 SA

    giúp em với,em làm như anh nói mà cứ bị lỗi chỉ hiện 1 dòng gồm: Trang chủ,Menu1,menu2,...menu5 thui hà
    Blog của em nè:quyet94slwelcome.blogspot.com

    Trả lờiXóa
  4. Unknown5/31/2011 09:25:00 SA

    có phải là phải tạo nhãn trước rồi dán link vào dúng ko a?

    Trả lờiXóa
  5. Công Nghệ Thủ Thuật6/12/2011 09:00:00 CH

    Link đó không nhất thiết là từ nhãn, bạn có thể lấy link tùy ý bạn ah. Còn việc không hiển thị được các menu con đó có thể do bạn làm nhiều thủ thuật nên code bị xung đột nên bị lỗi

    Trả lờiXóa
  6. Vi Cao10/11/2011 04:34:00 CH

    mình đang cần tạo Menu có 3 cấp. theo hướng dẫn thì làm được rồi nhưng không thấy menu xổ xuống.

    Trả lờiXóa
  7. NGUYEN PHUC7/24/2015 04:21:00 CH

    Bạn ơi bên mình có dịch vụ Đăng tin tự động lên groups trên facebook miễn phí bạn xem qua nhé. miễn phí 100%
    Ngoài ra các bạn có thể đọc tin tức tại Kênh tin tức giải trí yeubao.com
    Các bạn có thể truy cập link sau để xem thông tin công nghệ
    Khoinguoncongnghe.net | kênh thông tin dành cho tín đồ công nghê
    cám ơn bạn đã đọc
    đăng tin tự động trên facebook miễn phí 100% xem tại Đăng tin tự động lên groups trên facebook miễn phí
    xem thủ thuật blogspot, thủ thuật blogger, thủ thuật facebook tại thủ thuật tổng hợp facebook, blogger,coputuer
    xem tin tức giới trẻ, các tin nổi bật tin tức nổi bật, tin sao, tin giới trẻ, đời sống xã hội
    xem thong tin giải trí, cung hoàng đạo, tại bí mật 12 chòm sao,tâm sự,blog tâm sự

    giải trí thư giã relax giải trí thư giãn relax
    khám phá du lịch, bi ẩn khám phá du lịch, bí ẩn
    kho video giải trí khổng lồ video đời sống xã hội, video giải trí
    khởi nguồn công nghệ, xem tin tức công nghệ, tin tức internet
    tin tức internet
    Tin tức itc , tin tức technogoy tin tức ict

    Khám phá công nghệ
    khám phá

    Thủ thuật công nghê thủ thuật công nghệ, tips





    Trả lờiXóa