Menu ngang có hiệu ứng khi rê chuột

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.

Ảnh minh họa

Bắt đầu thủ thuật.

Bước 1: Đăng nhập vào blog

Bước 2: Đi tới danh sách bài đăng (Nếu bạn đang quản lý từ 2 trang trở lên)

Bước 3: Chọn Mẫu

Bước 4: Chỉnh sửa HTML => Tiếp tục (đồng thời bấm cặp phím Ctrl+F và gõ lệnh ]]></b:skin>

)

Bước 5: Chèn đoạn code dưới đây vào trước dòng lệnh ]]></b:skin>


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/AVvXsEjBGv3J1UmYQDqsBTc3iAfrWY7uqCPYClLiZayWjAxRhImfFLtERWJXhEXl0m8esyKhG76aPwLR-plYOHGoP_VUWCIgxI0AudIyUySnubvzFZzaql99ELVMb7AlDhRI9o-zObWmvQ_epkjH/) 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/AVvXsEjBGv3J1UmYQDqsBTc3iAfrWY7uqCPYClLiZayWjAxRhImfFLtERWJXhEXl0m8esyKhG76aPwLR-plYOHGoP_VUWCIgxI0AudIyUySnubvzFZzaql99ELVMb7AlDhRI9o-zObWmvQ_epkjH/) repeat-x left bottom; /*màu nền của menu*/
}

Bước 6: Chèn tiếp đoạn code dưới đây vào sau <head>

<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'/>

Sau đó bấm Lưu mẫu lại.

Bước 7: Chọn thêm tiện ích => thêm HTML/Javacript, sau đó thêm đoạn code dưới đây 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>

Cuối cùng 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:

Đăng nhận xét

» CĐQTKD5A cảm ơn bạn đã giành chút time để đọc bài viết.
» Nếu có thắc mắc hay góp ý, bạn hãy để lại một nhận xét.
» Nếu thấy bài viết hay hãy chia sẻ với những người thân, bạn bè biết.
» Vui lòng đăng những nhận xét lịch sự và gõ tiếng Việt có dấu.
» Những lời comment thiện ý của bạn sẽ giúp trang CDQTKD5A ngày một phát triển!