Làm Menu Hover.

[YoungSik]

Có 1 số cách để tạo menu như

- Sử dụng hình ảnh kèm link đặt trong module

[Chỉ có thành viên mới có thể thấy Link ]
Menu Blog Kem


[Chỉ có thành viên mới có thể thấy Link ]
Menu blog nhokkhi

- Hay phức tạp hơn là Chèn thêm mã css + id ảnh trong module

[Chỉ có thành viên mới có thể thấy Link ]
Menublog coollove

- Phức tạp hơn nữa là sử dụng flash (cái nì không nói tới nhé, vì ít ng thiết kế được flash)

Cách thứ nhất có ưu điểm hơn là có thể tạo hiệu ứng hover tạo cảm giác động, chân thật hơn.

Xin hướng dẫn cách thứ nhất giống như của cool.love như sau:

1. Chèn mã css:

#pt1{background:url(http://img36.imageshack.us/img36/5728/bgduoichuahover.jpg) no-repeat -0px 0px;}
#pt2{background:url(http://img36.imageshack.us/img36/5728/bgduoichuahover.jpg) no-repeat -213px 0px;}
#pt3{background:url(http://img36.imageshack.us/img36/5728/bgduoichuahover.jpg) no-repeat -374px 0px;}
#pt4{background:url(http://img36.imageshack.us/img36/5728/bgduoichuahover.jpg) no-repeat -537px 0px;}

#pt1:hover{background:url(http://img38.imageshack.us/img38/2833/menuhome.png) no-repeat -0px -101px;}
#pt2:hover{background:url(http://img118.imageshack.us/img118/6198/menuplus.png) no-repeat -213px -101px;}
#pt3:hover{background:url(http://img38.imageshack.us/img38/1645/menucss.png) no-repeat -374px -101px;}
#pt4:hover{background:url(http://img22.imageshack.us/img22/2006/menutheme.png) no-repeat -537px -101px;}

2. Nội dung module:

<table style="padding:0px;">
<td style="padding:0px;">
<div  id="pt1" style="height:101px;width:213px;">
<a  href="Link của thư mục (bài viết) cần tới">
<img  src="http://img27.imageshack.us/img27/5484/menuclickhome.gif"  border="0">
</a>
</div>
</td>
<td  style="padding:0px;"><div id="pt2"  style="height:101px;width:161px;">
<a  href="Link của thư mục (bài viết) cần tới">
<img  src="http://img249.imageshack.us/img249/7554/menuclickplus.gif"  border="0">
</a>
</div>
</td>

<td  style="padding:0px;">
<div id="pt3"  style="height:101px;width:163px;">
<a  href="Link của thư mục (bài viết) cần tới">
<img  src="http://img249.imageshack.us/img249/9914/menuclcikcss.gif"  border="0">
</a>
</div>
</td>

<td  style="padding:0px;">
<div id="pt4"  style="height:101px;width:383px;">
<a  href="Link của thư mục (bài viết) cần tới">
<img  src="http://img258.imageshack.us/img258/4328/menuclicktheme.gif"  border="0">
</a>
</div>
</td>
</tr>
</table><center>

Bản quyền CoolLove's Blog