Bài viết này sẽ đề cập đến việc tạo menu CSS bằng các thẻ Div HTML. Nó sẽ chứng minh chức năng bằng cách đưa ra một số ví dụ với các loại menu khác nhau.
1. Giới thiệu:
1.1 Sự cần thiết menu:
Menu của một trang web khó có thể giữ nguyên trong thời gian dài – các trang web có xu hướng phát triển và thay đổi khi chức năng được thêm vào và cơ sở người dùng tăng lên, vì vậy bạn nên tạo menu có phạm vi cho các mục menu được thêm vào và xóa khi trang web tiến triển và để các menu được dịch sang các ngôn ngữ khác nhau (vì vậy các liên kết sẽ thay đổi về độ dài). Ngoài ra, bạn có thể thấy mình đang làm việc trên các trang web nơi HTML cho menu được tạo động bằng các ngôn ngữ phía máy chủ thay vì HTML tĩnh. Tuy nhiên, điều này không có nghĩa là biết HTML sẽ trở nên lỗi thời; nó thực sự sẽ trở nên quan trọng hơn, vì kiến thức này vẫn cần thiết để tạo các mẫu HTML cho tập lệnh phía máy chủ để điền vào.
1.2 Các loại menu:
Có một số loại menu bạn sẽ được gọi để tạo trong HTML khi bạn làm việc trên các trang web khác nhau. Hầu hết trong số này có thể được tạo bằng danh sách, mặc dù đôi khi các hạn chế về giao diện buộc bạn phải sử dụng thứ gì đó khác . Các menu dựa trên danh sách mà bạn có thể sẽ tạo như sau:
- Điều hướng trong trang: Ví dụ: mục lục cho một trang, với các liên kết trỏ đến các phần khác nhau trên trang.
- Điều hướng trang web: Thanh điều hướng cho toàn bộ trang web của bạn (hoặc một phần phụ của nó), với các liên kết trỏ đến các trang khác nhau trên cùng một trang web.
- Điều hướng theo ngữ cảnh-nội dung: Danh sách các liên kết trỏ đến các trang có liên quan chặt chẽ đến chủ đề của trang mà bạn hiện đang truy cập, trên cùng một trang hoặc trên các trang khác nhau.
- Sơ đồ trang web: Danh sách lớn các liên kết trỏ đến tất cả các trang khác nhau của trang web, được nhóm thành các danh sách con có liên quan để làm cho chúng dễ hiểu hơn.
- Phân trang: Các liên kết trỏ đến các trang khác tạo nên các phần hoặc các phần khác của tổng thể, cùng với trang hiện tại, ví dụ: phần 1, phần 2 và phần 3 của một bài báo.
2. Cách tạo Menu cơ bản:
Hướng dẫn này sẽ giải quyết vấn đề thiết kế menu trong CSS. Bạn biết rằng một trong những phần quan trọng nhất của trang web là menu điều hướng, đây là phần trang trí và tương tác của trang.
Chúng ta sẽ bắt đầu thiết kế menu bằng cách tạo một đoạn mã với thẻ div. Thẻ div sẽ chứa id điều hướng. Menu điều hướng luôn yêu cầu mã HTML chuẩn như một công cụ cơ bản để thiết kế menu. Trong tập lệnh sau, chúng tôi sẽ sử dụng thẻ div, thẻ <ul> và <li> và tạo các tùy chọn menu.
Tập lệnh được liệt kê sau sẽ hiển thị menu dọc đơn giản với menu phụ, tổng hợp ý tưởng cơ bản về thiết kế menu.
Ví dụ: Tập lệnh của Menu dọc và Menu con
<html> <head> <title> Ví dụ về Menu HTML </title> </head> <body> <div id = "navigation"> <ul> <li> <a href="#"> Tin tức </a> <ul> <li> Công Nghệ </li> <li> Thời Sự </li> <li> Thể Thao </li> <li> Chứng Khoán </li> </ul> </li> <li> <a href="#"> Công nghệ </a> <ul> <li> CNTT / Phần mềm </li> <li> Phần cứng </li> <li> Iphone </li> <li> AI</li> </ul> </li> <li> <a href="#"> Thể thao </a> <ul> <li> Bóng đá </li> <li> Quần vợt </li> <li> Cầu lông </li> <li> Bóng rổ </li> </ul> </li> <li> <a href="#"> Quốc Gia </a> <ul> <li> Ấn Độ </li> <li> Shree lanka </li> <li> Việt Nam</li> <li> Anh </li> </ul> </li> </ul> </div> </body> </html>[codepen_embed height=”265″ theme_id=”dark” slug_hash=”yLJxVYa” default_tab=”html,result” user=”davidkhai”]See the Pen yLJxVYa by DavidKhai (@davidkhai) on CodePen.[/codepen_embed]
Kết quả ta được menu đơn giản với menu con được tạo bởi thẻ div chứa 4 menu chính và 16 menu con (4 menu con cho mỗi menu chính) và chúng tôi đã sử dụng HTML chuẩn làm đường cơ sở. Trong ví dụ này, chúng ta có thể xóa dấu đầu dòng, lề và phần đệm khỏi danh sách.
3. Menu Ngang:
Phần này chứa mô tả của menu tuyến tính (menu ngang). Trong đó các phần tử “li” sẽ được hiển thị dưới dạng các phần tử nội dòng, điều này buộc danh sách phải nằm trong một dòng. Phần tử “ul” có chiều rộng đầy đủ và mỗi siêu kết nối trong danh sách có chiều rộng là 10px. Ngoài ra, chúng tôi đã thêm một số màu để làm cho nó tương tác Ví dụ: Tập lệnh của Menu ngang và Menu con
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title>Ví dụ về menu trong HTML</title>
<style type="text/css">
ul {
list-style-type:none;
margin:1;
padding:1;
padding-top:7px;
padding-bottom:5px;
}
li {
display:inline-block;
margin-top: 15px;
}
a:link,a:visited {
font-weight:bold;
color:#CC3DD;
background-color:#90EE90;
text-align:center;
padding:6px;
text-decoration:italic;
text-transform:uppercase;
}
a:hover,a:active{
background-color:#FF1493;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#News">Tin Tức</a>
</li>
<li>
<a href="#Technology">Công Nghệ</a>
</li>
<li>
<a href="#Sports">Thể Thao</a>
</li>
<li>
<a href="#Country">Quốc Gia</a>
</li>
<li>
<a href="#Video">Video</a>
</li>
<li>
<a href="#Download">Download</a>
</li>
</ul>
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”xxOaRrj” default_tab=”html,result” user=”davidkhai”]See the Pen xxOaRrj by DavidKhai (@davidkhai) on CodePen.[/codepen_embed]
Kết quả chúng ta có một mục menu đơn giản theo chiều ngang.
4. Menu con / Menu thả xuống trong Menu chính ngang:
Phần này sẽ giải thích menu thả xuống hoặc menu con trong Menu ngang. Trong thiết kế web tương tác hiện đại, menu thả xuống xuất hiện rất thường xuyên. Sau khi có phiên bản CSS cao hơn, có thể tạo ra các hiệu ứng tương tự bằng cách sử dụng công nghệ HTML chuẩn. Đoạn mã này sẽ trình bày ý tưởng về menu thả xuống theo chiều ngang. Ví dụ: Đoạn mã Menu phụ/ Menu thả xuống
<html>
<head>
<title>Ví dụ tạo Menu trong HTML</title>
<style type="text/css" media="screen">
#horizontalmenu ul {
padding:1;
margin:1;
list-style:none;
}
#horizontalmenu li {
float:left;
position:relative;
padding-right:100;
display:block;
border:1px solid #CC55FF;
border-style:inset;
}
#horizontalmenu li ul {
display:none;
position:absolute;
}
#horizontalmenu li:hover ul{
display:block;
background: lightblue;
height:auto;
width:8em;
}
#horizontalmenu li ul li{
clear:both;
border-style:none;}
</style>
</head>
<body>
<div id="horizontalmenu">
<ul>
<li>
<a href="#">Tin Tức</a>
<ul>
<li>
<a href="#">Quốc Gia</a>
</li>
<li>
<a href="#">Quốc Tế</a>
</li>
<li>
<a href="#">Thể Thao</a>
</li>
<li>
<a href="#">Tài Chính</a>
</li>
</ul>
</li>
<li>
<a href="#">Công Nghệ</a>
<ul>
<li>
<a href="#">Phần mềm</a>
</li>
<li>
<a href="#">Phần Cứng</a>
</li>
<li>
<a href="#">AI</a>
</li>
<li>
<a href="#">Mạng</a>
</li>
</ul>
</li>
<li>
<a href="#">Thể Thao</a>
<ul>
<li>
<a href="#">Bóng Đá</a>
</li>
<li>
<a href="#">Quần Vợt</a>
</li>
<li>
<a href="#">Bơi Lội</a>
</li>
<li>
<a href="#">Bóng Rổ</a>
</li>
</ul>
</li>
<li>
<a href="#">Quốc Gia</a>
<ul>
<li>
<a href="#">Việt Nam</a>
</li>
<li>
<a href="#">Mỹ</a>
</li>
<li>
<a href="#">Nhật Bản</a>
</li>
<li>
<a href="#">Anh Quốc</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”dyXqOjr” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/dyXqOjr’>dyXqOjr</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
