Menu hover hình thành dựa trên sự kết hợp của code CSS và HTML ... Bạn Quach-tm
đã có 1 bài hướng dẫn làm menu dạng này, nhưng có vẻ như 1 vài bạn còn
chưa hiểu được, nên hôm nay với tài mọn, akj sẽ hướng dẫn 1 cách cụ thể
hơn cách làm menu này, hi vọng có thể giúp dc các bạn. Bài hướng dẫn gồm
3 phần : sử dụng PTS làm menu hover, Code Css cho menu hover, code
HTML cho menu hover.

• Phần 1: Sử dụng PTS làm menu hover
  

( phần này các pro PTS cho akj múa rìu chút nha )


Đầu tiên, bạn mở PTS lên, set up 1 cái hình size 920 x 100 , rồi dùng
công cụ thước canh chỉnh vị trí menu của bạn cho đều.

Bước 1: Set up hình dạng các nút bấm
cho menu



Bước 2: Đổi màu hoặc làm sáng lên
bạn muốn khi rê chuột vào







Bước 3: Mở lại phần hình ban đầu,
kéo dài phần đuôi ra, có chiều cao = phần hình ban đầu





Bước 4: Thêm 1 layer mới tạo màu cho
phần nền trong suốt cho dễ nhìn





Bước 5: Chèn hình





Bước 6: Xóa phần không cần thiết để làm 4
phần hover cho menu







Xong các phần hình ảnh chính rồi, còn 1 phần nữa là làm hình lót cho các
nút bấm ( trong phần Code HTML bạn sẽ có giải thích phần này) . Bonus
cách làm hình trong suốt.



* Phần code CSS

Phần này vào Thiết kế/Theme/Tự chỉnh sửa/Dán đoạn code dưới đây vào
khung CSS, nhớ chỉnh thông số theo hình ảnh menu của bạn nha.






#pt1{background:url(https://2img.net/h/i672.photobucket.com/albums/v...quickmenu1.png)
no-repeat -0px 0px;}
#pt2{background:url(https://2img.net/h/i672.photobucket.com/albums/v...quickmenu1.png)
no-repeat -320px 0px;}
#pt3{background:url(https://2img.net/h/i672.photobucket.com/albums/v...quickmenu1.png)
no-repeat -422px 0px;}
#pt4{background:url(https://2img.net/h/i672.photobucket.com/albums/v...quickmenu1.png)
no-repeat -526px 0px;}

#pt1:hover{background:url(https://2img.net/h/i672.photobucket.com/albums/v...menuhover1.png)
no-repeat -0px -100px;}
#pt2:hover{background:url(https://2img.net/h/i672.photobucket.com/albums/v...menuhover2.png)
no-repeat -320px -100px;}
#pt3:hover{background:url(https://2img.net/h/i672.photobucket.com/albums/v...menuhover3.png)
no-repeat -422px -100px;}
#pt4:hover{background:url(https://2img.net/h/i672.photobucket.com/albums/v...menuhover4.png)
no-repeat -526px -100px;}






Note : Chú ý Bước 1 ở phần tạo ảnh

• Giải thích về các con số trong code CSS
-0px là điểm bắt đầu tức điểm S (không cần sửa)
0px (không cần sửa)
-320px là khoảng cách từ điểm S đến điểm A
-422px là khoảng cách từ điểm S đến điểm B
-526px là khoảng cách từ điểm S đến điểm C
100px là Chiều rộng của hình ban đầu bạn làm(quickmenu1)

•Giải thích về các link hình trong code CSS
Link hình quickmenu1 là hình ban đầu bạn làm
Các link hình menuhover1, 2, 3, 4 tương ứng với hiệu ứng của 4 nút bấm
khi rê chuột vào.

(Lưu ý sau khi click vào những link hình ảnh trong code, bạn nhìn thấy
ảnh thì bấm Ctrl+A để thấy dc phần ảnh trong suốt)

* Phần code HTML

Code này cho vào module tự tạo

Link dẫn đến khi click vào menu1"> https://2img.net/h/i672.photobucket.com/albums/v...nhlotmenu1.png" border="0">

style="height:100px;width:102px;"> Link dẫn đến khi click vào menu2"> https://2img.net/h/i672.photobucket.com/albums/v...nhlotmenu2.png" border="0">

Link dẫn đến khi click vào menu3"> https://2img.net/h/i672.photobucket.com/albums/v...nhlotmenu3.png" border="0">

Link dẫn đến khi click vào menu4"> https://2img.net/h/i672.photobucket.com/albums/v...nhlotmenu4.png" border="0">

Note: (chú ý Bước 1 của phần tạo ảnh)
•Giải thích về các con số ở code HTML
100px là chiều cao ban đầu của hình bạn làm
320 Là khoảng cách từ S đến A
102 Là khoảng cách từ A đến B ( Khoảng cách này khác với phần code CSS
nha)
104 Là khoảng cách từ B đến C
394 Là khoảng cách từ C đến E( Điểm kết thúc)

Nếu các bạn để ý thì sẽ thấy các con số có tổng là 920 tương đương với
chiều dài 1 module dài trong blog

•Giải thích về các link ảnh trong code HTML
Các link hình mang tên hinhlotmenu1, 2, 3, 4 là các hình trong suốt có
chiều cao bằng hình ban đầu bạn làm. ( nếu ko biết tạo hình trong suốt
thì có thể tham khảo bonus ở Phần tạo ảnh.)
Hinhlotmenu1: có chiều rộng là khoảng cách từ S đến A ( nếu là khoảng
cách này thì nó có giá trị là 320 , tương ứng với phần giải thích về các
con số ở trên)
Hinhlotmenu2: có chiều rộng là khoảng cách từ A đến B
Hinhlotmenu3: có chiều rộng là khoảng cách từ B đến C
Hinhlotmenu4: có chiều rộng là khoảng cách từ C đến E

(Lưu ý sau khi click vào những link hình ảnh trong code, bạn nhìn thấy
ảnh thì bấm Ctrl+A để thấy dc phần ảnh trong suốt)

Link dẫn đến: Cái này khỏi nói nha, thay đường link của bạn
muốn nó dẫn tới thôi



Kaka hơi bị nhức đầu 1 chút, nhưng làm dc 1 lần rồi thì mấy cái này làm
nhanh lắm, có thể làm = các tool khác của PTS, ở đây akj chỉ biết có mấy
cái công cụ thủ công thôi. Có thể thêm nhiều nút khác bằng cách thêm
vào 2 code pt5,pt6,,.... Nói chung là khác chi tiết rồi, hi vọng bài
hướng dẫn sẽ có ích cho bạn nào muốn làm quickmenu dạng này.