MENU NGANG ĐỔI MÀU TAB KHI RÊ CHUỘT (Kiểu 2)

Tương tự kiểu 1 (Xem TẠI ĐÂY), menu ngang này sẽ đổi màu Tab khi bạn rê chuột vào.
Khi bạn rê chuột vào một mục bất kỳ trên menu ngang này thì lập tức một nút bấm xuất hiện lướt từ bên trái qua khá mướt. Khi bạn bỏ chuột ra, nút bấm này sẽ chạy ngược về mục đầu tiên. (Thủ thuật này chỉ áp dụng cho blog V2 blog được tải trên mạng về, không áp dụng cho giao diện mặc định của Blogspot)

Mời bạn bấm vào Xem thử phía dưới để trải nghiệm nha.

Xem thử

Thủ thuật này cũng khá đơn giản, bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML (hoặc đăng nhập vào Blog > Chọn bố cục > Thêm tiện ích HTML) rồi dán đoạn code phía dưới vào.

<script type="text/javascript" src="http://dl.dropbox.com/u/66348944/dunghennessy/menungang-hieuungdong/menungang.js"></script>

<script src="http://dl.dropbox.com/u/66348944/dunghennessy/menungang-hieuungdong/gooeymenu.js">

</script>

<link rel="stylesheet" type="text/css" href="http://dl.dropbox.com/u/66348944/dunghennessy/menungang-hieuungdong/gooeymenu.css" /><ul id="gooeymenu1" class="gelbuttonmenu">
<li><a href="#"class="selected">Trang chủ</a></li>
<li><a href="#">Tên menu</a></li>
<li><a href="#">Tên menu</a></li>
<li><a href="#">Tên menu</a></li>
<li><a href="#">Tên menu</a></li>
<li><a href="#">Tên menu</a></li>
</ul>
<script>
gooeymenu.setup({id:'gooeymenu1',  fx:'swing'})
</script>

Bây giờ, bạn cần thay đổi tên menu, thay dấu "#" là các địa chỉ link mình cần liên kết đến và bấm Lưu lại là xong.

Mở rộng thêm:

Nếu muốn thêm menu thì bạn copy đoạn code này:

<li><a href="#">Tên menu con </a></li>

Dán tiếp trên dòng lệnh </ul> cuối cùng

Các nút bấm này là do 3 file ảnh gộp lại, vì vậy tôi đã làm sẳn cho các bạn thêm 2 màu nữa để bạn lựa chọn phù hợp với blog của mình: (đoạn code hướng dẫn trong bài nút bấm là màu xanh lá)

* Nút bấm màu đỏ: Bạn thay dòng gooeymenu.css (màu xanh) thành gooeymenu3.css

* Nút bấm màu xanh dương nhạt: Bạn thay dòng gooeymenu.css thành gooeymenu2.css

Cuối cùng bấm Lưu lại là xong.

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

▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀

Người đăng: dunghennessy vào lúc 15:44