"Tạo menu hiệu ứng động với JQuery"

(Traidatmui.com) - Hôm nay mình sẽ giới thiệu đến các bạn tạo một menu với hiệu ứng khá đẹp mắt. Menu này chỉ thực hiện cho menu chính, nó không chứa các menu con (submenu). Thủ thuật này ứng dụng JQuery để tạo hiệu ứng, hiệu ứng trông khá mướt. Nếu bạn muốn tạo menu không có menu con thì có thể sử dụng menu này cho blog mình. Để tạo menu này thì các bước thực hiện cũng khá đơn giản, bạn chỉ cần thực hiện mootj vài bước bên dưới.


1. Đầu tiên đăng nhập Blogger
2. Vào thiết kế chọn chỉnh sửa HTML
3. Chèn code css bên dưới vào trước thẻ ]]></b:skin>
ul#topnav {
margin: 0px 0 0px;
padding: 0;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 650px; /*độ rộng của menu*/
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px; /*chiều cao của menu*/
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
color: #fff; /*màu text của menu*/
text-transform: uppercase;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color: #7bc441; }
ul#topnav span {
display: none;
}

ul#topnav.v2 span{
background: url(http://lh4.ggpht.com/_BTztXRwC9ik/TRDJIYtmedI/AAAAAAAAF9E/0W3W6wAzMRs/a_bg.gif) repeat-x left top; /*màu nền của menu*/
}
ul#topnav.v2 a{
color: #555;
background: url(http://lh4.ggpht.com/_BTztXRwC9ik/TRDJIYtmedI/AAAAAAAAF9E/0W3W6wAzMRs/a_bg.gif) repeat-x left bottom; /*màu nền của menu*/
}

4. Chèn tiếp code bên dưới vào sau thẻ <head>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/jquery.min.js"></script>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/ani_menu.js"></script>

5. Save template lại
6. Trở về phần tử trang và thêm 1 HTML/Javascript
7. Thêm code sau vào HTML/Javascript đó
<ul id="topnav" class="v2">
<li><a href="URL Menu 1">MENU 1</a></li>
<li><a href="URL Menu 2">MENU 2</a></li>
<li><a href="URL Menu 3">MENU 3</a></li>
<li><a href="URL Menu 4">MENU 4</a></li>
<li><a href="URL Menu 5">MENU 5</a></li>
<li><a href="URL Menu 6">MENU 6</a></li>

</ul>
Bạn thay các URL Menu thành các link tương ứng cho từng tên MENU trong blog của bạn
Ở trên chỉ có 6 thư mục trong menu, nếu bạn muốn thêm nhiều hơn, bạn chỉ việc thêm code như bên dưới
<ul id="topnav" class="v2">

<li><a href="URL Menu 4">MENU 4</a></li>
<li><a href="URL Menu 5">MENU 5</a></li>
<li><a href="URL Menu 6">MENU 6</a></li>
<li><a href="URL Menu 7">MENU 7</a></li>
<li><a href="URL Menu 8">MENU 8</a></li>
</ul>

8. Save tiện ích lại

Chúc bạn thành công

Xem khác cùng chủ đề

2 nhận xét | Viết lời bình

12/26/2010 04:10:00 CH Trả lời

1 menu với hiệu ứng rất độc đáo, chúc ban ngày mới tốt lành

12/28/2010 05:57:00 SA Trả lời

Em trở thành người thứ 40 theo dõi Blog của anh VDinh đó.hihi.Anh viết thêm nhìu thủ thuật nữa na :D

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang