Menu là một phần không thể thiếu trên mọi website. Nó là một tập hợp các liên kết được tùy chỉnh cho phép người dùng điều hướng từ trang này sang trang khác. Một số trang web có menu ở đỉnh trang, trong khi các trang khác có thể đặt ở bên phải hoặc bên trái. Trong bài viết này, Thiết kế web DC sẽ hướng dẫn bạn tạo menu ngang trong HTML và CSS với 5 bước đơn giản.
Tạo menu cho website có quan trọng không?
Việc tạo menu cho website có vai trò quan trọng không? Menu, hay thanh điều hướng, đóng một vai trò vô cùng quan trọng đối với trải nghiệm người dùng trên các trang web. Nó cung cấp cho người dùng khả năng dễ dàng và nhanh chóng tìm kiếm thông tin trên trang web.
Bằng cách đặt các liên kết tới các trang và danh mục quan trọng trên thanh menu, người dùng có thể dễ dàng điều hướng trên trang web. Thanh menu tạo ra một cấu trúc tổ chức cho trang web, giúp người dùng xác định và truy cập nhanh chóng vào các trang hoặc danh mục mà họ quan tâm.
Một hệ thống điều hướng tốt có thể mang lại nhiều lợi ích quan trọng như tăng cơ hội duyệt website, giảm tỷ lệ thoát trang, cải thiện trải nghiệm người dùng và tăng khả năng tương tác.
Với những lợi ích này, có thể thấy rằng một hệ thống menu tốt không chỉ giúp người dùng dễ dàng tìm kiếm thông tin, mà còn tăng cơ hội duyệt qua nhiều trang và giảm tỷ lệ thoát trang. Điều này góp phần quan trọng vào trải nghiệm người dùng và thành công của chiến lược website.
Để làm cho phần menu trên trang web thêm sinh động và hấp dẫn, bạn cũng có thể thêm icon vào menu WordPress.
Tạo menu ngang trong HTML và CSS với 5 bước đơn giản
Bước 1: Khai báo HTML
Để bắt đầu, ta cần tạo một cấu trúc HTML đơn giản cho menu ngang bằng cách liên kết đến tệp style bên ngoài (style.css), cùng với một phần tử <div> có id là “menu”.
<html>
<head>
<title>Horizontal Menu</title>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
</head>
<body>
<div id=”menu”></div>
</body>
</html>
Bước 2: Viết CSS cho Menu Division
Sau khi khai báo HTML, ta cần viết CSS cho phần tử “menu” để tạo kiểu cho menu.
#menu {
width: 900px;
border: 1px solid #000;
height: 100px;
background-color: #181818;
font-family: Helvetica, sans-serif;
font-size: 13px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
Bước 3: Thêm các mục vào menu
Để thêm các mục vào menu, sử dụng thẻ danh sách không có thứ tự (ul) và thẻ mục (li), với mỗi mục là một liên kết (a).
<div id=”menu”>
<ul>
<li><a href=”#”>Trang chủ</a></li>
<li><a href=”#”>Dịch vụ</a></li>
<li><a href=”#”>Sản phẩm</a></li>
<li><a href=”#”>Giới thiệu</a></li>
<li><a href=”#”>Liên hệ</a></li>
</ul>
</div>
Bước 4: Tạo kiểu cho danh sách
Dùng CSS để tạo kiểu cho danh sách, biến danh sách từ dạng dọc thành dạng ngang.
#menu ul {
margin-top: 42px;
}
#menu ul li {
list-style-type: none;
display: inline;
margin-left: 50px;
}
Bước 5: Tạo kiểu cho các liên kết
Cuối cùng, tạo kiểu cho các liên kết trong menu.
#menu ul li a:link,
#menu ul li a:visited {
color: #FFF;
text-decoration: none;
text-transform: uppercase;
padding-top: 40px;
padding-bottom: 40px;
padding-left: 20px;
padding-right: 20px;
}
#menu ul li a:hover {
color: #FFF;
background-color: #81B101;
-webkit-box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.93);
-moz-box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.93);
box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.93);
}
Đó là quy trình tạo menu ngang đơn giản với HTML và CSS.
Xem thêm: 5 bước thiết kế Landing Page đơn giản và hiệu quả
Đã hoàn thành việc tạo menu ngang trong HTML. Dù đơn giản nhưng vẫn đảm bảo chuyên nghiệp. Bạn có thể tạo ra nhiều menu đẹp khác nhau bằng cách sử dụng mã CSS và HTML. Chúc các bạn thành công!Đã hoàn thành việc tạo menu ngang trong HTML. Dù đơn giản nhưng vẫn đảm bảo chuyên nghiệp. Bạn có thể tạo ra nhiều menu đẹp khác nhau bằng cách sử dụng mã CSS và HTML. Chúc các bạn thành công!
Thông tin liên hệ
833 Lê Hồng Phong, Phường 12, Quận 10, TP. HCM
- Tầng 2, Số 87 Phan Huy Ích, Phường 15, Quận Tân Bình, TP. HCM
- 9/6/1, 97 Thạnh Xuân 24, Thạnh Xuân, Quận 12, TP. HCM
- Tầng 2, Số 22, Đường Số 12, Cityland Park Hills, Phường 10, Q. Gò Vấp, TP. HCM
- Số 34, Lê Trọng Tấn, Khương Mai, Thanh Xuân, Hà Nội
- 29 Hoàng Hoa Thám, Đồng Xoài, Bình Phước
- Tầng 2, 137 Đường Phú Lợi, Phường Phú Lợi, TP. Thủ Dầu Một, Bình Dương
- 27/6E Yersin, P.10, TP. Đà Lạt
- 356 Hoàng Diệu, P. Thành Công, Thành phố Buôn Ma Thuột, Đắk Lắk
- 95A Nguyễn Ái Quốc, Tân Phong, Thành phố Biên Hòa, Đồng Nai
- Phòng 17, Tầng 14, Melody Vũng Tàu, 149 Võ Thị Sáu, Phường 2, TP. Vũng Tàu, Bà Rịa – Vũng Tàu
0886 799 977
0563 035 555
