Tạo menu dọc có hiệu ứng

Trước đây, tôi có chia sẻ với các bạn các mẫu menu dọc cho Blogspot (xem TẠI ĐÂY).
Hôm nay tôi giới thiệu đến các bạn một mẫu menu dọc khá đẹp, khi sử dụng menu này, bạn rê chuột vào một menu bất kỳ thì menu đó sẽ có hiệu ứng lật và chuyển đổi màu khá mướt. Các bạn bấm vào Xem thử phía dưới để xem trước nha.

Xem thử

Thủ thuật này khá là đơn giản, bạn đăng nhập vào Blog > chọn thiết kế > Thêm tiện ích HTML, và dán tất cả các code phía dưới vào.

<script type="text/javascript" src="http://traidatmui-tips.googlecode.com/files/Jquery1.3.2.js"></script>
<script src="http://traidatmui-tips.googlecode.com/files/flipmenu.js" type="text/javascript"> </script>
<style>
.flipmenu {
font-family: Times new roman;
font-size: 16px;
font-weight: bold;
position: relative;
}

.flipmenu_box {
overflow: hidden;
position: relative;
}

.flipmenu_link,.flipmenu_link_over,.flipmenu_link_active {
width:250px;
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="#">● Thủ thuật Windows 7</a>
<a href="#">● Thủ thuật Windows XP</a>
<a href="#">● Thủ thuật Internet</a>
<a href="#">● Thủ thuật USB</a>
<a href="#">● Thủ thuật Yaoo-Gmail</a>
<a href="#">● Thủ thuật Windows</a>
<a href="#">● Thủ thuật Blogspot</a>
<a href="#">● Chuyên đề máy tính</a>
<a href="#">● Tổng hợp</a>
<a href="#">● Linh tinh</a>
</div>

Bây giờ, bạn thay đổi các dấu "#" màu xanh thành các địa chỉ tương ứng của các menu và thay đổi các tiêu đề hiển thị trên menu (các dòng chữ màu xanh) theo ý thích của bạn, ngoài ra bạn còn có thể thay đổi:

* Width: 250px (chiều rộng của tiện ích).
* Cỡ chữ hiển thị trên menu (Font-size:16px)

và bấm LƯU lại là xong

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

Tweet