Hôm nay, tôi Viettin365 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, 

Ảnh minh họa

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()  repeat-x left top; /*màu nen cua menu*/
 }
 ul#topnav.v2 a{
 color: #555;
 background:  url()  repeat-x left bottom; /*màu nen cua menu*/
 }

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

<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ả.

0 nhận xét

Write Down Your Responses