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ướngclass="dy-menu": tên lớp để CSS & JavaScript điều khiểnaria-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 conul.sub: chính là menu conbutton.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ố.
📌 Danh sách bình luận