BUSINESS ADMINISTRATION

Home

Thứ Tư, 7 tháng 11, 2012

"Tạo menu sổ xuống với hiệu ứng trượt ngang bằng Jquery"

19:52 K3nvil

(Traidatmui.com) – Vô tình mình thấy được một style menu trên trang ebank.vtc.vn, menu với hiệu ứng trượt khá đẹp mắt. Và mình thấy nó có thể ứng dụng cho blogger nên hôm nay xin chia sẻ đến các bạn thủ thuật này. Thủ thuật này sử dụng Jquery làm cho phần submenu trượt khá mượt khi bạn rê chuột vào menu chính. Bạn có thể ứng dụng menu này cho blog của mình bằng cách thực hiện một vài bước bên dưới.


1. Đăng nhập vào Blogspot
2. Vào thiết kế (Design) và chọn chỉnh sửa HTML
3. Chèn code bên dưới vào sau thẻ <head>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/Jquery1.3.2.js"></script>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/smartmenu.js"></script>

4. Bạn chèn tiếp code sau vào trước thẻ ]]></b:skin>
.smrtmenu{
background: url(http://lh5.ggpht.com/_BTztXRwC9ik/TOHRzzQQTPI/AAAAAAAAE28/KweTFMdi_yI/bg_menu.gif) repeat-x; /*nền của menu*/
height: 31px; /*chiều cao menu*/
width:600px; /*độ rộng menu*/
}

.smartmenu li ul {
display: none;
padding:0px;
}
.smartmenu ul, .smartmenufloaty ul {
margin: 0px;
padding: 0px;
list-style: none;
}
.smartmenu ul li a {
font-family:Arial;
padding: 5px 10px 5px 10px;
float: left;
font-weight:bold;
color: #FFF; /*màu text menu chính*/
background:url(http://lh6.ggpht.com/_BTztXRwC9ik/TOHRzyrt5LI/AAAAAAAAE3I/xHZt_QqoqCg/line.gif) no-repeat right;}

.smartmenufloaty {
position: absolute;
border: none;
width: auto;
height: auto;
left: 0px;
top: 0px;
z-index: 1000;
}

.smartmenufloaty .tip {
background: url(http://lh3.ggpht.com/_BTztXRwC9ik/TOHRz_iWdcI/AAAAAAAAE3E/cho804P59SE/floatytip.gif) no-repeat;
height: 10px;
width: 50px;
margin-top: -5px;
overflow: hidden;
}

.smartmenufloaty li {
background: url(http://lh5.ggpht.com/_BTztXRwC9ik/TOHRz2ioAeI/AAAAAAAAE3A/MoNJA5-wJX0/floatybg.gif);
border-bottom: 1px dotted #fff;
padding: 1px 8px 1px 8px;

}
.smartmenufloaty li.last {
border: none;
}
.smartmenufloaty a {
font-family:Arial;
font-size: 13px;
text-decoration: none;
line-height: 20px;
color:#fff; /*màu text submenu*/
}

.smartmenufloaty a:hover {
color: #0000ff; /*màu text submenu khi rê chuột*/
}

5. Bây giờ bạn save template lại và trở về phần tử trang
6. Thêm 1 HTML/Javascript và thêm vào HTML/Javascript code bên dưới
<div class="smrtmenu"><div id="navigation" class="smartmenu">
<ul>
<li><a href="URL home">Home</a></li>
<li><a href="URL menu 1">Menu 1</a>
<ul>
<li><a href="URL submenu 1.1">Submenu 1.1</a></li>
<li><a href="URL submenu 1.2">Submenu 1.2</a></li>
</ul></li>

<li><a href="URL menu 2" target="_blank">Menu 2</a>
<ul>
<li><a href="URL menu 2.1">Submenu 2.1</a> </li>
<li><a href="URL menu 2.2">Submenu 2.2</a> </li>
<li><a href="URL menu 2.3">Submenu 2.3</a> </li>
<li><a href="URL menu 2.4">Submenu 2.4</a> </li>
<li><a href="URL menu 2.5">Submenu 2.5</a> </li>
</ul></li>

<li><a href="URL menu 3" target="_blank">Menu 3</a>
<ul>
<li><a href="URL menu 3.1">Submenu 3.1</a> </li>
<li><a href="URL menu 3.2">Submenu 3.2</a> </li>
<li><a href="URL menu 3.3">Submenu 3.3</a> </li>
<li><a href="URL menu 3.4">Submenu 3.4</a> </li>
<li><a href="URL menu 3.5">Submenu 3.5</a> </li>
</ul></li>

<li><a href="URL menu 4" target="_blank">Menu 4</a>
<ul>
<li><a href="URL menu 4.1">Submenu 4.1</a> </li>
<li><a href="URL menu 4.2">Submenu 4.2</a> </li>
<li><a href="URL menu 4.3">Submenu 4.3</a> </li>
<li><a href="URL menu 4.4">Submenu 4.4</a> </li>
<li><a href="URL menu 4.5">Submenu 4.5</a> </li>
</ul></li>

<li><a href="URL menu 5" target="_blank">Menu 5</a>
<ul>
<li><a href="URL menu 5.1">Submenu 5.1</a> </li>
<li><a href="URL menu 5.2">Submenu 5.2</a> </li>
<li><a href="URL menu 5.3">Submenu 5.3</a> </li>
<li><a href="URL menu 5.4">Submenu 5.4</a> </li>
<li><a href="URL menu 5.5">Submenu 5.5</a> </li>
</ul></li>

<li><a href="URL menu 6">Menu 6</a></li>

</ul>
</div>
</div>

<script type="text/javascript">
jQuery(window).ready(function(){
jQuery("#navigation").Smartmenu({animationDuration: 250});
});
</script>

☼ Chỉnh code:
- Các dòng màu xanh đậm trong code là phần hiển thị trên menu, bạn hãy thay thành tên của các menu chính và menu con tương ứng.
- Dòng màu đỏ đậm chính là các link của các menu chính và menu con, bạn hãy thay thành link tương ứng với từng menu chính và các menu con.

7. Sau khi chỉnh sửa xong bạn save tiện ích lại

Ở trên mình chỉ có 6 menu chính nếu bạn muốn thêm nhiều menu hơn thì bạn chỉ việc thêm code như bên dưới vào sau menu 6 như bên dưới
<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>


Nếu muốn thêm menu con cho menu nào đó bạn làm như sau, ví dụ chúng ta sẽ tạo thêm menu con cho menu 6 ở trên.
<li><a href="URL menu 6" target="_blank">Menu 6</a>
<ul>
<li><a href="URL menu 6.1">Submenu 6.1</a> </li>
<li><a href="URL menu 6.2">Submenu 6.2</a> </li>

</ul></li>

Bạn muốn thêm nhiều menu con trong menu 6 trên, bạn chỉ việc thêm dòng code tương tự bên dưới vào sau submenu 6.2 ở trên.
<li><a href="URL menu 6.3">Submenu 6.3</a> </li>

Chúc bạn thành công
Người đăng: vào lúc

1 nhận xét :

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