TIN TỨC
Bài đăng mới đây

TẠO MENU DỌC CÓ HIỆU ỨNG ĐỘNG

TẠO MENU DỌC CÓ HIỆU ỨNG ĐỘ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://dl.dropbox.com/u/66348944/Jquery1.3.2.js"></script>
<script src="http://dl.dropbox.com/u/66348944/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


Chia sẻ :

0 nhận xét cho bài đăng này

Hãy để lại nhận xét nếu bạn thích bài đăng này

Cập nhật bài mới...
Nhập email của bạn vào đây
Để nhận các bài đăng mới!

Nhập email của bạn và nhấn enter.

Subscribe via RSS Feed subscribe to feeds
các blog Quảng cáo
tanchau123.blogspot.comlamsaonhi.blogspot.com
.com
BÀI ĐĂNG NỔI BẬT
BÀI ĐĂNG GẦN ĐÂY
Meovatcuocsong.blogspot.com
BÀI ĐĂNG CÁC THÁNG
Bình luận