» » Tạo Menu ngang có hiệu ứng khi rê chuột

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

Người đăng: ngaybennhau on Thứ Năm, 11 tháng 4, 2013


Tạo Menu ngang có hiệu ứng khi rê chuột đẹp dành cho blogspot
Hôm nay, tôi JM ( QuangViệtmkt) 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, 

Tạo Menu ngang có hiệu ứng khi rê chuột
Ảnh minh họa
Cách tiến hành:
  1. Bạn Đăng nhập vào Blog 
  2. Chọn Thiết kế 
  3. Chọn Chỉnh sửa HTML
  4. Dán đoạn code sau vào bên trên thẻ  ]]></b:skin> .
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/AVvXsEglVOdspyVaJ9pjeCKLAXukS_qzYL6eJimM4AebWIVnWt3-dyfYi3q5ClPHhJekoJxMdIhr4WMRhmORbN5fAALu6x6TLvOz5BuAhHYxNiqzR4ujyAGXYfv_Q1M1LcU4O74VyD_rtAAVbfA6/s1600/a_bg-quangvietmkt-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/AVvXsEglVOdspyVaJ9pjeCKLAXukS_qzYL6eJimM4AebWIVnWt3-dyfYi3q5ClPHhJekoJxMdIhr4WMRhmORbN5fAALu6x6TLvOz5BuAhHYxNiqzR4ujyAGXYfv_Q1M1LcU4O74VyD_rtAAVbfA6/s1600/a_bg-quangvietmkt-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> .
<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>
      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 đó:  
  • 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
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ả.
vào lúc 00:46
Nhãn: , , ,

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


Đăng nhận xét