Cách làm menu Hover

Có 1 số cách để tạo menu như
- Sử dụng hình ảnh kèm link đặt trong module
- Hay phức tạp hơn là Chèn thêm mã css + id ảnh trong module


- 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 như sau:
(xin được lấy phiên bản mới nhất của [You must be registered and logged in to see this link.] làm ví dụ)

Như các bạn thấy ảnh sẽ thay đổi màu khi di chuyển chuột tới (đổi ảnh khác), ta cần làm 2 phần dưới đây

1. Chèn mã css:
Css của co0l.l0ve để hiển thị là:


Quote:

#pt1{background:url([You must be registered and logged in to see this link.]) no-repeat -0px 0px;} #pt2{background:url([You must be registered and logged in to see this link.]) no-repeat -213px 0px;} #pt3{background:url([You must be registered and logged in to see this link.]) no-repeat -374px 0px;} #pt4{background:url([You must be registered and logged in to see this link.]) no-repeat -537px 0px;} #pt1:hover{background:url([You must be registered and logged in to see this link.]) no-repeat -0px -101px;} #pt2:hover{background:url([You must be registered and logged in to see this link.]) no-repeat -213px -101px;} #pt3:hover{background:url([You must be registered and logged in to see this link.]) no-repeat -374px -101px;} #pt4:hover{background:url([You must be registered and logged in to see this link.]) no-repeat -537px -101px;} Trong đó

- Có pt1 - pt4 là tên selector mà chúng ta sẽ sử dụng trong module. (tùy chọn)
- Ảnh chưa hover : [You must be registered and logged in to see this link.]
- Ảnh đã hover cho từng menu
- Thiết lập vị trí cho từng ảnh

2. Nội dung module:


Quote:

<table style="padding:0px;"> <td style="padding:0px;"> <div id="pt1" style="height:101px;width:213px;"> <a href="http://vn.myblog.yahoo.com/cyvp_perfectlad200304"> <img src="https://2img.net/r/ihimizer/img27/5484/menuclickhome.gif" border="0"> </a> </div> </td> <td style="padding:0px;"><div id="pt2" style="height:101px;width:161px;"> <a href="http://vn.myblog.yahoo.com/cyvp_perfectlad200304/index?l=f&id=4"> <img src="https://2img.net/r/ihimizer/img249/7554/menuclickplus.gif" border="0"> </a> </div> </td> <td style="padding:0px;"> <div id="pt3" style="height:101px;width:163px;"> <a href="http://vn.myblog.yahoo.com/cyvp_perfectlad200304/index?l=f&id=17"> <img src="https://2img.net/r/ihimizer/img249/9914/menuclcikcss.gif" border="0"> </a> </div> </td> <td style="padding:0px;"> <div id="pt4" style="height:101px;width:383px;"> <a href="http://vn.myblog.yahoo.com/cyvp_perfectlad200304/index?l=f&id=16"> <img src="https://2img.net/r/ihimizer/img258/4328/menuclicktheme.gif" border="0"> </a> </div> </td> </tr> </table><center>

Trong đó:
- Id="pt1" (pt2, pt3...) là các tên selector mà ta đã đặt trong css
- Đường dẫn ảnh hover (ban nãy sử dụng)
- Link của thư mục (bài viết) cần tới.

Ố, ồ ...[You must be registered and logged in to see this link.] Như vậy là xong 1 cái menu ngon lành rùi.
[You must be registered and logged in to see this link.] Cộng thêm 1 chút khéo tay design nữa là blog hoành tráng hơn rất nhiều

Chúc bạn thành công [You must be registered and logged in to see this link.]