Luat1x1

Chia sẻ thủ thuật blogspot - blogger

luat1x1

10/21/2011

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

( Luat1x1.blogspot.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://traidatmui-tips.googlecode.com/files/jquery.min.v1.4.1.js" type="text/javascript"></script>
<script src="http://traidatmui-tips.googlecode.com/files/jquery.easing.1.1.js" type="text/javascript"></script>
<script src="http://traidatmui-tips.googlecode.com/files/jquery.lavalamp.0.1.0.js" type="text/javascript"></script>
<script src="http://traidatmui-tips.googlecode.com/files/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>
#menu {height:88px;padding-left:24px;background:url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/TamuM6z4xqI/AAAAAAAAARE/nCbRp5RnmRU/left.png) no-repeat;_background-image:url(https://lh6.googleusercontent.com/_9-sNIAfGhKg/TamuMnNW0_I/AAAAAAAAAQ4/OVI4onHTrK0/ie-left.png);width:900px;}
#menu ul {margin:0;padding:0;list-style:none;float:left;}
#menu ul.menu {padding-right:0px;
background:url(https://lh4.googleusercontent.com/_9-sNIAfGhKg/TamuNLNC7vI/AAAAAAAAARQ/EF7h9czyE5U/right.png) no-repeat right 0;_background-image:url(https://lh3.googleusercontent.com/_9-sNIAfGhKg/TamuMnyfktI/AAAAAAAAAQ8/ybBfK-JTSjQ/ie-right.png);}
#menu li {position:relative;margin:0;padding:0 12px 0 0;display:block;float:left;z-index:9;width:194px;}
#menu ul ul li {z-index:9;}
#menu li div {list-style:none;float:left;position:absolute;z-index:11;top:83px;left:0;visibility:hidden;width:194px;padding:0 0 15px 0;background:url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/TamuNTEynCI/AAAAAAAAARY/eEhY1rPg6HY/submenu-bottom.png) no-repeat 15px bottom;margin:1px 0 0 0;}
#menu li:hover>div {visibility:visible;}
#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;}
#menu span {display:block;cursor:pointer;background-repeat:no-repeat;background-position:95% 0;text-align:center;}
#menu a {padding:0 10px 0 0;line-height:75px;height:88px;margin-right:11px;_margin-right:1px;text-transform:uppercase;background:none;}
#menu span {margin-top:5px;padding-left:10px;color:#fff;font:normal 22px Arial;font-weight:bold;background:none;line-height:75px;}
#menu a:hover {background:url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/TamuNBADbuI/AAAAAAAAARI/DjCTi_Aj3Q8/selected-right.png) no-repeat right 23px;}
#menu a:hover span {background:url(https://lh6.googleusercontent.com/_9-sNIAfGhKg/TamuNHL8GkI/AAAAAAAAARM/LGrNYS-sOZo/selected-left.png) no-repeat 0 18px;}
#menu li.current a,#menu ul.menu>li:hover>a {background:url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/TamuNBADbuI/AAAAAAAAARI/DjCTi_Aj3Q8/selected-right.png) no-repeat right 23px;}#menu li.current a span,#menu ul.menu>li:hover>a span {background:url(https://lh6.googleusercontent.com/_9-sNIAfGhKg/TamuNHL8GkI/AAAAAAAAARM/LGrNYS-sOZo/selected-left.png) no-repeat 0 18px;}
#menu li {}
#menu li.last {background:none;}
#menu ul ul li {background:none;padding:0;}
#menu ul ul {padding-top:10px;width:194px;background:url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/TamuOHXXNRI/AAAAAAAAARk/avuBMpFvhDM/submenu-top.png) no-repeat;_background-image:url(https://lh4.googleusercontent.com/_9-sNIAfGhKg/TamuMsL0c6I/AAAAAAAAARA/KOFiK8lK-EI/ie-submenu-top.gif);}

#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;}
#menu ul ul a span {line-height:26px;font-size:18px;}
#menu li.current ul a,#menu li.current ul a span {background:none;}
#menu ul ul a:hover {background:url(https://lh6.googleusercontent.com/_9-sNIAfGhKg/TamuN_wtsbI/AAAAAAAAARo/7mbHWwCW7Ho/submenu-selected-bottom.png) no-repeat 5px bottom;}
#menu ul ul a:hover span {background:url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/TamuOKQn0BI/AAAAAAAAARs/BB1PtVimsxg/submenu-selected-top.png) no-repeat 0 0;}
#menu ul ul a.parent {background:url(https://lh4.googleusercontent.com/_9-sNIAfGhKg/TamuNhREoEI/AAAAAAAAARU/7KocSDAIOBI/submenu-pointer-bottom.gif) no-repeat 5px bottom;}
#menu ul ul a.parent span {background:url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/TamuNwE0cLI/AAAAAAAAARg/azKZKwT9jxc/submenu-pointer-top.png) no-repeat 0 0;}
#menu ul ul a.parent:hover {background:url(https://lh6.googleusercontent.com/_9-sNIAfGhKg/TamuNqJye8I/AAAAAAAAARc/dSRaag_SvqE/submenu-pointer-selected-bottom.png) no-repeat 5px bottom;}
#menu ul ul a.parent:hover span {background:url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/TamuOKQn0BI/AAAAAAAAARs/BB1PtVimsxg/submenu-selected-top.png) no-repeat 0 0;}
#menu ul ul span {margin-top:0;text-align:left;}
#menu ul ul li.last {background:none;}
#menu ul ul li {width:100%;}
#menu ul ul div {padding-top:20px;margin:-92px 0 0 157px !important;margin-left:160px;background:url(https://lh3.googleusercontent.com/_9-sNIAfGhKg/TamuOTx8DpI/AAAAAAAAARw/cLRMqeTfFt4/subsubmenu-top.png) no-repeat 15px 0;}
#menu ul ul ul {padding-top:0;background:url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/TamuNTEynCI/AAAAAAAAARY/eEhY1rPg6HY/submenu-bottom.png) no-repeat 15px bottom;}
#menu ul ul div li {position:relative;top:-10px;}
#menu li.back {background:url(https://lh6.googleusercontent.com/_9-sNIAfGhKg/TamuNHL8GkI/AAAAAAAAARM/LGrNYS-sOZo/selected-left.png) no-repeat 0 0;width:10px;height:39px;z-index:8;position:absolute;padding:0;margin:24px 0 0 0;}
#menu li.back .left {padding:0;width:174px;background:url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/TamuNBADbuI/AAAAAAAAARI/DjCTi_Aj3Q8/selected-right.png) no-repeat right 0;height:39px;margin:0 0 0 14px;float:none;position:relative;top:0;left:0;visibility:visible;}

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
Người đăng: Nguyên Luật vào lúc 0 nhận xét
Nhãn:
Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

0 nhận xét

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
© 2011 Luat1x1
Designed by BlogThietKe Cooperated with Duy Pham
Released under Creative Commons 3.0 CC BY-NC 3.0
Posts RSS ∙ Comments RSS
Back to top