Tạo menu bằng HTML và CSS là một trong những công việc mà tất cả front-end developer đều từng làm qua. Tuy nhiên, đối với những bạn mới bắt đầu tìm hiểu, có thể gặp một số khó khăn. Vì vậy, hôm nay, chúng ta sẽ cùng Miko Tech tìm hiểu 3 bước đơn giản để tạo menu trong HTML & CSS nhé.
Contents
Đối với người truy cập trang web, thanh menu (thanh điều hướng) rất quan trọng. Menu cho phép người truy cập nhanh chóng và dễ dàng tìm thấy thông tin mà họ đang tìm kiếm. Menu trở thành một phần thiết yếu trong trải nghiệm người dùng và chiến lược website của các cá nhân và doanh nghiệp.
Bạn đang xem: 3 bước tạo menu trong HTML & CSS kiểu ngang, dọc đơn giản
Lợi ích của menu còn nhiều hơn thế. Nó là yếu tố không thể thiếu khi thiết kế website du lịch, thiết kế website khách sạn hay bất kỳ ngành nghề nào khác. Hệ thống điều hướng tốt sẽ giúp website thu hút nhiều lượt truy cập hơn và giảm tỷ lệ thoát trang.
READ MORE:
Menu đa cấp là gì?
Menu đa cấp, hay còn gọi là menu xổ xuống (dropdown menu), là dạng menu cung cấp danh sách các tùy chọn, xuất hiện ở đầu trang web. Khi nhấp hoặc rê chuột vào mục hiển thị, các mục khác trong danh sách sẽ thả xuống để người dùng tùy chọn.
Đối với các website có số lượng mục nhiều và khó sắp xếp trên giao diện, menu đa cấp là lựa chọn thông minh. Kiểu menu này rất phù hợp khi thiết kế website nội thất, thiết kế website ô tô, v.v… bởi những website ngành nghề này cần cho khách hàng thấy được nhiều mẫu mã, kiểu dáng, v.v…
Menu đa cấp giúp người dùng có thể linh hoạt lựa chọn và thấy tất cả các mục trên website. Bên cạnh đó, người dùng còn dễ dàng điều hướng và tìm kiếm thông tin mình cần. Đồng thời, tạo menu đa cấp trong HTML còn giúp nhà thiết kế website truyền tải nội dung hiệu quả đến người dùng, đặc biệt là trong trường hợp có quá nhiều mục cần đặt lên giao diện website.
Chính vì thế, menu đa cấp là giải pháp hữu ích để nâng cao tính thẩm mỹ của việc thiết kế web và tránh tình trạng khiến cho người dùng bị rối mắt. Nhà thiết kế website cũng sẽ linh hoạt hơn trong thiết kế của mình.
Để tạo menu ngang hoặc dọc bằng HTML và CSS, trước tiên chúng ta cần viết mã HTML. Với menu, điều cơ bản cần có là tạo danh sách các mục trong menu. Chúng ta sẽ sử dụng thẻ Trong đó, chúng ta sẽ sử dụng thẻ Đầu tiên, để dễ dàng cho việc viết CSS sau này, chúng ta sẽ thực hiện việc Reset CSS bằng đoạn mã sau: Tiếp theo, chúng ta sẽ viết CSS cho phần “body” với đoạn mã sau: Đến đây, menu của bạn sẽ trông như thế này: READ MORE: Cùng tìm hiểu cách tạo menu ngang trong HTML & CSS ngay dưới đây nhé! Vì thẻ Xem thêm : Thử tài trí não với các bài toán tư duy logic Đoạn mã CSS dưới đây sẽ cho menu được căn giữa bằng thuộc tính Các bạn có thể lấy các mã màu tại htmlcolorcodes.com. Khi đến bước này, menu của chúng ta sẽ trông như thế này: Nhưng cái chúng ta cần là menu ngang, vậy tiếp theo cần phải làm gì? Để các mục con xếp thành hàng ngang, bạn có 2 sự lựa chọn: Sau đây là đoạn mã CSS cho kiểu inline block: Với thuộc tính Với kiểu float, sau đây là đoạn mã CSS: Nếu bạn dùng kiểu float, cần phải thêm một vài thuộc tính cho Sau khi xếp các mục thành hàng ngang bằng 2 cách trên, cuối cùng ta sẽ trang trí menu bằng cách thêm style cho thẻ Thuộc tính Kết quả cuối cùng sẽ như sau: Nếu bạn muốn trong mục Sản phẩm sẽ có các menu con, thì sẽ phải làm như thế nào? Sau đây sẽ là phần code tạo dropdown menu trong HTML để bạn tham khảo. Đầu tiên, bạn cần viết HTML, việc này tương tự bước 1 nhưng có chút khác bởi vì bạn cần bổ sung thêm thẻ Tiếp theo, bạn sẽ viết CSS cho menu: Kết quả thu được sẽ như hình ảnh sau đây: Sau khi bạn đã thực hiện xong bước 1 và bước 2, ta sẽ đến phần cách tạo menu dọc trong HTML. Đầu tiên, chúng ta sẽ thêm CSS vào Xem thêm : Bảng quy đổi điểm VSTEP sang điểm IELTS, TOEIC, TOEFL,… Đến đây, kết quả sẽ hiển thị như sau: Tiếp theo, ta sẽ viết CSS cho các thẻ Kết quả tạm thu được như sau: Cuối cùng là viết CSS cho thẻ Cuối cùng, chúng ta sẽ tiến hành viết CSS cho thẻ Đây là kết quả thu được sau khi hoàn thành việc tạo menu dọc: Ví dụ rằng bây giờ bạn muốn ở mục Sản phẩm sẽ có thêm vài menu con nữa thì cần phải làm gì? Dưới đây sẽ là phần hướng dẫn để tạo menu dropdown trong HTML. Đầu tiên sẽ tương tự như bước 1 nhưng sẽ có một chút khác bởi vì bạn cần phải thêm một số thẻ để tạo sub-menu (menu con). Tiếp theo, ta sẽ đến bước tiếp theo là viết CSS cho menu: Kết quả thu được sẽ như hình ảnh sau đây: Lúc này, các mục con trong mục Sản phẩm đang bị lỗi hiển thị. Vì thế, chúng ta cần bổ sung phần code CSS bằng cách đưa Kế tiếp, ta sẽ chuyển menu cấp 2 (tức Mặc dù, đến đây đã có menu dropdown rồi, nhưng bạn muốn là khi rê chuột đến thì menu con mới hiện ra thì sẽ thực hiện với đoạn mã như sau: Đây chính là kết quả cuối cùng của menu dọc có dropdown! Tóm lại, qua bài viết này, bạn đã tìm hiểu về 3 bước đơn giản để tạo menu trong HTML & CSS kiểu ngang và dọc. Tóm lại, để tạo menu, bước đầu tiên là viết HTML, bước 2 là viết reset CSS và bước 3 là viết CSS theo từng loại menu ngang/dọc. Hy vọng rằng bài viết này đã giúp cho các bạn mới tiếp xúc với HTML & CSS dễ dàng tạo menu kiểu ngang và dọc cho mình nhé! Nguồn: https://ispacedanang.edu.vnmenu để tạo menu.
để tạo từng mục trong menu. Đoạn mã HTML sẽ như sau:
/* Reset CSS */
* {
margin: 0;
padding: 0;
}/* Style cơ bản cho website */
body {
font-family: sans-serif;
color: #222;
}
Menu ban đầuBước 3 – Viết CSS cho từng dạng Menu ngang/dọc
Menu ngang
list-style-type để xóa đi những dấu chấm này. Đồng thời, ta cũng sẽ đổi màu nền cho menu bằng thuộc tính background-color.text-align để menu được đặt giữa sẽ đẹp hơn. Đoạn CSS sẽ như sau:/* Style cho menu */
#menu ul {
background: #7FFFD4;
list-style-type: none;
text-align: center;
}
Menu ngang
display) inline-blockfloat: left cho tất cả thẻ Cách 1: Kiểu inline block
#menu li {
color: #f1f1f1;
display: inline-block;
width: 120px;
height: 40px;
line-height: 40px;
}color, mã màu #f1f1f1 sẽ cho ra màu trắng. Tiếp theo sẽ thêm thuộc tính width (chiều rộng) và height (chiều cao). Lúc này, các mục vẫn chưa được căn giữa, vì vậy cần bổ sung thuộc tính line-height với giá trị bằng height để các mục con đứng giữa block. Kết quả sẽ như hình dưới đây:
Menu ngang với kiểu hiển thị inline blockCách 2: Kiểu float
#menu li {
color: #f1f1f1;
float: left;
width: 120px;
height: 40px;
line-height: 40px;
}#menu ul như sau:#menu ul {
background: #f1f1f1;
list-style-type: none;
overflow: hidden;
width: 100%;
} như sau:#menu ul li a {
color: #f1f1f;
text-decoration: none;
display: block;
}text-decoration là thuộc tính làm cho mục con trong menu có đường gạch dưới, vì thế để mất đi đường gạch chân, ta sẽ để “none”. Quan trọng nhất là đặt kiểu hiển thị (display) cho các thẻ này thành “block” để chúng phủ kín cái #menu ul.
Menu ngang cuối cùng
sub-menu để tạo menu con trong HTML./* Style cho menu */
body {
font-family: sans-serif;
color: #222;
}
#menu ul {
background: #7FFFD4;
width: 250px;
padding: 0;
list-style-type: none;
text-align: left;
}
#menu li {
width: auto;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #282828;
padding: 0 1em;
}
#menu li a {
text-decoration: none;
color: #0C0A0A;
font-weight: bold;
display: block;
}
#menu li:hover {
background: #f1f1f1;
}
Menu ngang có dropdownMenu dọc
#menu ul để chỉnh style bằng cách dùng thuộc tính list-style-type, thêm màu nền, thuộc tính padding và căn chỉnh bên lề trái.#menu ul {
background: #7FFFD4;
width: 250px;
padding: 0;
list-style-type: none;
text-align: left;
}
Menu dọc, ta sẽ thêm chiều cao (height) và thêm khoảng cách giữa các dòng (line-height) bằng với chiều cao để mục con đứng giữa block. Sau đó, ta sẽ thêm thuộc tính border-bottom để định dạng đường viền.#menu li {
width: auto;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #282828;
padding: 0 1em;
}
Menu dọc với style căn chỉnh và đường viền bên trong menu, chuyển nó qua thành block và thêm các style cần thiết, đồng thời tạo thêm hiệu ứng background khác khi rê chuột vào mục menu. trong menu. Chúng ta sẽ chuyển sang block, thêm style, loại bỏ gạch chân, in đậm cho chữ và thêm hiệu ứng khi rê chuột vào. Chúng ta sẽ có đoạn mã như sau:#menu li a {
text-decoration: none;
color: #0C0A0A;
font-weight: bold;
display: block;
}
#menu li:hover {
background: #f1f1f1;
}
Menu dọc cuối cùngMenu dọc có dropdown (đổ xuống)
body {
font-family: sans-serif;
font-size: 15px;
}
#menu ul {
background: #7FFFD4;
width: 250px;
padding: 0;
list-style-type: none;
text-align: left;
}
#menu li {
width: auto;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #282828;
padding: 0 1em;
}
#menu li a {
text-decoration: none;
color: #0C0A0A;
font-weight: bold;
display: block;
}
#menu li:hover {
background: #f1f1f1;
}
Menu dọc có dropdown#menu li về dạng hiển thị kiểu relative. Đoạn code CSS sẽ trông như sau:#menu ul li {
position: relative;
}#menu .sub-menu) về dạng absolute, chỉnh vị trí thụt sang bên trái với giá trị 250px bằng với chiều rộng của menu và đồng thời đưa về độ cao bằng phần tử mẹ.#menu .sub-menu {
position: absolute;
left: 250px;
top: 0;
}#menu .sub-menu {
position: absolute;
left: 250px;
top: 0;
display: none;
}
#menu li:hover .sub-menu {
display: block;
}
Danh mục: Học tậpRelated articles
