Css li

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Thuộc tính

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

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

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

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

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

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

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

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

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

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

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

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

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

Đế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

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

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

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

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

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

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

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

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

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

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

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

Đây chính là kết quả cuối cùng của menu ngang có menu 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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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é