Menu dọc với hiệu ứng JQuery cho blog/web

Bài viết hôm nay mình sẽ giúp bạn tạo menu dọc trên sidebar với hiệu ứng lavalamp. Hiệu ứng này trông cũng khá đẹp mắt, và với menu này bạn cũng có thể tạo ra nhiều menu con (Submenu) hiển thị theo chiều ngang. Bạn có thể xem thêm Demo bên dưới để thấy rỏ hơn hiệu ứng và cách hiển thị các menu con của style menu này.

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>

#menu, #menu * {
list-style:none;border:0;padding:0;margin:0;}
#menu {width:173px;position:relative;z-index:999;background:url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/Taj-W0XVfzI/AAAAAAAAAPc/amq78qtaMcs/base.png) -173px 0;padding-top:20px;}
#menu ul {background:url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/Taj-W0XVfzI/AAAAAAAAAPc/amq78qtaMcs/base.png) 0 bottom;padding-bottom:11px;}
* html #menu, * html #menu ul {background-image:url(https://lh4.googleusercontent.com/_9-sNIAfGhKg/Taj-XLZHBhI/AAAAAAAAAPY/Rxw6OF4qEFA/base.gif);}
#menu div {width:180px;position:relative;background:url(https://lh6.googleusercontent.com/_9-sNIAfGhKg/Taj-Y4hKcWI/AAAAAAAAAQM/lYMslst0ddA/sub.png) -180px 0;padding-top:9px;}
#menu div ul {background:url(https://lh6.googleusercontent.com/_9-sNIAfGhKg/Taj-Y4hKcWI/AAAAAAAAAQM/lYMslst0ddA/sub.png) 0 bottom;padding-bottom:5px;}
* html #menu div, * html #menu div ul {background-image:url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/Taj-YjlSmcI/AAAAAAAAAQI/tgjHMVXzCYI/sub.gif);}
*+html #menu li {border-bottom:1px solid transparent;}
#menu li div {visibility:hidden;position:absolute;margin:-44px 0 0 -2px;left:100%;}
* html #menu li div, *+html #menu li div {margin-top:-42px;}
#menu li:hover>div {visibility:visible;}
* html #menu li {height:34px;}
#menu li a {display:block;font-size:11px;
font-weight:bold;font-family:Arial;text-decoration:none;color:#fff;
padding-top:11px;
cursor:pointer;position:relative;z-index:9;}
*+html #menu li a {padding-top:12px;}
* html #menu li a {padding-top:10px;}
#menu li.current a,#menu li a:hover {background:url(https://lh3.googleusercontent.com/_9-sNIAfGhKg/Taj-XXtZU0I/AAAAAAAAAPo/5IBQsEf5nq4/base-select.gif) no-repeat -163px 0;}
#menu li span {line-height:14px;padding:0 19px 11px 17px;display:block;}
*+html #menu li span {padding-bottom:10px;}
* html #menu li span {height:24px;padding-bottom:2px;}
#menu li.current a span,#menu li a:hover span {background:url(https://lh3.googleusercontent.com/_9-sNIAfGhKg/Taj-XXtZU0I/AAAAAAAAAPo/5IBQsEf5nq4/base-select.gif) no-repeat 5px bottom;}
#menu li a:hover span {color:#043454;}
#menu li a.parent:hover span {background:url(https://lh3.googleusercontent.com/_9-sNIAfGhKg/Taj-XXtZU0I/AAAAAAAAAPo/5IBQsEf5nq4/base-select.gif) no-repeat -331px bottom;}
#menu.js-active li.current a,#menu.js-active li.current a span,#menu.js-active li a:hover,#menu.js-active li a:hover span {background-image:url(https://lh4.googleusercontent.com/_9-sNIAfGhKg/Taj-YqKFgOI/AAAAAAAAAQE/4IinfoAn4tw/pix.gif);}
#menu li a.parent span, #menu.js-active li a.parent span {background:url(https://lh3.googleusercontent.com/_9-sNIAfGhKg/Taj-XXtZU0I/AAAAAAAAAPo/5IBQsEf5nq4/base-select.gif) no-repeat -499px bottom;}
#menu li.current li a,#menu li.current li a span {background-image:url(http://apycom.com/ssc-data/items/14/4682b4/images/pix.gif);}
#menu li li {border:0;}#menu li li a span {color:#043454;}
#menu li li a.parent span, #menu.js-active li li a.parent span {background:url(https://lh3.googleusercontent.com/_9-sNIAfGhKg/Taj-ZBjWtOI/AAAAAAAAAQQ/u94gZz27Y_I/sub-select.gif) no-repeat -520px bottom;}
#menu li li a:hover, #menu.js-active li li a:hover {background:url(https://lh3.googleusercontent.com/_9-sNIAfGhKg/Taj-ZBjWtOI/AAAAAAAAAQQ/u94gZz27Y_I/sub-select.gif) no-repeat -170px 0;}
#menu li li a:hover span,#menu.js-active li li a:hover span {background:url(https://lh3.googleusercontent.com/_9-sNIAfGhKg/Taj-ZBjWtOI/AAAAAAAAAQQ/u94gZz27Y_I/sub-select.gif) no-repeat 5px bottom;color:#fff;}
#menu li li a.parent:hover span, #menu.js-active li li a.parent:hover span {background:url(https://lh3.googleusercontent.com/_9-sNIAfGhKg/Taj-ZBjWtOI/AAAAAAAAAQQ/u94gZz27Y_I/sub-select.gif) no-repeat -345px bottom;}
#menu li.back {width:170px;z-index:8;position:absolute;background:url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/Taj-X52VTEI/AAAAAAAAAP4/9DRU42-2ZMo/lavalamp.gif) no-repeat 5px bottom;}
#menu li.back .left {width:170px;float:none;position:relative;top:0;left:0;height:7px;
overflow:hidden;padding:0;margin:0;visibility:visible;
background:url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/Taj-X52VTEI/AAAAAAAAAP4/9DRU42-2ZMo/lavalamp.gif) no-repeat -163px 0;}

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