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
Á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 CSSlist-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.
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:
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 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.
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ư:
Gen Z – thế hệ sinh ra trong lòng cách mạng công nghệ – lớn lên cùng điện thoại thông minh, mạng xã hội và những cú lướt chạm là thành thạo. Họ là những người bắt trend nhanh, sáng...
Sinh viên tốt nghiệp ngày càng nhiều, nhưng tỷ lệ thất nghiệp trong nhóm lao động trẻ vẫn ở mức cao. Không ít bạn sau 4 năm học đại học vẫn loay hoay với câu hỏi: “Làm gì để nổi...
Trí tuệ nhân tạo (AI) không còn là khái niệm dành riêng cho sinh viên đại học hay người đi làm. Ngày nay, nhiều học sinh cấp 2, cấp 3 đã bắt đầu tìm hiểu và ứng dụng AI trong...
Sự trỗi dậy mạnh mẽ của AI không chỉ tạo ra những ngành nghề mới mà còn đòi hỏi một thế hệ nhân lực có khả năng thích nghi, sáng tạo và làm chủ công nghệ. Đây chính là lúc...
Trong những năm gần đây, trí tuệ nhân tạo (AI) không còn là khái niệm xa lạ mà đã len lỏi vào từng ngóc ngách của cuộc sống, từ công việc, giải trí đến giáo dục. Với sự phát triển...
Chúng ta đang sống giữa thời đại của cách mạng công nghệ. Chỉ trong vài năm qua, AI đã vượt khỏi khuôn khổ các phòng nghiên cứu để hiện diện khắp mọi nơi – từ chiếc điện thoại thông minh,...
Trong kỷ nguyên số, trí tuệ nhân tạo (AI) đang dần trở thành một phần không thể thiếu trong mọi lĩnh vực, từ kinh doanh, truyền thông, giáo dục đến y tế, sản xuất. Việc học AI không còn là...
Trong môi trường học tập và làm việc hiện đại, khả năng trình bày ý tưởng một cách trực quan và chuyên nghiệp là kỹ năng bắt buộc đối với mọi sinh viên. Với sự phát triển của trí tuệ...
Đăng ký nhận bản tin
Nhận bản tin, báo cáo từ các chuyên gia hàng đầu về lĩnh vực Công nghệ thông tin mới nhất!
×
×
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
Yêu cầu FUNiX gọi lại để hỗ trợ thông tin, chương trình học, chỉ tiêu - điều kiện tuyển sinh - học phí,... hoàn toàn FREE
Bình luận (0
)