Tạo popup menu không cần JavaSript

Chia sẻ: Nguyen Phuc | Ngày: | Loại File: DOC | Số trang:10

Thêm vào BST

Báo xấu

187
lượt xem 19
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

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....

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Tạo popup menu không cần JavaSript

Tác giả : Khắc Nam softnd.com Chào các bạn !.Hôm nay mình sẽ tiếp tục loạt bài "Ứng dụng CSS cho thiết kế web" để bạn có thể hiểu được CSS quan trong như thế nào trong thiết kế và lập trình web. 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 Quote: #menu { width:170px; background:#000; } #menu a { height: 25px; bordertop: #272727 1px solid; textindent: 20px; paddingtop: 2px; textdecoration: none; color: #FFF; display:block; } #menu a:hover { bordertop: #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
Quote: Untitled Document #menu { width:170px; background:#000; } #menu a { height: 25px; bordertop: #272727 1px solid; textindent: 20px; paddingtop:2px; textdecoration: none; color: #FFF; display:block; } #menu a:hover { bordertop: #484848 1px solid; } Home Products Downloads Support
Xong phần này các bạn sẽ được như hình sau 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 Hình ảnh này đã được thu nhỏ lại. Hãy click vào đây để xem hình gốc. Kích thước của hình gốc là 935x577, dung lượng 44KB.
Tiếp theo cửa sổ showpoupmenu 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ổ showpopup 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ổ showpopup 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 Các bạn có thể xem demo ở đây http://users2.titanichost.com/khacnam47/postbai/bai2/demo_drop.html Tác giả : Khắc Nam softnd.com copy nhớ ghi tên tác giả các bạn cứ làm , có gì không hiểu thì hỏi mình