▀▄▀▄▀▄▀▄▀▄▀▄ Các bài đăng mới ▀▄▀▄▀▄▀▄▀▄▀
    Kenh sctv1 Kenh sctv1 Kenh sctv1
    Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1
    Kenh sctv1 Kenh sctv5 Kenh HTV2 Kenh SCTV16




Xem truyền hình trực tuyến (Click here)

MENU DỌC CÓ HIỆU ỨNG ĐỘNG (Kiểu 2)

Tiếp theo bài "TẠO MENU DỌC CÓ HIỆU ỨNG ĐỘNG KIỂU 1" (Xem TẠI ĐÂY). Hôm nay tôi giới thiệu cho các bạn thêm một menu dọc nữa cũng có hiệu ứng động khi rê chuột vào menu.
Cũng không khác gì các menu dọc khác, menu này bao gồm các thanh màu xanh chứa các tên hiển thị liên kết và được sắp xếp theo hình răng cưa, khi bạn rê chuột vào thì thanh này sẽ sáng lên và trượt dài ra về bên trái, khi bạn bấm chuột vào nó sẽ dẫn đến trang mà bạn đã gắn liên kết.
Mời bạn bấm vào "Xem thử" để thấy rõ hơn hiệu ứng của thủ thuật này




Xem thử

Thủ thuật này cũng khá đơn giản, bạn chỉ việc đăng nhập vào Blog > Chọn thiết kế > Thêm tiện ích HTML (đối với các bạn đang sử dụng giao diện blog mới thì bạn đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML) rồi dán code phía dưới vào.


<style>

ul.svertical{
width: 270px; /* độ rộng của menu*/
overflow: auto;
background: black; /* màu nền của menu */
margin: 0;
padding: 0;
padding-top: 7px;
list-style-type: none;
}

ul.svertical li{
text-align: right;
}

ul.svertical li a{
position: relative;
display: inline-block;
text-indent: 5px;
overflow: hidden;
background: rgb(127, 201, 68);
font: bold 16px Germand;
text-decoration: none;
padding: 5px;
margin-bottom: 1px;
color: black;
-moz-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8); /* inner right shadow added to each link */
-webkit-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);
box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

ul.svertical li a:hover{
padding-right: 50px; /* độ dài của thanh menu khi bạn rê chuột vào */
color: black;
background: rgb(153,249,75);
-moz-box-shadow: inset -3px 0 2px rgba(114,114,114, 0.8); /* contract inner right shadow */
-webkit-box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8);
box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8);
}

ul.svertical li a:before{
content: "";
position: absolute;
left: 0;
top: 0;
border-style: solid;
border-width: 70px 0 0 20px;
border-color: transparent transparent transparent black; /* change black to match the background color of the menu UL */

}

</style>
<center>
<ul class="svertical">
<li><a href="địa chỉ URL">Tên hiển thị menu 1</a></li>
<li><a href="địa chỉ URL">Tên hiển thị menu 2</a></li>
<li><a href="địa chỉ URL">Tên hiển thị menu 3</a></li>
<li><a href="địa chỉ URL">Tên hiển thị menu 4</a></li>
<li><a href="địa chỉ URL">Tên hiển thị menu 5</a></li>
<li><a href="địa chỉ URL">Tên hiển thị menu 6</a></li>
</ul></center>

Bây giờ, bạn thay đổi các dòng lệnh màu đỏ để phù hợp với blog mình.

Mở rộng thêm:
Ở đoạn code trên chỉ có 6 mục (6 thanh màu xanh), nếu muốn nhiều hơn thì bạn copy dòng lệnh này:

<li><a href="địa chỉ link liên kết">Tên hiển thị</a></li>

Dán trên thẻ </ul> và bấm Lưu lại là xong
Chúc các bạn thành công

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

3 nhận xét:

http://nguyengoclam.blogspot.com/ nói...

Em thấy hiệu ứng Flas của anh rất đẹp em cũng muốn làm anh có thể chỉ giúp em không? hiệu ứng Flas ở trang http://www.dunghennessy.blogspot.com/2012/05/menu-doc-co-hieu-ung-ong-kieu-2.html
Gửi cho em sớm nhé em cám ơn anh. Gmai: lamngocnguyen89@gmail.com

http://nguyengoclam.blogspot.com/ nói...

Anh ơi hiệu ứng rồng bay ở ngay đầu trang nhé!

dungheineken nói...

Em tham khảo bài này nha
http://dunghennessy.blogspot.com/2011/08/tao-banner-ong.html

Đăng nhận xét

 
Powered by by: Blogger