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

Người đăng: buonkhongem on Thứ Ba, 24 tháng 5, 2011

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/AVvXsEiu6H6GZqKovwjx9yP0ibBrTGfjfXbOnxsQFtOlyWyLVKyd060mVYIB9aVRmH9PUS4WP_bFPT4vUMopnaI9STNoYev-vuAq4QW9wFkGOaoN2wiI63BomssLSFC6Li7JvjRdZXXwENd3ODks/) 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/AVvXsEiu6H6GZqKovwjx9yP0ibBrTGfjfXbOnxsQFtOlyWyLVKyd060mVYIB9aVRmH9PUS4WP_bFPT4vUMopnaI9STNoYev-vuAq4QW9wFkGOaoN2wiI63BomssLSFC6Li7JvjRdZXXwENd3ODks/)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ó.

<script src='http://dl.dropbox.com/u/66348944/jquery.min.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/66348944/ani_menu.js' type='text/javascript'/>
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.
 

<ul id="topnav" class="v2">
<li><a href="URL Menu 1">MENU 1</a></li>
<li><a href="URL Menu 2">MENU 2</a></li>
<li><a href="URL Menu 3">MENU 3</a></li>
<li><a href="URL Menu 4">MENU 4</a></li>
<li><a href="URL Menu 5">MENU 5</a></li>
<li><a href="URL Menu 6">MENU 6</a></li>
<li><a href="URL Menu 5">MENU 5</a></li>
<li><a href="URL Menu 6">MENU 6</a></li>
</ul>

Bạn thay đổi các dòng màu đỏ và màu xanh theo ý mình và bấm Lưu lại.
Bạn trở lại vào Blog sẽ thấy có một menu ngang màu đỏ và khi bạn rê chuột vào menu này sẽ có hiệu ứng chuyển động tuyệt đẹp.
Chúc bạn thành công

{ 0 nhận xét... read them below or add one }

Đăng nhận xét