Cách áp dụng CSS tạo menu

Menu là một yếu tố quan trọng đối với mọi loại website, giúp khách có thể truy cập web và đi từ trang này đến trang khác. Nhiều trang web có menu điều hướng ở trên cùng, một số trang có thể ở bên phải hoặc bên trái.  Hiện nay chúng ta có thể áp dụng CSS trong việc tạo các kiểu menu đơn giản là menu dọc, menu ngang và menu dropdown. Hãy cùng FUNiX tìm hiểu cách áp dụng CSS tạo menu trong bài viết bên dưới.

• Cách áp dụng CSS cho thẻ image, ảnh nền
• Hướng dẫn cách áp dụng CSS cho thẻ link chuẩn nhất
• Hướng dẫn cách áp dụng CSS cho thẻ table

1. Áp dụng CSS tạo menu ngang

Khi muốn áp dụng CSS để tạo menu ngang, chúng ta hãy dùng thẻ <ul> để tạo khu vực cho menu và thẻ <li> để tạo từng hạng mục trong menu đó.

1.1. Đầu tiên ở đoạn cấu trúc menu bằng HTML, chúng ta sẽ đặt menu vào trong một thẻ <div> với id là #menu.

[html]

<div id=”menu”>

<ul>

<li><a href=”#”>Trang chủ</a></li>

<li><a href=”#”>Diễn đàn</a></li>

<li><a href=”#”>Tin tức</a></li>

<li><a href=”#”>Hỏi đáp</a></li>

<li><a href=”#”>Liên hệ</a></li>

</ul>

</div>

[/html]

1.2. Chúng ta sẽ reset CSS và thêm một số style cho toàn trang web như bên dưới.

• Reset CSS

{

  margin: 0;

  padding: 0;

}

• Thêm style cho website:

body {

  font-family: sans-serif;

  color: #333;

}

1.3. Ở  phần thẻ <ul> trong #menu, áp dụng CSS list-style-type để xóa các dấu đầu dòng và thêm màu nền, đưa văn bản bên trong ra giữa để nhìn đẹp hơn.

#menu ul {

  background: #1F568B;

  list-style-type: none;

  text-align: center;

}

1.4. Để điều chỉnh cho các mục con nằm thành hàng ngang chúng ta có thể lựa chọn 2 kiểu đó là float: left cho tất cả các thẻ <li> hoặc hiển thị kiểu inline-block.

• Kiểu inline-block 

#menu li {

  color: #f1f1f1;

  display: inline-block;

  width: 120px;

  height: 40px;

  line-height: 40px;

  margin-left: -5px;

}

• Kiểu float

#menu li {

  color: #f1f1f1;

  float: left;

  width: 120px;

  height: 40px;

  line-height: 40px;

}

Sau khi thực hiện kiểu inline-block sẽ nhận được kết quả là:

1.5. Thêm style cho thẻ <a> bên trong và cho các thẻ này hiển thị thành block để nó được phủ kín #menu ul.

#menu a {

  text-decoration: none;

  color: #fff;

  display: block;

}

#menu a:hover {

  background: #F1F1F1;

  color: #333;

}

Kết quả nhận được sau khi hoàn thành:

2. Cách tạo menu dropdown đơn giản

Sau khi áp dụng CSS để tạo được một menu ngang như ở phần trên, bạn muốn từ các item lớn của menu có thể đổ ra một số item con thì phải tiến hành tạo menu dropdown cho menu ngang vừa tạo. 

Ví dụ ở phần Tin tức, nếu muốn có thêm một vài menu con nữa thì chúng ta sẽ đặt thêm một thẻ <ul> được lồng vào bên trong item Tin tức,  thẻ <ul> này sẽ mang class là sub-menu.

[html highlight=”6-10″]

<div id=”menu”>

<ul>

<li><a href=”#”>Trang chủ</a></li>

<li><a href=”#”>Diễn đàn</a></li>

<li><a href=”#”>Tin tức</a>

<ul class=”sub-menu”>

<li><a href=”#”>WordPress</a></li>

<li><a href=”#”>SEO</a></li>

<li><a href=”#”>Hosting</a></li>

</ul>

</li>

<li><a href=”#”>Hỏi đáp</a></li>

<li><a href=”#”>Liên hệ</a></li>

</ul>

</div>

[/html]

Và áp dụng CSS như phần tạo menu ngang ở trên:

• Reset CSS

{

  margin: 0;

  padding: 0;

}

• Thêm style cho website

body {

  font-family: sans-serif;

  color: #333;

}

• Style cho menu

#menu ul {

  background: #1F568B;

  list-style-type: none;

  text-align: center;

}

#menu li {

  color: #f1f1f1;

  display: inline-block;

  width: 120px;

  height: 40px;

  line-height: 40px;

  margin-left: -5px;

}

#menu a {

  text-decoration: none;

  color: #fff;

  display: block;

}

#menu a:hover {

  background: #F1F1F1;

  color: #333;

}

Sau khi thực hiện các bước trên ta sẽ nhận được kết quả hiển thị như sau:

Lúc này chúng ta sẽ cho .sub-menu ẩn đi bằng lệnh sau:

.sub-menu li {

  display: none;

}

Sử dụng thuộc tính position để hiển thị phần .sub-menu ra bên ngoài phần #menu ul. Để .sub-menu nằm gần menu mẹ thì ta phải thiết lập #menu li thành kiểu relative vì #menu li bao gồm các item cấp lớn nhất, được gọi đó là menu mẹ.

#menu li {

 position: relative;

}

Điều chỉnh .sub-menu thành absolute để nó luôn luôn nằm trong phạm vi của menu mẹ (#menu li). Viết lại đoạn .sub-menu như sau:

.sub-menu {

 display: none;

 position: absolute;

}

Sử dụng lệnh #menu li:hover .sub-menu để khi rê chuột vào menu mẹ sẽ hiển thị ra các menu con. Gán lệnh display: block để hiển thị.

#menu li:hover .sub-menu {

 display: block;

}

Áp dụng CSS cho các menu con bên trong để xóa margin không cần thiết.

.sub-menu li {

 margin-left: 0 !important;

}

2. Tạo menu dọc cơ bản

Chúng ta sẽ có một danh sách menu ban đầu như sau:

[html]

<div id=”menu”>

<ul>

<li><a href=”#”>Trang chủ</a></li>

<li><a href=”#”>Tin tức</a></li>

<li><a href=”#”>Sản phẩm</a></li>

<li><a href=”#”>Liên hệ</a></li>

</ul>

</div>

[/html]

Áp dụng CSS cho #menu ul để thêm màu nền và bỏ dấu chấm đầu dòng của danh sách.

#menu ul {

  background: #8AD385;

  width: 250px;

  padding: 0;

  list-style-type: none;

  text-align: left;

}

Viết CSS cho các thẻ <li>, sử dụng height để quy định chiều cao và thêm line-height bằng với chiều cao để nó đứng giữa block.

#menu li {

  width: auto;

  height: 40px;

  line-height: 40px;

  border-bottom: 1px solid #e8e8e8;

  padding: 0 1em;

}

Ở bước cuối cùng, tiếp tục áp dụng CSS cho thẻ <a> bên trong menu, chuyển nó thành block và thêm vào các style cần thiết, tạo thêm những hiệu ứng background khác khi rê chuột vào các mục của menu.

#menu li a {

  text-decoration: none;

  color: #333;

  font-weight: bold;

  display: block;

}

#menu li:hover {

  background: #CDE2CD;

}

3. Tạo menu dọc có đổ xuống (dropdown)

Chúng ta sẽ tạo một menu dọc có đổ xuống sẽ xổ ra bên phải khi rê chuột vào menu mẹ.

Hãy làm lại menu dọc đơn giản như ở trên và bổ sung các menu con vào như sau:

[html highlight=”4-10″]

<div id=”menu”>

<ul>

<li><a href=”#”>Trang chủ</a></li>

<li><a href=”#”>Tin tức</a>

<ul class=”sub-menu”>

<li><a href=”#”>WordPress</a></li>

<li><a href=”#”>SEO</a></li>

<li><a href=”#”>Hosting</a></li>

</ul>

</li>

<li><a href=”#”>Sản phẩm</a></li>

<li><a href=”#”>Liên hệ</a></li>

</ul>

</div>

[/html]

Áp dụng CSS như ở phần trên:

body {

 font-family: sans-serif;

 font-size: 15px;

}

#menu ul {

 background: #8AD385;

 width: 250px;

 padding: 0;

 list-style-type: none;

 text-align: left;

}

#menu li {

 width: auto;

 height: 40px;

 line-height: 40px;

 border-bottom: 1px solid #e8e8e8;

 padding: 0 1em;

}

#menu li a {

 text-decoration: none;

 color: #333;

 font-weight: bold;

 display: block;

}

#menu li:hover {

 background: #CDE2CD;

}

Đến đây các menu con trong mục Tin tức sẽ bị lỗi hiển thị, nên chúng ta sẽ áp dụng CSS cho nó.

Chuyển đổi #menu li thành kiểu hiển thị relative.

#menu ul li {

 position: relative;

}

Chuyển .sub-menu về dạng absolute và chỉnh cho vị trí hiển thị của nó sang bên phải sao cho bằng với chiều rộng menu là 250px, đồng thời đưa menu con về sát mép top của menu mẹ.

#menu .sub-menu {

 position: absolute;

 left: 250px;

 top: 0;

}

Kết quả nhận được:

Lúc này chỉ cần thêm CSS để .sub-menu ẩn đi và chỉ hiện ra khi người dùng rê chuột vào #menu li có chứa .sub-menu đó.

#menu .sub-menu {

 position: absolute;

 left: 250px;

 top: 0;

 display: none;

}

#menu li:hover .sub-menu {

 display: block;

.

Bên cạnh việc áp dụng CSS để tạo menu, chúng ta còn có thể áp dụng CSS cho các thẻ khác như:

>> Cách áp dụng CSS cho thẻ link
>> Cách áp dụng CSS cho thẻ image, ảnh nền
>> Cách áp dụng CSS cho thẻ table
>> Cách áp dụng CSS tạo list

Chúc các bạn thành công!

Phạm Thị Thanh Ngọc