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

Chia sẻ kiến thức 02/01/2022

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.

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à:

áp dụng CSS tạo menu 11.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:

áp dụng CSS tạo menu 2

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]

á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:

áp dụng CSS tạo menu 3
Tạo được menu dropdown

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#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:

áp dụng CSS tạo menu 4

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

Bình luận (
0
)

Bài liên quan

Đầu tư vào NFT: Rủi ro tiềm ẩn cần xem xét?

Mặc dù tiềm năng kinh doanh của các NFT là không thể phủ nhận, nhưng các doanh nghiệp phải cẩn thận với các khoản đầu tư cho nó. Các thương hiệu đầu tư NFT phải tiến hành nghiên cứu sâu...

3 cách học giúp sinh viên vượt ải học online, nắm chắc cơ hội việc làm

Với mục tiêu nắm chắc cơ hội việc làm ngay sau khi tốt nghiệp đại học, nhiều sinh viên lựa chọn học online để chuẩn bị cho chính mình.

6 cách khai thác NFT hiệu quả cho mục đích thương mại và kinh doanh

Mặc dù là một công nghệ mới nổi, NFT (non-fungible token) đã trở thành một chủ đề nóng và thu hút sự quan tâm của tất cả những ai muốn tìm kiếm cơ hội và lợi nhuận từ nó. Trong phần...

Lợi ích của việc khai thác NFT cho doanh nghiệp

Khai thác NFT trong kinh doanh đã trở thành một chủ đề nóng và thu hút sự quan tâm của tất cả những ai muốn tìm kiếm cơ hội và lợi nhuận từ nó. Chuỗi bài viết này giải thích...

4 lý do phổ biến chọn học công nghệ thông tin ở FUNiX

Có những lý do phổ biến khiến một xTer chọn học công nghệ thông tin ở FUNiX. Hãy cùng xem, những lý do phổ biến nhất là gì, và với mỗi lý do thì thách thức và thuận lợi khi...

Bài liên quan

  • Tầng 0, tòa nhà FPT, 17 Duy Tân, Q. Cầu Giấy, Hà Nội
  • info@funix.edu.vn
  • 0782313602 (Zalo, Viber)        

yêu cầu gọi lại