Bạn đang xem : » » » Tiện ích tạo menu drop down

Tiện ích tạo menu drop down

 – 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



gucafe.net :

Share your views...

0 Respones to " Tiện ích tạo menu drop down "

Đăng nhận xét

Đăng ký: Đăng Nhận xét ( Atom )

Thông tin Dự Án

Quảng cáo giá rẻ