Tạo menu dọc với hiệu ứng trượt khi trỏ chuột qua

 humghn.com 

Trong bài viết lần nay , chuyên mục sẽ hướng dẫn các bạn cách tạo một menu dọc với hiệu ứng trượt khi trỏ chuột chạy qua . Với thủ thuật này , hi vọng rằng các bạn sẽ có nhiều lựa chọn thiết kế hơn cho blogspot của mình 

DEMO

Tên menu 1Tên menu 2Tên menu 3Tên menu 4Tên menu 5Tên menu 6Tên menu 7Tên menu 8Tên menu 9Tên menu 10

Cách thực hiện

Các bạn đăng nhập vào tài khoản blogspot , sau đó chọn " Bố cục " rồi thêm tiện ích " HTML/JavaScript " và dán đoạn mã sau vào tiện ích vừa thêm

<script type="text/javascript" src="https://googledrive.com/host/0B_dL7bz8SOIxQnJPVFc0N3duQ2c"></script>
<script src="https://googledrive.com/host/0B_dL7bz8SOIxM1Y5Y1NsQzZwQzA" 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>

Dấu # được bôi xanh các bạn thay bằng đường dẫn tùy thích . Tên menu được bôi xanh bạn thay bằng tên bạn muốn đặt . 

Ngoài ra , trong mẫu này , bạn cũng có thể thay đổi màu sắc của menu khia chưa rê chuột hoặc khi rê chuột qua bằng cách thay đổi các mã màu HTML bằng các mã màu HTML trong bảng mã HTML tại đây .

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