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>

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

» 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