---

5) Giải thích chi tiết cấu trúc code menu Blogspot

Phần này giúp bạn hiểu rõ mỗi nhóm lệnh trong code menu đang làm gì, từ đó bạn có thể:

• ✔ Tự chỉnh sửa menu theo ý mình
• ✔ Dạy học sinh cách đọc – hiểu code HTML, CSS, JavaScript
• ✔ Không còn cảm giác “copy code mà không hiểu”

---

5.1. Phần HTML – Cấu trúc khung của menu

HTML quyết định menu có bao nhiêu cấp, mục nào là cha – mục nào là con.

a) Thẻ <nav> – vùng điều hướng

<nav class="dy-menu" role="navigation" aria-label="Menu chính">

• <nav>: thẻ chuyên dùng cho menu điều hướng
• class="dy-menu": tên lớp để CSS & JavaScript điều khiển
• aria-label: giúp trình đọc màn hình (accessibility)

---

b) Logo / tên website

<a class="dy-menu__brand" href="/">DamYiStudy</a>

• Dùng thẻ <a> để bấm vào quay về trang chủ
• Có thể thay bằng ảnh logo nếu muốn

---

c) Menu cấp 1

<ul class="dy-menu__list">
  <li><a href="/">Trang chủ</a></li>
</ul>

• <ul>: danh sách menu
• <li>: mỗi mục menu
• Đây là menu cấp 1 (nằm ngang)

---

d) Menu có menu con (menu đa cấp)

<li class="has-sub">
  <a class="dy-link" href="/search/label/Tin-hoc">Tin học</a>
  <button class="dy-caret"></button>
  <ul class="sub"> ... </ul>
</li>

• class="has-sub": đánh dấu mục có menu con
• ul.sub: chính là menu con
• button.dy-caret: nút mũi tên (dùng cho mobile)

---

e) Menu cấp 3

<ul class="sub sub-right">

• Dùng cho menu con của menu con (cấp 3)
• sub-right: menu bung sang bên phải

---

5.2. Phần CSS – Làm đẹp và điều khiển hiển thị menu

CSS quyết định menu có đẹp không, bung ở đâu, có bị cắt không.

---

a) Khai báo biến màu (rất quan trọng)

:root{
  --dy-green:#0b8f5a;
  --dy-yellow:#facc15;
}

• Giúp đổi màu toàn bộ menu chỉ bằng 1 chỗ
• Chuẩn thiết kế hiện đại

---

b) Fix lỗi dropdown bị cắt

.dy-menu__wrap,
.dy-menu__list,
.dy-menu__list > li {
  overflow: visible !important;
}

👉 Đây là dòng cực kỳ quan trọng trên Blogspot, vì nhiều theme mặc định overflow:hidden làm menu con không hiện.

---

c) Ẩn menu con mặc định

.sub {
  display: none;
}

• Menu con ban đầu không hiện
• Chỉ hiện khi hover (PC) hoặc click (mobile)

---

d) Hover mở menu trên máy tính

@media (min-width:981px){
  .has-sub:hover > .sub {
    display: block;
  }
}

• Áp dụng cho màn hình lớn (PC, laptop)
• Không cần JavaScript vẫn mở được menu

---

e) Responsive cho điện thoại

@media (max-width:980px){
  .dy-menu__list {
    flex-direction: column;
  }
}

• Chuyển menu ngang thành menu dọc
• Phù hợp thao tác chạm

---

5.3. Phần JavaScript – Điều khiển menu trên mobile

JavaScript chỉ dùng cho mobile, giúp menu hoạt động khi không có hover.

---

a) Bắt sự kiện nút hamburger

btn.addEventListener('click', function(){
  list.classList.toggle('show');
});

• Bấm ☰ để mở/đóng menu chính
• toggle: có thì bỏ, không có thì thêm

---

b) Mở menu con bằng mũi tên

caret.addEventListener('click', function(e){
  e.preventDefault();
  li.classList.toggle('open');
});

• Chỉ bấm mũi tên mới mở menu con
• Bấm chữ vẫn đi link → tốt cho SEO

---

c) Đóng menu khi bấm ra ngoài

document.addEventListener('click', function(e){
  if(!nav.contains(e.target)){
    ...
  }
});

• Giúp menu gọn gàng
• Trải nghiệm người dùng tốt hơn

---

6) Tổng kết kiến thức học được

• ✔ Biết cách xây dựng menu đa cấp bằng HTML
• ✔ Hiểu cách CSS điều khiển hiển thị & responsive
• ✔ Biết dùng JavaScript để xử lý sự kiện click
• ✔ Ứng dụng được ngay cho Blogspot và website học tập

Gợi ý học tập: Học sinh có thể thử:

• Đổi màu menu
• Thêm mục menu mới
• Biến menu thành menu dính (sticky)

---

Bài viết được chia sẻ tại DamYiStudy – Nơi tự học Tin học & kỹ năng số.