- Trang Chủ
- Diễn Đàn
- Công Nghệ Web
- Java / JavaScript / JSP
- Menu
-
Hướng Dẫn Làm Menu Xổ Ra Bằng DreamWeaver 8
.gif)
-‘๑’-ღ- 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ả
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
Tiếp theo ở phần body bạn gán thẻMã PHP:#menu
{
width:170px;
background:#000;
}
#menu a
{
height: 25px;
border-top: #272727 1px solid;
text-indent: 20px;
padding-top: 2px;
text-decoration: none;
color: #FFF;
display:block;
}
#menu a:hover
{
border-top: #484848 1px solid;
}
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
Xong phần này các bạn sẽ được như hình sauMã 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
{
height: 25px;
border-top: #272727 1px solid;
text-indent: 20px;
padding-top:2px;
text-decoration: none;
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>
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
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
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ừ
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
Tab Advanced cũng chọn như hình
Xong bước này ta được như sau
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
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
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
Thay đổi nội dung bởi: rongcon, 31-03-2008 lúc 10:46 PM
There are currently 1 users browsing this thread. (0 members and 1 guests)
ko biết tại sao nữa
Nguyên văn bởi congtu89enet
.gif "Khi (32)")
thank các bạn nha 
