Trang chủ
Tạo menu đẹp bằng css
Đối với mỗi tag của item, có một anchor tag [] để tạo một liên kết. Tại thời điểm này, mọi thuộc tính href
đều trống, do đó ta dùng kí hiệu [#
]. Để tạo các liên kết thực, hãy xóa kí tự #
và nhập URL của trang [Ví dụ: //vietnix.vn/tai-lieu-ky-thuat].
Bước 4: Tạo kiểu cho danh sách
Sau khi thêm xong code HTML, dù có vẻ ổn nhưng chưa được bắt mắt cho lắm, nhưng chúng ta có thể dùng code CSS menu ngang để thay đổi. Trong bước này, chúng ta sẽ tạo kiểu cho danh sách và các liên kết, giúp menu ngang CSS thêm sống động hơn.
Sau khi tạo một danh sách không có thứ tự, mỗi item đều được hiển thị theo thứ tự từ trên xuống, cùng một vòng tròn mờ xung quanh theo mặc định. Chúng ta đang muốn tạo menu ngang trong HTML chứ không phải menu dọc, do đó ta cần thay đổi bố cục mặc định này. Đồng thời cũng cần xóa các bullet đầu dòng khỏi danh sách.
Dùng lệnh sau để tạo menu ngang bằng CSS:
#menu ul
{
margin-top: 42px;
}
#menu ul li
{
list-style-type: none;
display: inline;
margin-left: 50px;
}
#menu ul
Phần margin-top: 42px
sẽ trỏ đến danh sách không có thứ tự và di chuyển danh sách này 42px, tính từ trên cùng.
#menu ul li
list-style-type: none
sẽ bỏ dấu bullet đầu dòng.
display: inline
để thay đổi cách trình bày của từng mục trong danh sách từ dọc thành ngang.
margin-left: 50px
sẽ giãn cách các mục trong danh sách ra một chút.
Xem thêm: Favicon là gì? Hướng dẫn tạo và thêm Favicon cho website
Bước 5: Tạo kiểu cho các liên kết
Bước cuối cùng trong việc tao menu ngang trong HTML là tạo kiểu cho các liên kết.
Lưu ý rằng trong HTML document, các thẻ Cấu trúc này là bắt buộc để có thể tạo kiểu cho các liên kết. Cấu trúc nó như sau: “Menu Division > Unordered List > List item > Anchor / Link Tag“ Sau đó, hãy sử dụng code sau: #menu ul li a:link Đoạn này sẽ áp dụng một style chung cho các liên kết trong menu. Để thấy rõ hơn tác dụng của padding, bạn có thể thử thêm dòng Sau đó, xóa phần # menu ul li a:visited Phần này
giúp đảm bảo các link vẫn giữ nguyên định dạng sau khi đã được click vào. # menu ul li a:hover Nếu bạn di chuột đến một link nào đó, bạn sẽ thấy màu nền chuyển thành màu xanh lục, văn bản vẫn giữ màu trắng và có một chút bóng ở phía dưới. Đây là những gì code trên đã làm. Nếu bạn đang sử dụng mã nguồn WordPress thì bạn cũng có thể sửa code WordPress với HTML và CSS trong giao diện của nó. Như vậy là ta đã hoàn tất việc tạo menu ngang trong HTML, nhìn đơn giản nhưng vẫn đủ chuyên nghiệp. Bạn hoàn toàn có thể tạo thêm nhiều menu đẹp khác nữa bằng các code CSS và HTML. Chúc các bạn thành công![]
nằm giữa các list item tag []
và lần lượt được bao quanh bởi các unordered list tag
[
]. Ở bên ngoài là menu division [#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];
}
text-decoration: none
: Xóa phần gạch chân ở dưới các link [theo mặc định] bằng . transform: uppercase
: Để tạo chữ viết hoa, chúng ta dùng
padding
: Xác định khu vực có thể click vào link.background-color: red
vào trong phần #menu ul li a:link.background-color : red
để hoàn thiện.Chủ Đề