daipt
Well-known member
Cách tạo menu ngang trong HTML và CSS
Menu là yếu tố quan trọng không thể thiếu của website. Nó chính là tập hợp các liên kết được thiết kế tùy biến để người dùng có thể truy cập qua lại giữa các trang.
Menu được thiết kế nhiều vị trí trên website như dàn hàng ngang, bên trái, bên phải. Tuy nhiên, menu ngang được sử dụng phổ biến và rộng rãi nhất.
Để tạo tạo menu ngang trong HTML và CSS, bạn thực hiện theo 5 bước hướng dẫn sau.
Cú pháp câu lệnh tạo HTML mark-up có dạng như sau:
<html>
<head>
<title> An Horizontal Menu </title>
<!-- Link to external stylesheet -->
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="menu">
<!-- A division for the menu -->
</div>
</body>
</html>
#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;
}
Tại phần nội dung xác định tạo menu ngang CSS, bạn nhập các thông số như sau:
- Kích thước chiều rộng là 900px, chiều cao là 100px.
- Màu nền: Chọn màu đen.
- Tiếp đến, bạn xác định font chữ, kích thước chữ.
- Sử dụng CSS3 border-radius để thiết lập một đường cong nhỏ cho menu.
Đối với tạo menu ngang trong HTML, bước này giúp bạn định danh từng item để người truy cập website dễ dàng di chuyển, hoặc chọn lựa trang cần xem thông tin. Để tạo menu item, bạn dùng đến unordered tag list (là dạng thẻ danh sách không có thứ tự), và thêm đoạn code bên dưới vào giữa các menu division tag của phần nội dung của HTML document.
<div id="menu"> <!--Start the unordered list after the opening menu division -->
<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>
Trong mỗi tag của item sẽ có một anchor tag đóng vai trò tạo liên kết. Ở bước này, tất cả các thuộc tính hreft đều chưa có giá trị (tức là còn trống) nên đoạn code trên bạn sử dụng ký hiệu #. Còn khi muốn tạo liên kết thực, bạn xóa dấu # rồi nhập địa chỉ URL của trang web.
Khi các item được tạo ra thì chúng sẽ hiển thị theo chiều dọc từ trên xuống và được mặc định có một vòng tròn mờ bao quanh. Trong phạm vi bài viết này là tạo menu trong HTML theo chiều ngang nên bạn cần thay đổi bố cục mặc định, và xóa bullet ở đầu dòng ra khỏi danh sách.
Để thực hiện việc này, bạn sử dụng cú pháp câu lệnh bên dưới:
#menu ul
{
margin-top: 42px;
}
#menu ul li
{
list-style-type: none;
display: inline;
margin-left: 50px;
}
#menu ul
Trong đó:
- margin-top: 42px đóng vai trò trỏ đến danh sách item không thứ tự, đồng thời di chuyển danh sách một khoảng là 42px tính từ trên cùng.
- #menu ul li
+ list-style-type: none thực hiện việc bỏ dấu bullet ở đầu dòng.
+ display: inline thực hiện nhiệm vụ thay đổi cách hiển thị của mỗi mục có trong danh sách, cụ thể là chuyển từ trạng thái dọc sang ngang.
+ margin-left: 50px thực hiện nhiệm vụ giãn cách các mục trong danh sách.
Trong bước 5, bạn cần lưu ý các thẻ (<a></a>) HTML document sẽ nằm ở vị trí giữa các list item tag (<li></li>). Chúng cũng được các unordered list tag (<ul></ul>) bao quanh. Còn menu division (<div id=''menu''></div>) sẽ nằm ở bên ngoài.
Để tạo kiểu cho liên kết, bạn bắt buộc phải sử dụng cấu trúc dưới đây.
“Menu Division > Unordered List > List item > Anchor / Link Tag”
Tiếp theo, bạn dùng cú pháp câu lệnh như sau:
#menu ul li a:link
{
color: #FFF;
text-decoration: none;
text-transform: uppercase;
padding-top: 40px;
padding-bottom: 40px;
padding-left: 20px;
padding-right: 20px;
}
#menu ul li a:visited
{
color: #FFF;
text-decoration: none;
text-transform: uppercase;
}
#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);
}
Trong đó:
- #menu ul li a:link là sytle chung được áp dụng cho các liên kết có trong menu.
- #FFF là màu của liên kết. Màu này là màu trắng mang đến sự trực quan và giúp người dùng dễ đọc.
- code text-decoration: none thực hiện việc xóa phần gạch chân mặc định của các liên kết.
- transform: uppercase được sử dụng để tạo chữ viết in hoa.
- padding: Đóng vai trò giúp xác định khu vực để click vào liên kết.
Ngoài ra, bạn có thể thêm background-color: red vào #menu ul li a:link để thấy rõ hơn vai trò của padding.
Kế đến, bạn xóa phần background-color : red.
- # menu ul li a:visited có tác dụng đảm bảo giữ nguyên định dạng của các liên kết sau khi được click vào.
- # menu ul li a:hover đóng vai trò chuyển đổi màu nền thành màu xanh lục khi người dùng di chuột đến liên kết, đồng thời văn bản vẫn màu trắng và hơi bóng bên dưới.
Trong trường hợp bạn dùng mã nguồn WordPress và muốn tạo menu ngang trong HTML thì sửa code WordPress với HTML và CSS là được.
CÔNG TY TNHH TƯ VẤN TRUYỀN THÔNG MINARA
ĐỊA CHỈ:
- 182 Trần Bình Trọng, P.3, Q.5, Tp.HCM
- 27 Đường số 16, Trung Tâm Hành Chính Dĩ An, Bình Dương.
Điện thoại: 097.777.1060
Email: info@minara.vn
Website: www.minara.vn
Menu là yếu tố quan trọng không thể thiếu của website. Nó chính là tập hợp các liên kết được thiết kế tùy biến để người dùng có thể truy cập qua lại giữa các trang.
Menu được thiết kế nhiều vị trí trên website như dàn hàng ngang, bên trái, bên phải. Tuy nhiên, menu ngang được sử dụng phổ biến và rộng rãi nhất.
Để tạo tạo menu ngang trong HTML và CSS, bạn thực hiện theo 5 bước hướng dẫn sau.
- Bước 1: Tạo HTML Mark-up
Cú pháp câu lệnh tạo HTML mark-up có dạng như sau:
<html>
<head>
<title> An Horizontal Menu </title>
<!-- Link to external stylesheet -->
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="menu">
<!-- A division for the menu -->
</div>
</body>
</html>
- Bước 2: Tiến hành viết CSS cho Menu Division
#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;
}
Tại phần nội dung xác định tạo menu ngang CSS, bạn nhập các thông số như sau:
- Kích thước chiều rộng là 900px, chiều cao là 100px.
- Màu nền: Chọn màu đen.
- Tiếp đến, bạn xác định font chữ, kích thước chữ.
- Sử dụng CSS3 border-radius để thiết lập một đường cong nhỏ cho menu.
Đối với tạo menu ngang trong HTML, bước này giúp bạn định danh từng item để người truy cập website dễ dàng di chuyển, hoặc chọn lựa trang cần xem thông tin. Để tạo menu item, bạn dùng đến unordered tag list (là dạng thẻ danh sách không có thứ tự), và thêm đoạn code bên dưới vào giữa các menu division tag của phần nội dung của HTML document.
<div id="menu"> <!--Start the unordered list after the opening menu division -->
<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>
Trong mỗi tag của item sẽ có một anchor tag đóng vai trò tạo liên kết. Ở bước này, tất cả các thuộc tính hreft đều chưa có giá trị (tức là còn trống) nên đoạn code trên bạn sử dụng ký hiệu #. Còn khi muốn tạo liên kết thực, bạn xóa dấu # rồi nhập địa chỉ URL của trang web.
- Bước 4: Tạo kiểu cho danh sách
Khi các item được tạo ra thì chúng sẽ hiển thị theo chiều dọc từ trên xuống và được mặc định có một vòng tròn mờ bao quanh. Trong phạm vi bài viết này là tạo menu trong HTML theo chiều ngang nên bạn cần thay đổi bố cục mặc định, và xóa bullet ở đầu dòng ra khỏi danh sách.
Để thực hiện việc này, bạn sử dụng cú pháp câu lệnh bên dưới:
#menu ul
{
margin-top: 42px;
}
#menu ul li
{
list-style-type: none;
display: inline;
margin-left: 50px;
}
#menu ul
Trong đó:
- margin-top: 42px đóng vai trò trỏ đến danh sách item không thứ tự, đồng thời di chuyển danh sách một khoảng là 42px tính từ trên cùng.
- #menu ul li
+ list-style-type: none thực hiện việc bỏ dấu bullet ở đầu dòng.
+ display: inline thực hiện nhiệm vụ thay đổi cách hiển thị của mỗi mục có trong danh sách, cụ thể là chuyển từ trạng thái dọc sang ngang.
+ margin-left: 50px thực hiện nhiệm vụ giãn cách các mục trong danh sách.
- Bước 5: Tạo kiểu cho các liên kết
Trong bước 5, bạn cần lưu ý các thẻ (<a></a>) HTML document sẽ nằm ở vị trí giữa các list item tag (<li></li>). Chúng cũng được các unordered list tag (<ul></ul>) bao quanh. Còn menu division (<div id=''menu''></div>) sẽ nằm ở bên ngoài.
Để tạo kiểu cho liên kết, bạn bắt buộc phải sử dụng cấu trúc dưới đây.
“Menu Division > Unordered List > List item > Anchor / Link Tag”
Tiếp theo, bạn dùng cú pháp câu lệnh như sau:
#menu ul li a:link
{
color: #FFF;
text-decoration: none;
text-transform: uppercase;
padding-top: 40px;
padding-bottom: 40px;
padding-left: 20px;
padding-right: 20px;
}
#menu ul li a:visited
{
color: #FFF;
text-decoration: none;
text-transform: uppercase;
}
#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);
}
Trong đó:
- #menu ul li a:link là sytle chung được áp dụng cho các liên kết có trong menu.
- #FFF là màu của liên kết. Màu này là màu trắng mang đến sự trực quan và giúp người dùng dễ đọc.
- code text-decoration: none thực hiện việc xóa phần gạch chân mặc định của các liên kết.
- transform: uppercase được sử dụng để tạo chữ viết in hoa.
- padding: Đóng vai trò giúp xác định khu vực để click vào liên kết.
Ngoài ra, bạn có thể thêm background-color: red vào #menu ul li a:link để thấy rõ hơn vai trò của padding.
Kế đến, bạn xóa phần background-color : red.
- # menu ul li a:visited có tác dụng đảm bảo giữ nguyên định dạng của các liên kết sau khi được click vào.
- # menu ul li a:hover đóng vai trò chuyển đổi màu nền thành màu xanh lục khi người dùng di chuột đến liên kết, đồng thời văn bản vẫn màu trắng và hơi bóng bên dưới.
Trong trường hợp bạn dùng mã nguồn WordPress và muốn tạo menu ngang trong HTML thì sửa code WordPress với HTML và CSS là được.
CÔNG TY TNHH TƯ VẤN TRUYỀN THÔNG MINARA
ĐỊA CHỈ:
- 182 Trần Bình Trọng, P.3, Q.5, Tp.HCM
- 27 Đường số 16, Trung Tâm Hành Chính Dĩ An, Bình Dương.
Điện thoại: 097.777.1060
Email: info@minara.vn
Website: www.minara.vn