Tạo Menu dọc với hiệu ứng lật bằng JQuery

Hôm nay mình chia sẻ cho các bạn thủ thuật tạo menu dọc với hiệu ứng lật bằng JQuery. Thật ra thì menu này cũng khá là đơn giản chỉ có phần hiệu ứng là khác biệt nên mình không giới thiệu nhiều, bạn xem demo bên dưới để thấy rỏ hơn.

» 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 thêm tiện ích (Add a Gadget)

4. Thêm 1 HTML/Javascript và thêm vào code bên dưới

<script
type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/Jquery1.3.2.js"></script>
<script src="http://data-traidatmui.appspot.com/scripts/flipmenu.js"
type="text/javascript"> </script>
<style>
.flipmenu {
font-family: Arial;
font-size: 14px;
font-weight: bold;
position: relative;
}
.flipmenu_box {
overflow: hidden;
position: relative;
}
.flipmenu_link,.flipmenu_link_over,.flipmenu_link_active
{
width:300px;
text-decoration: none;
text-shadow:1px 1px 1px #fff;
text-transform: uppercase;
color: #000000;
cursor: pointer;
margin-top:2px;
padding: 6px;
position: absolute;
background: #fdd78d;
background:
-moz-linear-gradient(top, #fbdc88 0%, #fbbf57 50%, #fac319 51%, #fb9709 100%);
background:
-webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbdc88),
color-stop(50%,#fbbf57), color-stop(51%,#fac319), color-stop(100%,#fb9709));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbdc88',
endColorstr='#fb9709',GradientType=0 );
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.flipmenu_link_over,
.flipmenu_link_active {
text-decoration: none;
text-shadow:1px 1px 1px
#eee;
color: #fa0320;
background: #aebcbf;
background:
-moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%);
background:
-webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf),
color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf',
endColorstr='#0a0809',GradientType=0 );
</style>
<div id="flip_menu">
<a href="#">Tên menu 1</a>
<a href="#">Tên menu 2</a>
<a href="#">Tên menu 3</a>
<a href="#">Tên menu 4</a>
<a href="#">Tên menu 5</a>
<a href="#">Tên menu 6</a>
<a href="#">Tên menu 7</a>
<a href="#">Tên menu 8</a>
<a href="#">Tên menu 9</a>
<a href="#">Tên menu 10</a>
</div>

Bạn thay dấu (#) thành đường dẫn tương ứng với từng menu của bạn.

5. Save tiện ích lại.

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

Văn Tùng