"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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxaCTRK7O1a5n5ru8a2BsYmOkCHA9yaQZn1_JleUSTiBYbiku8cjz2JFSTwyJtc5gVjZ8Ks_hIM1aoNAdSLEmQydUFXKhb3p_9U42PmZX04rsjupM42kpxaVEva2eYlu91uTJgCVLKxHdH/) repeat-x left top; /*màu nền của menu*/
}
ul#topnav.v2 a{
color: #555;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxaCTRK7O1a5n5ru8a2BsYmOkCHA9yaQZn1_JleUSTiBYbiku8cjz2JFSTwyJtc5gVjZ8Ks_hIM1aoNAdSLEmQydUFXKhb3p_9U42PmZX04rsjupM42kpxaVEva2eYlu91uTJgCVLKxHdH/) repeat-x left bottom; /*màu nền của menu*/
}
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxaCTRK7O1a5n5ru8a2BsYmOkCHA9yaQZn1_JleUSTiBYbiku8cjz2JFSTwyJtc5gVjZ8Ks_hIM1aoNAdSLEmQydUFXKhb3p_9U42PmZX04rsjupM42kpxaVEva2eYlu91uTJgCVLKxHdH/) repeat-x left top; /*màu nền của menu*/
}
ul#topnav.v2 a{
color: #555;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxaCTRK7O1a5n5ru8a2BsYmOkCHA9yaQZn1_JleUSTiBYbiku8cjz2JFSTwyJtc5gVjZ8Ks_hIM1aoNAdSLEmQydUFXKhb3p_9U42PmZX04rsjupM42kpxaVEva2eYlu91uTJgCVLKxHdH/) 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>
<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<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>
Ở 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>
<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
Nguồn: TRAIDATMUI.com
0 nhận xét:
Đăng nhận xét