Tiện ích Drop down Menu nhiều cấp với JQuery Lavalamp

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

(Traidatmui.com) – Tiếp theo các thủ thuật về menu, hôm nay bài viết này sẽ giúp các bạn tạo môt phong cách menu drop down khác hẵn so với các menu trước mà mình đã từng giới thiệu đến các bạn. menu này cũng là dạng drop down với nhiều menu con, tuy nhiên có thêm hiệu ứng sáng trượt trên menu chính trông cũng khá đẹp.


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/Jlavalamp_dropmenu.js" type="text/javascript"></script>

5. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>
div#menu {height:88px;padding-left:24px;background:url(http://apycom.com/ssc-data/items/3/6b8e23/images/left.png) no-repeat;_background-image:url(http://apycom.com/ssc-data/items/3/6b8e23/images/ie-left.png);width:900px;}div#menu ul {margin:0;padding:0;list-style:none;float:left;}div#menu ul.menu {padding-right:24px;background:url(http://apycom.com/ssc-data/items/3/6b8e23/images/right.png) no-repeat right 0;_background-image:url(http://apycom.com/ssc-data/items/3/6b8e23/images/ie-right.png);}div#menu li {position:relative;margin:0;padding:0 12px 0 0;display:block;float:left;z-index:9;width:194px;}div#menu ul ul li {z-index:9;}div#menu li div {list-style:none;float:left;position:absolute;z-index:11;top:83px;left:0;visibility:hidden;width:194px;padding:0 0 16px 0;background:url(http://apycom.com/ssc-data/items/3/6b8e23/images/submenu-bottom.png) no-repeat 15px bottom;margin:1px 0 0 0;}div#menu li:hover>div {visibility:visible;}div#menu a {position:relative;z-index:10;height:41px;display:block;float:left;line-height:41px;text-decoration:none;margin-top:1px;white-space:nowrap;width:178px;padding-right:5px;text-align:center;}div#menu span {display:block;cursor:pointer;background-repeat:no-repeat;background-position:95% 0;text-align:center;}div#menu a {padding:0 10px 0 0;line-height:75px;height:88px;margin-right:11px;_margin-right:1px;text-transform:uppercase;background:none;}div#menu span {margin-top:5px;padding-left:10px;color:#fff;font:normal 22px 'Trebucher MS', Helvetica, Arial, sans-serif;font-weight:bold;background:none;line-height:75px;}div#menu a:hover {background:url(http://apycom.com/ssc-data/items/3/6b8e23/images/selected-right.png) no-repeat right 23px;}div#menu a:hover span {background:url(http://apycom.com/ssc-data/items/3/6b8e23/images/selected-left.png) no-repeat 0 18px;}div#menu li.current a,div#menu ul.menu>li:hover>a {background:url(http://apycom.com/ssc-data/items/3/6b8e23/images/selected-right.png) no-repeat right 23px;}div#menu li.current a span,div#menu ul.menu>li:hover>a span {background:url(http://apycom.com/ssc-data/items/3/6b8e23/images/selected-left.png) no-repeat 0 18px;}div#menu li {}div#menu li.last {background:none;}div#menu ul ul li {background:none;padding:0;}div#menu ul ul {padding-top:10px;width:194px;background:url(http://apycom.com/ssc-data/items/3/6b8e23/images/submenu-top.png) no-repeat;_background-image:url(http://apycom.com/ssc-data/items/3/6b8e23/images/ie-submenu-top.gif);}div#menu ul ul a {padding:0;height:auto;float:none;display:block;line-height:26px;font-size:18px;color:#fff;z-index:-1;padding-left:5px;white-space:normal;width:152px;margin-left:18px;text-transform:none;}div#menu ul ul a span {line-height:26px;font-size:18px;}div#menu li.current ul a,div#menu li.current ul a span {background:none;}div#menu ul ul a:hover {background:url(http://apycom.com/ssc-data/items/3/6b8e23/images/submenu-selected-bottom.png) no-repeat 5px bottom;}div#menu ul ul a:hover span {background:url(http://apycom.com/ssc-data/items/3/6b8e23/images/submenu-selected-top.png) no-repeat 0 0;}div#menu ul ul a.parent {background:url(http://apycom.com/ssc-data/items/3/6b8e23/images/submenu-pointer-bottom.gif) no-repeat 5px bottom;}div#menu ul ul a.parent span {background:url(http://apycom.com/ssc-data/items/3/6b8e23/images/submenu-pointer-top.png) no-repeat 0 0;}div#menu ul ul a.parent:hover {background:url(http://apycom.com/ssc-data/items/3/6b8e23/images/submenu-pointer-selected-bottom.png) no-repeat 5px bottom;}div#menu ul ul a.parent:hover span {background:url(http://apycom.com/ssc-data/items/3/6b8e23/images/submenu-selected-top.png) no-repeat 0 0;}div#menu ul ul span {margin-top:0;text-align:left;}div#menu ul ul li.last {background:none;}div#menu ul ul li {width:100%;}div#menu ul ul div {padding-top:20px;margin:-92px 0 0 157px !important;margin-left:160px;background:url(http://apycom.com/ssc-data/items/3/6b8e23/images/subsubmenu-top.png) no-repeat 15px 0;}div#menu ul ul ul {padding-top:0;background:url(http://apycom.com/ssc-data/items/3/6b8e23/images/submenu-bottom.png) no-repeat 15px bottom;}div#menu ul ul div li {position:relative;top:-10px;}div#menu li.back {background:url(http://apycom.com/ssc-data/items/3/6b8e23/images/selected-left.png) no-repeat 0 0;width:10px;height:39px;z-index:8;position:absolute;padding:0;margin:24px 0 0 0;}div#menu li.back .left {padding:0;width:174px;background:url(http://apycom.com/ssc-data/items/3/6b8e23/images/selected-right.png) no-repeat right 0;height:39px;margin:0 0 0 14px;float:none;position:relative;top:0;left:0;visibility:visible;}#menu-box {margin:10px 0 10px 0;border:1px solid #1a1a1a;height:200px;width:940px;background:#222;}

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>
<div><ul><li><a href="URL link" class="parent"><span>Sub Item 1</span></a>
<div><ul><li><a href="URL link" class="parent"><span>Sub Item 1.1</span></a>
<div><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></div></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" class="parent"><span>Sub Item 1.5</span></a>
<div><ul><li><a href="URL link"><span>Sub Item 1.5.1</span></a></li>
<li><a href="URL link"><span>Sub Item 1.5.2</span></a></li></ul></div></li></ul></div></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></div></li>
<li><a href="URL link" class="parent"><span>MENU 1</span></a>
<div><ul><li><a href="URL link" class="parent"><span>Sub Item 1</span></a>
<div><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></div></li>
<li><a href="URL link" class="parent"><span>Sub Item 2</span></a>
<div><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></div></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></div></li>
<li><a href="URL link"><span>MENU 2</span></a></li>
<li><a href="URL link" class="parent"><span>MENU 3</span></a>
<div><ul><li><a href="URL link" class="parent"><span>Sub Item 1</span></a>
<div><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></div></li>
<li><a href="URL link" class="parent"><span>Sub Item 2</span></a>
<div><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></div></li></ul></div></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ẻ <div> <ul> </ul> </div>

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

11 nhận xét

  1. Hơi nặng, menu thuần css nhiều cột thế này hay hơn >>http://nettuts.s3.amazonaws.com/819_megamenu/demo/index.html

    Trả lờiXóa
  2. menu bị ẩn trong bài viết

    Trả lờiXóa
  3. @ Quân Sự: Có thể trong lớp bài viết của bạn có thuộc tính position:relative; nên gây nên việc các menu sẽ nằm ẩn phía sau.

    Trả lờiXóa
  4. @ Quân Sự: Bạn thử tìm xem nếu có bạn xóa thuộc tính đó

    Trả lờiXóa
  5. position:relative bấm Ctrl+f tìm kiếm ra 1 đống , mình xóa ntn?

    Trả lờiXóa
  6. @ Quân Sự: Bạn chỉ xóa ở những lớp post như .post, .main. Bạn phải xác định chính xác phần chứa nội dung mà nó làm ẩn menu của bạn để khắc phục cho chính xác.

    Trả lờiXóa
  7. Sao minh làm giống như bạn chỉ mà nó lại hiện hết các menu luôn vậy??? Bạn chỉ lại giùm mình nhé! My blog: viethoanmyspa.tk. Thanks

    Trả lờiXóa
    Trả lời
    1. Mình vừa cập nhật lại css bạn có thể thực hiện lại nhé. Chúc thành công.

      Xóa
  8. 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