Namkna đã viết rất nhiều bài viết tạo drop menu cho web,blog... nhưng tất cả đều là code có sẵn mà chưa hướng dẫn chi tiết về cách làm nên hôm nay mình viết hướng dẫn này nhằm hỗ trợ mọi người tự thiết kế ra drop menu cho riêng mình. Bài viết này mình sẽ hướng dẫn tạo drop menu từ 1 đến 3 cấp. Tất nhiên khi đã hiểu rồi thì bạn muốn làm bao n.hiêu cấp cũng được.
Phần 1: Một số lưu ý trước khi bắt đầu:
1. Về CSS: Một số css mình sẽ sử dụng trong thủ thuật này:
display: đây là thuộc tính ẩn hiện menu con.
- display:none; ẩn module đi
- display:block; hiện module vào 1 block
- display:inline; xếp các module vào cùng hàng ngang (để tạo menu ngang)
margin: và padding: là 2 thuộc tính sắp xếp vị trí tương đối của các đối tượng với nhau
width: là thuộc tính qui định chiều rộng của module
ngoài ra còn 1 số thuộc tính css khác nữa để trang trí cho menu. Bạn có thể tìm hiểu chi tiết tại bài viết CSS căn bản
2. Để hỗ trợ cho việc tạo drop menu thì bạn nên tạo 1 file html để làm. Sau khi làm xong chỉ việc lấy code gắng vào template cho đỡ mất thời gian.
Việc cần làm là click chuột phải trên destop => New =>Text Document và đổi tên file đó thành menu.html
Dán đoạn code sau vào file menu.html để làm menu.
Đọc thêm »
{ 0 nhận xét... read them below or add one }
Đăng nhận xét