[Tạo menu ngang trong HTML CSS] chỉ với 5 bước | Vietnix

Tạo menu ngang trong HTML và CSS

Menu là một trong những yếu tố quan trọng nhất so với mọi website. Về cơ bản, đó là một tập hợp những link được tùy biến được cho phép khách truy vấn trang đi từ trang này đến những trang khác. Một số website có menu điều hướng ở trên cùng, có trang thì ở bên phải hay bên trái .
Tạo menu ngang trong HTML và CSS chỉ với 5 bước

Hướng dẫn này sẽ giúp bạn tạo menu ngang trong HTML và CSS với 5 bước đơn giản dưới đây.

Bước 1: Tạo HTML Mark-up

Để bắt đầu việc tạo menu ngang trong HTML, hãy tạo một HTML mark-up bằng một link đi đến style sheet ở ngoài (style.css). Nó cũng sẽ được dùng để tạo kiểu cho menu.

Bước 2: Viết CSS cho Menu Division

Sau khi tạo xong HTML mark-up, bây giờ ta cần viết code CSS cho Menu Divsion.

#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;
}

Trong phần xác định menu, kích thước chiều rộng được đặt là 900px và 100px chiều cao. Màu nền là màu đen, sáng hơn màu tiêu chuẩn (#000). Phần còn lại là xác định phông chữ, kích thước phông chữ và dùng CSS3 border-radius để tạo menu một đường cong nhỏ.

Bước 3: Thêm item vào menu

Để tạo menu item, tất cả chúng ta cần phải sử dụng thẻ list không có thứ tự ( unordered tag list ). Hãy thêm phần sau vào trong HTML document giữa những menu division tag .

 
  

    
Trang chủ
    
Dịch vụ
    
Sản phẩm
    
Giới thiệu
    
Liên hệ
  
  

Đố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ụ: https://final-blade.com/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ẻ như ổn nhưng chưa được đẹp mắt cho lắm, nhưng tất cả chúng ta hoàn toàn có thể dùng code CSS menu ngang để biến hóa. Trong bước này, tất cả chúng ta sẽ tạo kiểu cho list và những link, giúp menu ngang CSS thêm sôi động hơn .
Sau khi tạo một list 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 biến hóa bố cục tổng quan mặc định này. Đồng thời cũng cần xóa những bullet đầu dòng khỏi list .
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.

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ẻ () 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);
}

Xem thêm: Bài 9: ReactJS – Forms – Học ReactJS Full Đầy Đủ Nhất

Xem thêm: Angular là gì? Giới thiệu toàn tập về Angular

Source: https://final-blade.com
Category: Kiến thức Internet