Tạo menu bằng HTML và CSS là trong những việc mà front-end dev nào cũng từng làm qua. Tuy nhiên đối với những bạn mới bắt đầu tìm hiểu thì có thể gặp đôi chút khó khăn. Vậy hãy cùng Miko Tech tìm hiểu 3 bước đơn giản để tạo menu trong HTML & CSS nhé. Show Bài viết này sẽ giúp bạn tạo thanh menu trong HTML & CSS đơn giản với 3 bước: Viết HTML, viết reset CSS và viết CSS cho từng dạng menu ngang và dọc. Bên cạnh đó, Miko Tech cũng sẽ hướng dẫn bạn tạo menu ngang và dọc có dropdown (đổ xuống). Tại sao cần tạo menu cho website?Đối với người truy cập các trang web thì 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 họ đang tìm kiếm. Menu trở thành một phần thiết yếu cho trải nghiệm người dùng và chiến lược website của cá nhân, doanh nghiệp. Menu cho phép người truy cập dễ dàng tìm thấy thông tin họ đang tìm kiếm.Lợi ích của menu mang lại còn nhiều hơn thế. Menu 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 cứ ngành nghề nào khác. Hệ thống điều hướng tốt sẽ giúp website có cơ hội được người truy cập duyệt website nhiều hơn và giảm tỷ lệ thoát trang. 👉Có thể bạn muốn biết thêm về: Mẹo chỉnh sửa & tạo menu cho website WordPress dễ hiểu Menu đa cấp là gì?Menu đa cấp hay menu xổ xuống (dropdown) 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 chỉ mục nhiều, khó sắp xếp trên giao diện thì menu đa cấp chính là sự 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ô,… 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,… Lợi ích của menu đa cấpMenu đ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 chỉ mục cần đặt lên giao diện website. Tạo menu đa cấp trong HTML giúp truyền tải nội dung hiệu quả đến người dùngChính vì thế, menu đa cấp là giải pháp hữu ích để nâng cao tính thẩm mỹ cho việc và tránh tình trạng khiến cho người dùng bị rối mắt. Nhà thiết kế website sẽ linh hoạt hơn trong thiết kế của mình. 👉 Xem thêm Các loại bố cục website chuẩn SEO đẹp trong thiết kế website 2023 Bước 1 – Viết HTML (cách tạo menu trong HTML)Để tạo được menu ngang, dọc bằng HTML và CSS, trước tiên chúng ta cần có phần code HTML. Với menu thì điều cơ bản cần có chính là việc tạo danh sách các mục cần có trong menu, chúng ta sẽ sử dụng thẻ
3 với id là
4. Trong đó, ta sẽ sử dụng thẻ
5 để tạo khu vực menu và
6 để tạo từng mục trong menu. Đoạn code HTML sẽ như bên dưới đây: Kết quả nhận được sau khi viết code HTML👉Đọc thêm về: Các loại bố cục website chuẩn SEO đẹp trong thiết kế website 2023 Bước 2: Viết CSS để có được một menu hoàn chỉnhĐầu tiên, để dễ dàng cho việc chỉnh viết CSS về sau, hãy thực hiện việc Reset CSS bằng đoạn code sau:
/==Style cơ bản cho website==/
body {
font-family: sans-serif;
color: 222;}
/==Style cơ bản cho website==/
body {
font-family: sans-serif;
color: 222;}
/==Style cơ bản cho website==/
body {
font-family: sans-serif;
color: 222;}
/==Style cơ bản cho website==/
body {
font-family: sans-serif;
color: 222;}
/==Style cho menu===/menu ul {background: 7FFFD4;list-style-type: none; text-align: center; }
/==Style cho menu===/menu ul {background: 7FFFD4;list-style-type: none; text-align: center; }
1
menu ul {background: 7FFFD4;list-style-type: none; text-align: center; }
/==Style cơ bản cho website==/
body {
font-family: sans-serif;
color: 222;}
/==Style cho menu===/menu ul {background: 7FFFD4;list-style-type: none; text-align: center; }
menu li {color: f1f1f1;display: inline-block; width: 120px; height: 40px; line-height: 40px; }
menu li {color: f1f1f1;float: left; width: 120px; height: 40px; line-height: 40px; }
menu ul {background: f1f1f1;list-style-type: none; overflow: hidden; width: 100%; }
/==Style cho menu===/menu ul {background: 7FFFD4;list-style-type: none; text-align: center; }
menu ul li a {color: f1f1f;text-decoration: none; display: block; }
/==Style cho menu===/menu ul {background: 7FFFD4;list-style-type: none; text-align: center; }
/==Style cho menu===/menu ul {background: 7FFFD4;list-style-type: none; text-align: center; }
/==Style cho menu===/menu ul {background: 7FFFD4;list-style-type: none; text-align: center; }
/==Style cho menu===/menu ul {background: 7FFFD4;list-style-type: none; text-align: center; }
menu ul li a:hover {background: F1F1F1;color: 0C0A0A;}
menu li {color: f1f1f1;display: inline-block; width: 120px; height: 40px; line-height: 40px; }
/==Style cơ bản cho website==/
body {
font-family: sans-serif;
color: 222;}
menu li {color: f1f1f1;display: inline-block; width: 120px; height: 40px; line-height: 40px; }
menu li {color: f1f1f1;display: inline-block; width: 120px; height: 40px; line-height: 40px; }
[html highlight=”6-10″]
<div id="menu">
<ul> </ul>
</div>
[/html]
/==Reset CSS==/
0 Đến đây bạn sẽ thấy menu con của mục Sản phẩm hiển thị như thế này: Kết quả của menu dropdown sau khi code cơ bản CSS và HTMLChính vì vậy, tiếp theo ta cần ẩn đi sub-menu và sẽ sử dụng vùng chọn thứ cấp liền nhau để sau này bạn sử dụng nhiều cái sub-menu bên trong thì bạn sẽ dễ dàng làm việc hơn.
menu li {color: f1f1f1;display: inline-block; width: 120px; height: 40px; line-height: 40px; }
menu li {color: f1f1f1;display: inline-block; width: 120px; height: 40px; line-height: 40px; }
/==Reset CSS==/
2 Và tiếp theo là cho cái
6 thành kiểu
7 để nó luôn luôn nằm trong phạm vi menu mẹ, tức là nằm trong
4 ấy. Chúng ta viết lại đoạn .sub-menu như sau: Tiếp theo, bạn cần cho cái .sub-menu thành kiểu absolute để nó luôn nằm trong phạm vi phần tử mẹ ( menu li). Đoạn code sẽ có dạng như sau:
/==Reset CSS==/
4 Đây chính là kết quả cuối cùng của menu ngang có dropdown! Thành quả code cuối cùng của menu ngang dropdown.Menu dọcSau 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
9 để chỉnh style bằng cách dùng thuộc tính
8, thêm màu nền, thuộc tính
1 và căn chỉnh bên lề trái.
/==Style cơ bản cho website==/
body {
font-family: sans-serif;
color: 222;}
menu li {color: f1f1f1;float: left; width: 120px; height: 40px; line-height: 40px; }
menu li {color: f1f1f1;float: left; width: 120px; height: 40px; line-height: 40px; }
menu li {color: f1f1f1;float: left; width: 120px; height: 40px; line-height: 40px; }
/==Reset CSS==/
6 Kết quả tạm thu được như sau: Menu dọc có được sau khi viết CSS cho thẻCuối cùng là viết CSS cho thẻ a 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. Cuối cùng, chúng ta sẽ tiến hành viết CSS cho thẻ
5 trong menu. 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. Ta sẽ có đoạn code như sau:
[html highlight=”6-10″]
<div id="menu">
<ul> </ul>
</div>
[/html]
/==Reset CSS==/
9 Kết quả thu được sẽ như hình ảnh sau đây: Menu dọc dropdown cơ bản sau khi viết HTML và CSS.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
4 về dạng display (hiển thị) kiểu relative. Đoạn code CSS sẽ trông như sau:
0 Kế tiếp, ta sẽ chuyển menu cấp 2 (tức 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ẹ.
1 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 code như sau:
2 Thành quả menu dọc dropdownĐể dễ hình dung hơn các bạn cũng có thể thám khảo thêm tại video bên dưới về cách tạo menu đa cấp trong html: 👉Để tiết kiệm thời gian lập trình hơn, cùng tham khảo bài: 10 code web mẫu đẹp mắt, miễn phí mà các lập trình viên nên có Trên đây, Miko Tech đã cùng bạn tìm hiểu về 3 bước đơn giản để tạo menu trong HTML & CSS kiểu ngang, dọc. Tóm lại, để tạo menu thì 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 sẽ dễ dàng tạo menu HTML kiểu ngang và dọc cho mình nhé! Trần Tiến Duy tốt nghiệp cử nhân chuyên ngành Thương Mại Điện tử tại trường đại học Sư Phạm Kỹ Thuật TPHCM. Từng Phụ trách mảng SEO Website tại nhiều lĩnh vực như giáo dục, công nghệ, thực phẩm, đồ dùng gia dụng, …v.v Trần Tiến Duy hiện đang là Giảng viên Digital Marketing với chuyên môn chính là SEO tại trường Cao Đẳng FPT Tp.HCM. Với hơn 5+ năm kinh nghiệm training & quản lý nhân sự về quản lý các dự án SEO/ Content SEO. Hiện tại Trần Tiến Duy là SEO Manager tại công ty Miko Tech Agency chuyên về Thiết Kế Website, với sự Quản lý của anh đã đưa Miko Tech trở thành công ty chuyên về Thiết Kế Website thuộc TOP ngành trên nền tảng Internet hiện nay. Ngoài ra anh Trần Tiến Duy còn đào tạo training nhân viênNgoài ra anh Trần Tiến Duy còn đào tạo training nhân viên khoá học SEO Website nội bộ cho Doanh nghiệp giúp Doanh Nghiệp phát triển kinh doanh mạnh mẽ hơn trong thời đại công nghệ số 4.0 hiện nay. Anh Trần Tiến Duy còn chia sẻ miễn phí những Tool SEO hiệu quả giúp anh em SEOer tiết kiệm thời gian và được rất nhiều anh em trong giới SEOer và sinh viên sử dụng tại website: trantienduy.com/tool/ |