|
Đăng bởi Admin | 6/7/13 | 0 nhận xé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).
Mời bạn xem mẫu (bạn thử rê chuột vào một menu bất kỳ để xem hiệu ứng chuyển động). hiệu ứng rất đẹp và kiểu dáng khá bắt mắt,
Mời bạn xem mẫu (bạn thử rê chuột vào một menu bất kỳ để xem hiệu ứng chuyển động). hiệu ứng rất đẹp và kiểu dáng khá bắt mắt,
 |
| Ảnh minh họa |
Cách tiến hành:
ul#topnav {
margin: 0px 0 0px;
padding: 0;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 650px; /*do rong cua menu*/
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px; /*chieu cao cua menu*/
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
color: #fff; /*màu text cua 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/AVvXsEh9rD80P1zquUQgwOvMd1yMp9aSnMe3rG3WkFslBPKQRN00yyTy70hgGc7HPksmfbvTkozbawAKzUMsM12LGFDlMxOKecU9_GSNfeXaUewdBzdI3l81RV7LJ26mZq_Kti5WxHYMKkziFqzh/s1600/a_bg-namkna-blogspot.png) repeat-x left top; /*màu nen cua menu*/
}
ul#topnav.v2 a{
color: #555;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9rD80P1zquUQgwOvMd1yMp9aSnMe3rG3WkFslBPKQRN00yyTy70hgGc7HPksmfbvTkozbawAKzUMsM12LGFDlMxOKecU9_GSNfeXaUewdBzdI3l81RV7LJ26mZq_Kti5WxHYMKkziFqzh/s1600/a_bg-namkna-blogspot.png) repeat-x left bottom; /*màu nen cua menu*/
}
5. Dán đoạn code bên dưới vào sau thẻ <head> .
6. Lưu Template lại.
7. Bây giờ, bạn trở lại trang Thiết kế
8. Chọn Phần Tử trang
9. Chọn Thêm tiện ích =>HTML/Javacript
10. Dán đoạn code sau vào đó.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript" src="http://dl.dropbox.com/u/66256041/Menu/namkna-blogspot/ani_menu.js"></script>- Chú ý: Để sử dụng lâu dài bạn cần tải 2 file Js trên về tại đây và Upload lên host riêng để dùng lâu dài nha. Nếu chư có Host bạn tham khảo Bài này hoặc Bài này.
6. Lưu Template lại.
7. Bây giờ, bạn trở lại trang Thiết kế
8. Chọn Phần Tử trang
9. Chọn Thêm tiện ích =>HTML/Javacript
10. Dán đoạn code sau 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> </ul>
- Trong đó:
Sau khi thay đổi song các dòng màu đỏ và màu xanh bạn bấm lưu lại để xem thành quả.
- Dòng màu đỏ là URL liên kết tới bài viết, nhãn.
- Dòng Màu xanh là tên bài viết nhãn tương ứng
Chúc bạn thành công!
Theo: Namkna
Thư viện Tài liệu học tập
Ẩm thực Việt
Bàn về phong thủy
Namkna
Thư viện Tài liệu học tập 
Chính Trực Blog 
DautoCrazy.Blog 
Thư viện ảnh bìa
Tiền của tui
Caocongkien 360
Báo Tuổi Trẻ Đời Sống
CuoiS2
Không có nhận xét nào:
Đăng nhận xét
Cảm ơn bạn đã nhận xét !
Mã hóa Code- Bạn có thể chèn link vào nhận xét bằng thẻ: <a href="Link" rel="nofollow">Tên link</a>
- Tạo <b>Chữ đậm</b> và <i>Chữ ngiêng</i> cho nhận xét
- Hãy Chuyển đổi mã code trước khi chèn vào nhận xét
- Hãy bấm Theo dõi dưới chân trang để nhanh chóng nhận được phản hồi từ Thủ thuật vi tính
- Những nhận xét nào không lành mạnh hoặc chèn link spam sẽ bị xóa khỏi blog.