Css li

Tạo menu bằng HTML và CSS là một trong những công việc mà front-end dev ai cũ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ì 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é

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 CSS đặt lại và viết CSS cho từng định 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ó menu thả xuống (đổ xuống)

Xem Nhanh

• Tại sao cần tạo menu cho trang web?
• Menu đa cấp là gì?
• Lợi ích của menu đa cấp
• Bước 1 – Viết HTML (cách tạo menu trong HTML)
• Bước 2. Viết CSS để có một menu hoàn chỉnh
• Bước 3 – Viết CSS cho từng định dạng Menu ngang/đọc
  • Menu ngang
  • Menu ngang có menu thả xuống (đổ xuống)/menu đa cấp
  • Menu Dọc
  • Menu dọc có menu thả xuống (đổ xuống)

Tại sao cần tạo menu cho trang web?

Đố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 website mikotech. vn

Menu trở thành một phần thiết yếu cho trải nghiệm người dùng và trang web chiến lược của cá nhân, doanh nghiệp

Lợi ích của menu mang lại còn nhiều hơn thế. Hệ thống điều hướng tốt sẽ giúp website có cơ hội được người dùng truy cập duyệt website nhiều hơn và giảm tỷ lệ thoát trang

Menu đa cấp là gì?

Menu đa cấp hay menu xổ số (thả xuống) là dạng menu cung cấp danh sách các tùy chọn, xuất hiện trên web đầu trang. 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

Lợi ích của menu đa cấp

Menu đ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 trang web. 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 website nhà thiết kế 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 mục cần đặt lên trang web giao diện

Chính vì thế, menu đa cấp là giải pháp hữu ích để nâng cao tính thẩm mỹ cho trang web và tránh tình trạng khiến người dùng bị rối mắt. Website nhà thiết kế sẽ linh hoạt hơn trong thiết kế của mình

Bước 1 – Viết HTML (cách tạo menu trong HTML)

Để tạo menu ngang, dọc bằng HTML và CSS, trước tiên chúng ta cần có phần mã 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ẻ

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

3 với id là

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

4

Trong đó, ta sẽ sử dụng thẻ

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

5 để tạo menu khu vực và thẻ

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

6 để tạo từng mục trong menu. Đoạn mã HTML sẽ như bên dưới đây

[html]

  

    
Trang chủ
    
Giới thiệu
    
Sản phẩm
    
Hỏi đáp
    
Liên hệ
  

[/html]

Kết quả nhận được sau khi viết mã HTML

Bước 2. Viết CSS để có một menu hoàn chỉnh

Đầu tiên, để dễ dàng cho việc chỉnh sửa CSS về sau, hãy thực hiện việc Reset CSS bằng đoạn mã sau

/*==Reset CSS==*/
* {
  margin: 0;
  padding: 0;
}

Tiếp theo, chúng ta sẽ viết CSS cho phần “body” với phần code sau

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

Đến đây thì menu của bạn sẽ giống như thế này

Kết quả sau khi reset CSS và thêm style cho website

Bước 3 – Viết CSS cho từng định dạng Menu ngang/đọc

Menu ngang

Cùng tìm hiểu cách tạo menu ngang trong HTML & CSS ngay dưới đây nhé

Do thẻ

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

5 trong HTML dùng để tạo danh sách nên mặc định sẽ có dấu “chấm” ở đầu mỗi dòng. Vì thế, chúng ta sẽ sử dụng thuộc tính

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

8 để xóa đi những dấu chấm này. Đồng thời, ta cũng sẽ đổi màu nền cho menu bằng thuộc tính

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

9-color

Đoạn mã dưới đây sẽ cho menu căn giữa bằng thuộc tính

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

00 để menu được đặt giữa sẽ đẹp hơn. Đoạn CSS will like after

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

0

Các bạn có thể lấy các mã màu tại đây

Khi đến bước này, menu của chúng ta sẽ giống như thế này

Kết quả nhận được sau khi thêm phong cách cho menu

Nhưng cái chúng ta cần là menu ngang, vậy tiếp theo cần phải làm gì?

• Use the display type (hiển thị)

  /*==Style cơ bản cho website==*/
  body {
    font-family: sans-serif;
    color: #222;
  }

  01
• Sử dụng

  /*==Style cơ bản cho website==*/
  body {
    font-family: sans-serif;
    color: #222;
  }

  02 cho tất cả thẻ

  /*==Style cơ bản cho website==*/
  body {
    font-family: sans-serif;
    color: #222;
  }

  6

Cách 1. Kiểu khối nội tuyến

Sau đây là đoạn mã CSS cho kiểu

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

01

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

6

Với thuộc tính color, color code #f1f1f1 sẽ cho ra màu trắng, tiếp theo sẽ bổ sung thuộc tính width ( chiều rộng) và chiều cao ( chiều cao). Lúc này các mục vẫn chưa được căn giữa, vì vậy cần bổ sung thuộc tính line-height với giá trị bằng chiều cao, kết quả cho ra sẽ như hình dưới đây

Kết quả sau khi bổ sung thuộc tính line-height

cách 2. float type

Với kiểu float thì sau đây sẽ là đoạn mã CSS

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

7

Nếu bạn dùng kiểu float thì cần phải thêm một vài thuộc tính cho #menu ul like after

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

8

Sau khi xếp hạng các thành hàng ngang bằng 2 chiều bên trên, thì cuối cùng ta sẽ trang trí menu bằng cách thêm kiểu cho thẻ

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

05 như sau

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

0

Thuộc tính

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

06 là thuộc tính làm cho mục con trong menu có đường gạch dưới, vì thế để mất đi đường gạch chân, ta sẽ để “

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

07“. Quan trọng nhất là đặt kiểu hiển thị (hiển thị) cho các thẻ này thành “

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

08” để nó được phủ lên cái

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

09

Kết quả tạm thời sẽ như sau

Kết quả thu được sau khi thêm các dòng mã trang menu

Tiếp theo, nếu bạn muốn có hiệu ứng xuất hiện khi rê chuột đến các mục con trong menu thì sẽ làm như sau

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

5

Trên đây, bộ chọn “

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

60” sẽ chọn các liên kết được di chuột (chọn phần tử đang được người dùng rê chuột vào). Sau khi hoàn thành ta sẽ thu được kết quả như sau

Menu kết quả thu được sau khi thêm mã với bộ chọn “. bay lượn"

Menu ngang có menu thả xuống (đổ xuống)/menu đa cấp

Nếu bạn muốn trong mục Sản phẩm sẽ có các menu con thì bạn sẽ phải làm như thế nào?

Đầu tiên, bạn cần viết HTML, công việc này sẽ tương tự bước 1 nhưng có một chút khác biệt bởi vì bạn cần bổ sung thêm thẻ

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

5 bên trong mục “Sản phẩm” và sẽ mang

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

62

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

63 để tạo menu con trong HTML

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

0

Tiếp theo, bạn sẽ thực hiện tương tự như bước 2 bên trên và viết tiếp CSS cho menu như đoạn mã bên dưới đây

/*==Reset CSS==*/
* {
  margin: 0;
  padding: 0;
}

0

Đến đây bạn sẽ thấy menu con của mục Sản phẩm được hiển thị như thế này

Kết quả của trình đơn thả xuống sau khi mã cơ bản CSS và HTML

Chí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 kề để 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

/*==Reset CSS==*/
* {
  margin: 0;
  padding: 0;
}

1

Tuy nhiên, lúc này phần menu con vẫn đang được nâng cấp. You have to custom variable re the sub-menu. Vị trí tùy chọn biến một phần tử mà không ảnh hưởng đến phần tử khác thì sẽ sử dụng thuộc tính vị trí

Cái bạn cần ở đây chính là cái menu con phải nằm gần phần tử mẹ, thì bạn phải thiết lập

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

64 thành kiểu

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

65

/*==Reset CSS==*/
* {
  margin: 0;
  padding: 0;
}

2

Và tiếp theo là cho cái

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

66 thành kiểu

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

67 để nó luôn luôn nằm trong phạm vi menu mẹ, tức là nằm trong

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

64 ấy. Chúng ta viết lại đoạn. sub-menu as after

Tiếp theo, bạn cần chọn cái. menu phụ thành kiểu tuyệt đối để nó luôn nằm trong phạm vi phần tử mẹ (#menu li). Đoạn mã sẽ có định dạng như sau

/*==Reset CSS==*/
* {
  margin: 0;
  padding: 0;
}

3

Kết quả cho ra sẽ là menu con không còn được đưa lên nữa

Kết quả của trình đơn thả xuống sau tùy chọn biến lại “. menu phụ”

Khi rê chuột vào menu mẹ, để hiển thị. menu phụ, bạn cần kết hợp định dạng lớp “. hover” và gán display (kiểu hiển thị) là block

/*==Reset CSS==*/
* {
  margin: 0;
  padding: 0;
}

4

Đây chính là kết quả cuối cùng của menu ngang có menu thả xuống

Mã kết quả cuối cùng của menu ngang thả xuống

Menu Dọc

Sau khi bạn thực hiện xong bước 1 và bước 2, chúng 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

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

09 để chỉnh sửa kiểu bằng cách sử dụng thuộc tính

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

8, thêm màu nền, thuộc tính

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

71 và căn chỉnh bên lề trái.

/*==Reset CSS==*/
* {
  margin: 0;
  padding: 0;
}

5

Đến đây, kết quả sẽ hiển thị như sau

Menu dọc được thu thập sau khi viết HTML và CSS chỉnh sửa kiểu cơ bản

Tiếp theo ta sẽ viết CSS cho các thẻ

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

6, ta sẽ thêm chiều cao (

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

73) và thêm chiều cao giữa các dòng (

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

74) bằng với chiều cao để mục con đứng giữa khối. Sau đó, ta sẽ bổ sung thuộc tính b

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

75 để định dạng đường viền

/*==Reset CSS==*/
* {
  margin: 0;
  padding: 0;
}

6

Kết quả tạm thu được như sau

Menu vertical has been after when write CSS for thẻ

Cuối cùng là viết CSS cho thẻ bên trong menu, chuyển nó qua thành khối và thêm các kiểu cần thiết, đồng thời tạo thêm hiệu ứng nền 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ẻ

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

05 trong menu. Ta sẽ chuyển khối sang, thêm kiểu, loại bỏ gạch chân, in đậm cho chữ và thêm hiệu ứng khi rê vào chuột. Ta sẽ có đoạn mã như sau

/*==Reset CSS==*/
* {
  margin: 0;
  padding: 0;
}

7

Đây là kết quả thu được sau khi hoàn thành việc tạo menu dọc

Menu Dọc – tạo menu trong HTML và CSS

Menu dọc có menu thả xuống (đổ xuống)

Ví dụ: bây giờ bạn muốn ở mục Sản phẩm sẽ có thêm vài menu con nữa thì cần phải làm gì?

Đầu tiên sẽ tương tự như bước 1 nhưng sẽ có một chút khác biệt bởi vì bạn cần phải thêm một số thẻ để tạo menu phụ (menu con)

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

0

Kế tiếp, ta sẽ đến bước tiếp theo là viết CSS cho menu

/*==Reset CSS==*/
* {
  margin: 0;
  padding: 0;
}

9

Kết quả thu được sẽ giống như hình ảnh sau đây

Menu dọc thả xuống cơ bản sau khi viết HTML và CSS

Lúc này, các mục con trong Sản phẩm đang bị lỗi hiển thị. Vì thế, chúng ta cần bổ sung đoạn mã CSS bằng cách đưa

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

64 về dạng hiển thị (hiển thị) kiểu tương đối. Đoạn mã CSS sẽ trông như sau

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

0

Kế tiếp, ta sẽ chuyển menu cấp 2 (tức #menu. sub-menu) về dạng tuyệt đối, điều 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 được đưa ra ở mức cao bằng mẹ phần tử

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

1

Mặc dù, đến đây đã có menu thả xuống 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 mã đoạn như sau

/*==Style cơ bản cho website==*/
body {
  font-family: sans-serif;
  color: #222;
}

2

Menu thả xuống dọc Thành quả

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. Trong đó, bài viết đã bao gồm 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é