Menu được sử dụng để tạo điều kiện thuận lợi cho người dùng điều hướng qua các phần trên trang web. Để thu hút sự chú ý của khách truy cập, menu phải có chức năng, dễ sử dụng và đồng thời được kết hợp với thiết kế của toàn bộ nguồn lực.
Hướng dẫn
Bước 1
Trước khi tạo menu, hãy quyết định loại của nó. Bạn có thể tạo một hộp thả xuống theo chiều ngang hoặc chiều dọc sẽ được hiển thị cho người dùng khi người dùng di chuột qua hộp đó bằng con trỏ chuột. Khi chọn một menu cụ thể, bạn có thể được hướng dẫn về mức độ thuận tiện cho khách sử dụng và cách kết hợp với thiết kế.
Bước 2
Sau khi chọn loại menu, hãy mở tệp trang của bạn bằng bất kỳ trình soạn thảo văn bản nào bạn sử dụng để chỉnh sửa HTML. Điều hướng đến phần mã mong muốn nơi bạn muốn chèn phần tử giao diện của mình.
Bước 3
Sau đó, tạo danh sách các tùy chọn bằng cách tạo một khối và tạo một danh sách được đánh số với id được gán cho nó. Ví dụ:
- Liên kết 1
- Liên kết 2
- Liên kết 3
Trong ví dụ này, tôi đã tạo một danh sách ba phần tử có dấu đầu dòng và đặt nó trong một lớp div với ID bảng điều khiển ID.
Bước 4
Đi tới khối phần của trang của bạn và tạo menu trang tính kiểu xếp tầng thích hợp. Nếu bạn muốn tạo menu ngang, bạn có thể bao gồm thuộc tính nội tuyến cho danh sách kết quả:
#panel ul li {display: inline; }
Bước 5
Để tạo một đường ngang dọc theo toàn bộ chiều dài của trang, bạn có thể sử dụng mã sau:
#panel ul {margin-left: 0; đệm: 2px 0; }
Bước 6
Sau đó, bạn có thể thực hiện phân chia trực quan thành các hình chữ nhật:
#panel ul li a {margin-left: 3px; đường viền: 1px; đệm: 2px 3px; nền: xanh lam; }
Mã này đặt thụt lề văn bản từ các phần tử đường viền thông qua các thuộc tính margin-left và padding, đồng thời đặt màu nền cho từng mục trong danh sách. Trong ví dụ này, màu là xanh lam, nhưng bạn có thể thay đổi theo ý mình.
Bước 7
Để trỏ đến mục trên trang hiện tại được chọn trong tab, hãy đặt các tham số thích hợp cho lớp đang mở:
#menu ul li a # open {background: red; viền-dưới: 1px; }
Trang hiện tại được chọn trong bảng sẽ được hiển thị bằng màu đỏ.
Bước 8
Lưu các thay đổi vào tệp và kiểm tra chức năng của mã đã viết bằng cách mở trang của bạn thông qua trình duyệt. Để đặt các tùy chọn hiển thị bổ sung, bạn luôn có thể thêm CSS hoặc HTML để nâng cao hình thức của đối tượng.
