MENU NGANG CÓ HIỆU ỨNG ĐỘNG KHI RÊ CHUỘT|MẸO VẶT CUỘC SỐNG

MENU NGANG CÓ HIỆU ỨNG ĐỘNG KHI RÊ CHUỘT

vuongsungdong

Hôm nay, tôi chia sẻ đến với các bạn cách tạo menu ngang có hiệu ứng động khi rê chuột (không có menu con). Với menu này khi bạn rê chuột đến một thẻ bất kỳ trên menu thì thẻ đó sẽ tự động đổi màu khác khá đẹp. Mời bạn bấm vào Xem thử để trải nghiệm

Xem thử

Đầu tiên, bạn đăng nhập vào Blog > chọn Thiết kế > chọn Chỉnh sửa HTML, bạn bấm đồng thời cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào lệnh ]]></b:skin>, sau đó dán đoạn code phía dưới trước dòng lệnh đó.

ul#topnav {
margin: 0px 0 0px;
padding: 0;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 650px; /*độ rộng của menu*/
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px; /*chiều cao của menu*/
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
color: #fff; /*màu text của menu*/
text-transform: uppercase;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color: #7bc441; }
ul#topnav span {
display: none;
}

ul#topnav.v2 span{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjneP8UI00pft_xW8I0clJxJwhekQW78001rTF_vd2OOldmnf2pTdpayXED9aVL1yawA99rRxehFElF4ksvpfM-hBU4B1rlJHTvnaZ2Ysfcq_F6V8NKHRqVw7qSnseixm23aSqoOw3Qo7Bm/) repeat-x left top; /*màu nền của menu*/
}
ul#topnav.v2 a{
color: #555;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjneP8UI00pft_xW8I0clJxJwhekQW78001rTF_vd2OOldmnf2pTdpayXED9aVL1yawA99rRxehFElF4ksvpfM-hBU4B1rlJHTvnaZ2Ysfcq_F6V8NKHRqVw7qSnseixm23aSqoOw3Qo7Bm/) repeat-x left bottom; /*màu nền của menu*/
}

Tiếp tục, trong khung tìm kiếm nhỏ bạn thay dòng lệnh ]]></b:skin> bằng lệnh <head> và dán đoạn code dưới đây vào sau nó.

Cuối cùng bấm Lưu lại. Bây giờ, bạn trở lại trang thiết kế > Thêm tiện ích > Thêm HTML/Javacript rồi dán đoạn code phía dưới vào.