Hướng dẫn cụ thể cách làm menu hover

Bạn có thể xem mẫu quick menu dạng hover tại đây: [You must be registered and logged in to see this link.]

Menu hover hình thành dựa trên sự kết hợp của code CSS và HTML ... Bạn [You must be registered and logged in to see this link.]
đã 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
[You must be registered and logged in to see this link.]




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
[You must be registered and logged in to see this link.]




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.


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 -320px 0px;} #pt3{background:url([You must be registered and logged in to see this link.]) no-repeat -422px 0px;} #pt4{background:url([You must be registered and logged in to see this link.]) no-repeat -526px 0px;} #pt1:hover{background:url([You must be registered and logged in to see this link.]) no-repeat -0px -100px;} #pt2:hover{background:url([You must be registered and logged in to see this link.]) no-repeat -320px -100px;} #pt3:hover{background:url([You must be registered and logged in to see this link.]) no-repeat -422px -100px;} #pt4:hover{background:url([You must be registered and logged in to see this link.]) 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

Quote:

Link dẫn đến khi click vào menu1"> [You must be registered and logged in to see this link.]" border="0"> Link dẫn đến khi click vào menu2"> [You must be registered and logged in to see this link.]" border="0"> Link dẫn đến khi click vào menu3"> [You must be registered and logged in to see this link.]" border="0"> Link dẫn đến khi click vào menu4"> [You must be registered and logged in to see this link.]" 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.

From: [You must be registered and logged in to see this link.]