Thanh menu trong website đóng vai trò cực kỳ quan trọng đối với trải nghiệm người dùng và tối ưu hóa SEO. Khi bạn cung cấp một cấu trúc tổ chức rõ ràng và giúp người dùng dễ dàng tìm thấy thông tin cần thiết, thanh menu góp phần tăng cường khả năng duyệt website, giảm tỷ lệ thoát trang và tăng tỷ lệ chuyển đổi. Dưới đây sharcode sẽ hướng dẫn các bạn tạo menu ngang trong HTML và CSS với 5 bước đơn giản.
Bước 1: Tạo HTML Mark-up
Để bắt đầu việc tạo menu ngang trong HTML, bạn cần tạo một HTML mark-up với một liên kết đến file CSS bên ngoài (style.css) để áp dụng kiểu dáng cho menu.
Bước 2: Viết CSS cho Menu Division
Sau khi bạn đã tạo xong HTML mark-up cho menu, bước tiếp theo là viết CSS để định dạng cho phần menu division (phần bao bọc menu), giúp nó hiển thị đẹp và dễ sử dụng. Dưới đây là cách bạn có thể viết mã CSS cho #menu để tạo kiểu cho menu.
Trong phần xác định menu, kích thước chiều rộng được đặt là 900px và 100px chiều cao. Màu nền là màu đen, sáng hơn màu tiêu chuẩn (#000). Phần còn lại là xác định phông chữ, kích thước phông chữ và dùng CSS3 border-radius để tạo menu một đường cong nhỏ.
Kiểu dáng cho phần bao bọc menu:
+ width: 900px; /* Đặt chiều rộng của menu là 900px */
+ height: 100px; /* Chiều cao của menu là 100px */
+ background-color: #181818; /* Màu nền của menu là màu xám đen (sáng hơn màu đen tiêu chuẩn) */
+ font-family: Arial, sans-serif; /* Chọn phông chữ cho menu */
+ font-size: 16px; /* Kích thước font chữ */
+ text-align: center; /* Căn giữa các mục trong menu */
+ box-sizing: border-box; /* Đảm bảo padding và border không ảnh hưởng đến kích thước tổng thể */
+ border-radius: 10px; /* Làm bo tròn các góc của menu */
Ngoài việc tạo menu ngang trong HTML và CSS, bạn cũng có thể sử dụng các theme và plugin có sẵn để tạo menu mà không cần viết code. Điều này giúp bạn tiết kiệm thời gian và công sức trong quá trình xây dựng website. Có nhiều theme và plugin hỗ trợ tạo menu một cách dễ dàng thông qua giao diện trực quan.
Một số plugin và theme rất phổ biến hiện nay giúp bạn dễ dàng tạo và tùy chỉnh menu mà không cần phải viết mã thủ công như Elementor Pro, WP Astra, hay Mega Menu Plugin là cách tuyệt vời để nhanh chóng xây dựng và tùy chỉnh các menu đẹp mắt và thân thiện với người dùng trên website của bạn.
Bước 3: Thêm item vào menu
Để tạo menu item, chúng ta cần phải sử dụng thẻ danh sách không có thứ tự (unordered tag list). Hãy thêm phần sau vào trong HTML document giữa các menu division tag.
Để tạo liên kết cho các mục trong menu, bạn sử dụng thẻ <a> (anchor tag). Lúc đầu, bạn có thể sử dụng ký tự # trong thuộc tính href của thẻ <a> vì nó là một placeholder (vị trí tạm thời). Tuy nhiên, khi bạn muốn chuyển hướng người dùng đến các trang thực tế trên website, bạn cần thay thế # bằng URL của các trang trong website của bạn.
Bước 4: Tạo kiểu cho danh sách
Sau khi thêm xong code HTML, dù có vẻ ổn nhưng chưa được bắt mắt cho lắm, nhưng chúng ta có thể dùng code CSS menu ngang để thay đổi. Trong bước này, chúng ta sẽ tạo kiểu cho danh sách và các liên kết, giúp menu ngang CSS thêm sống động hơn.
Khi áp dụng CSS này, các mục trong menu sẽ hiển thị theo hàng ngang với khoảng cách giữa các mục. Các liên kết trong menu sẽ không có gạch chân và có màu chữ trắng. Khi người dùng di chuột qua các mục, nền của mục sẽ thay đổi và có bóng đổ, tạo hiệu ứng trực quan đẹp mắt.
Ví dụ về menu HTML kết hợp với CSS trên:
Bước 5: Tạo kiểu cho các liên kết
Mục tiêu là làm cho các liên kết trông hấp dẫn và dễ sử dụng hơn. Để làm điều này, chúng ta có thể điều chỉnh màu sắc, kiểu dáng, hiệu ứng khi hover, và thêm padding để tăng kích thước clickable của các mục.
Dưới đây là cách bạn có thể tạo kiểu cho các liên kết trong menu bằng CSS:
Ví dụ về HTML Menu kết hợp với CSS:
Cách tạo kiểu này không chỉ giúp menu của bạn đẹp mắt mà còn dễ sử dụng và thân thiện với người dùng
Như vậy là ta đã hoàn tất việc tạo menu ngang trong HTML, nhìn đơn giản nhưng vẫn đủ chuyên nghiệp. Bạn hoàn toàn có thể tạo thêm nhiều menu đẹp khác nữa bằng các code CSS và HTML. Chúc các bạn thành công!