Tạo menu xổ ngang bẳng DreamWeaver 8

Thứ Hai, 4 tháng 6, 2012
Bài viết này sẽ kết hợp giữa CSS với DreamWeaver 8 để làm một cái menu xổ ngang màn hình mỗi khi di chuột qua.Hiệu ứng này bạn có thể thấy ở những trang web chuyên nghiệp.Để làm được nó bạn phải có kiến thức về JavaScript kha khá.Nhưng trong khuôn khổ bài viết này mình sẽ hướng dẫn các bạn làm đúng như thế mà không cần biết 1 tý gì về javascript vì ta hoàn toàn dùng công cụ trong Dreamweaver 8.

Mời các bạn xem trước kết quả

Photo of www.congtruongit.com

Phần 1 

Được rồi, ta bắt tay vào làm thôi.Đầu tiên bạn tạo mới 1 trang web trong Dreamweaver 8 , tạo mới xong bạn save vào luôn nha.
Bước thứ 1, mở code của trang đó lên , thêm đoạn mã CSS này vào(hoặc bạn có thể gõ bằng notepad rồi save lại với đuôi .css, rồi chèn vào trang bạn muón làm menu xổ ngang, đoạn code đó như sau )

Code cụ thể như sau

Mã PHP:
#menu{width:170px;background:#000;}#menu a{height25px;border-top#272727 1px solid;text-indent20px;padding-top2px;text-decorationnone;color#FFF;display:block;
}
#menu a:hover{border-top#484848 1px solid;}  
Tiếp theo ở phần body bạn gán thẻ
có id = menu .Để mình đưa source code của cả phần này ra để các bạn dễ hình dung nha

Mã PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<
title>Untitled Document</title>
<
style>#menu{width:170px;background:#000;}#menu a{height25px;border-top#272727 1px solid;text-indent20px;padding-top:2px;text-decorationnone;color#FFF; display:block;
}
#menu a:hover{border-top#484848 1px solid;}

</
style>
</
head>

<
body>
<
div id="menu">
<
a href="#">Home</a>
<
a href="#">Products</a>
<
a href="#">Downloads</a>
<
a href="#">Support</a>
</
div>
</
body>
</
html>  
Xong phần này các bạn sẽ được như hình sau 

Photo of www.congtruongit.com

Phần 2 :Thiết kế phần xổ ra ,trên thanh menu của DreamWeaver bạn chọn Window ----> Behaviors hoặc nhấn Shift + F4.Cửa sổ Behaviors hiện ra như sau

Photo of www.congtruongit.com

Quay lai với phần ta menu đang thiết kế của ta.Bạn hãy chọn phần muốn xổ ra ( ở đây là thẻ ).Chọn như hình
Photo of www.congtruongit.com

Tiếp theo cửa sổ showpoup-menu hiện ra .Nếu hiện ra 1 thông báo bạn hãy nhấn OK rồi tiếp theo cửa sổ như bên dướihiện ra.Để thêm trang khi xổ ra bạn chọn dấu + .muốn giảm đi chọn dấu trừ

Photo of www.congtruongit.com

Vẫn tiếp tục ở cửa sổ này,ta qua tab thứ 2 Appererance.Hãy cứ chọn như hình,khoan thắc mắc

Photo of www.congtruongit.com

Tab Advanced cũng chọn như hình

Photo of www.congtruongit.com

Xong bước này ta được như sau

Photo of www.congtruongit.com

Tuy nhiên như thế này khá là xấu và hiển thị chưa rõ ràng.Chúng ta cần thay đổi vị tríhiển thị của nó như sau

Photo of www.congtruongit.com

Ta sửa đổi thuộc tính hiển thị của menu sổ ra bằng cách thêm vào như hình trên,xong bước này thì ta đã thành công 8/10 rùi đó.Xem hình minh họa

Photo of www.congtruongit.com

Nhưng thế này thì vẫn chưa đẹp lắm.Giả sử chúng ta muốn thay đổi màu bên trong và thuộc tính đường viền của nó thì sao.Trong cửa sổ show-popup menu bạn hãy chọn qua lại giữa 2 tab Apprance và Advanced để thay đổi màu cũng như đường viền nhé.(phần này bạn tự làm cho nhớ).
Chú ý 1 điều là nếu làm sai, lỡ bấm ok rồi thì bạn vẫn có thể sửa lại bằng cách từ cửa sổ Behaviours bạn nhìn thấy bên dưới dấu + là 2 dòng chữ ,có chữ -show pupup va hide popup gì đó.Bạn chọn dòng thứ 2 click chuột phải---->edit--->cửa sổ show-popup menu lại hiện ra.Bạn lại có thể chỉnh sửa lại theo ý mình

Đây là kết quả cuối cùng của mình sau khi thêm chút mắm muối

Photo of www.congtruongit.com   

nguồn: congtrinhit.com
Xem thêm bài viết cùng chuyên mục:

Ý kiến bạn đọc [ 0 ]


Ý kiến của bạn