Thiết kế Menu đa cấp cho Blogspot (PC hover + Mobile bấm) – Chuẩn đẹp & dễ dùng

Nếu bạn đang làm blog chia sẻ tài liệu học tập (Tin học THPT, Python, Word, Excel, Toán…), thì một thanh menu rõ ràng sẽ giúp người đọc tìm bài nhanh hơn và ở lại lâu hơn.

Trong bài này, mình chia sẻ bộ menu đa cấp:

• ✅ Menu con 2–3 cấp
• ✅ Máy tính: rê chuột (hover) là bung menu
• ✅ Điện thoại: bấm mũi tên để bung menu (không cần hover)
• ✅ Không bị “cắt dropdown” do theme Blogspot
• ✅ Màu nhận diện xanh lá + vàng (phù hợp blog giáo dục)

---

1) Cách gắn menu vào Blogspot để chạy thật

1. Vào Bố cục (Layout)
2. Chọn Thêm tiện ích (Add a Gadget) → HTML/JavaScript
3. Dán bộ code menu ở phần 3) vào gadget
4. Lưu lại và kéo widget menu lên vị trí đầu trang (Header/Top)
5. Nếu đang có menu cũ (Pages/LinkList), nên ẩn/xóa để tránh xung đột

Mẹo: Nếu bạn chỉ muốn chia sẻ code trong bài viết cho người khác copy, hãy dùng khối code ở phần 3) và dán ở chế độ HTML của bài đăng.

---

2) Quy ước Label (nhãn) để link chuyên mục gọn & SEO tốt

Blogspot gom bài theo nhãn dạng:

• /search/label/Python
• /search/label/Excel

Khuyến nghị: Dùng nhãn không dấu + gạch nối để URL gọn hơn, dễ SEO hơn.

• ✅ python-co-ban, bai-tap-excel, word-dinh-dang, tin-10
• ❌ Nhãn có dấu / khoảng trắng dễ làm URL xấu và khó quản lý

---

3) Code Menu đa cấp (Copy & dùng ngay)

Quan trọng: Khi menu chạy thật, bạn dán code này trong Bố cục → HTML/JavaScript. Còn nếu bạn đăng bài chia sẻ code, hãy để nguyên trong khối <pre><code> như bên dưới.

<nav class="dy-menu" role="navigation" aria-label="Menu chính">
  <div class="dy-menu__wrap">
    <a class="dy-menu__brand" href="/" title="Trang chủ">DamYiStudy</a>

    <!-- Mobile toggle -->
    <button class="dy-menu__hamburger" type="button" aria-expanded="false" aria-controls="dy-menu-list">
      <span></span><span></span><span></span>
    </button>

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

      <li class="has-sub">
        <a class="dy-link" href="/search/label/Tai-nguyen">📚 Tài nguyên THPT</a>
        <button class="dy-caret" type="button" aria-label="Mở menu con"></button>
        <ul class="sub">
          <li><a href="/search/label/Tin-10">Tin học 10</a></li>
          <li><a href="/search/label/Tin-11">Tin học 11</a></li>
          <li><a href="/search/label/Tin-12">Tin học 12</a></li>
          <li class="divider"></li>
          <li><a href="/search/label/Toan-10">Toán 10</a></li>
          <li><a href="/search/label/Toan-11">Toán 11</a></li>
          <li><a href="/search/label/Toan-12">Toán 12</a></li>
          <li class="divider"></li>
          <li><a href="/search/label/On-tap-Kiem-tra">Ôn tập – kiểm tra</a></li>
        </ul>
      </li>

      <li class="has-sub">
        <a class="dy-link" href="/search/label/Tin-hoc">💻 Tin học</a>
        <button class="dy-caret" type="button" aria-label="Mở menu con"></button>

        <ul class="sub">
          <li class="has-sub">
            <a class="dy-link" href="/search/label/Python">🐍 Python THPT</a>
            <button class="dy-caret" type="button" aria-label="Mở menu con"></button>
            <ul class="sub sub-right">
              <li><a href="/search/label/Python-Co-ban">Cơ bản</a></li>
              <li><a href="/search/label/Bai-tap-Python">Bài tập</a></li>
              <li><a href="/search/label/De-Python">Đề kiểm tra</a></li>
            </ul>
          </li>

          <li class="has-sub">
            <a class="dy-link" href="/search/label/Word">📝 Word</a>
            <button class="dy-caret" type="button" aria-label="Mở menu con"></button>
            <ul class="sub sub-right">
              <li><a href="/search/label/Word-Soan-thao">Soạn thảo</a></li>
              <li><a href="/search/label/Word-Dinh-dang">Định dạng</a></li>
              <li><a href="/search/label/Mau-Word">Mẫu Word</a></li>
            </ul>
          </li>

          <li class="has-sub">
            <a class="dy-link" href="/search/label/Thiet-ke-web-tinh">🧩 Thiết kế web tĩnh</a>
            <button class="dy-caret" type="button" aria-label="Mở menu con"></button>
            <ul class="sub sub-right">
              <li><a href="/search/label/HTML">HTML</a></li>
              <li><a href="/search/label/CSS">CSS</a></li>
              <li><a href="/search/label/JavaScript">JavaScript</a></li>
            </ul>
          </li>

          <li class="has-sub">
            <a class="dy-link" href="/search/label/Excel">📊 Excel</a>
            <button class="dy-caret" type="button" aria-label="Mở menu con"></button>
            <ul class="sub sub-right">
              <li><a href="/search/label/Ham-Excel">Hàm cơ bản</a></li>
              <li><a href="/search/label/Bai-tap-Excel">Bài tập</a></li>
              <li><a href="/search/label/File-Excel">File mẫu</a></li>
            </ul>
          </li>

          <li class="divider"></li>
          <li><a href="/search/label/Bai-giang-Tin-hoc">📌 Bài giảng</a></li>
        </ul>
      </li>

      <li class="has-sub">
        <a class="dy-link" href="/search/label/Toan-hoc">🧮 Toán học</a>
        <button class="dy-caret" type="button" aria-label="Mở menu con"></button>
        <ul class="sub">
          <li><a href="/search/label/Dai-so">Đại số</a></li>
          <li><a href="/search/label/Hinh-hoc">Hình học</a></li>
          <li><a href="/search/label/Trac-nghiem-Toan">Trắc nghiệm</a></li>
          <li><a href="/search/label/De-thi-Toan">Đề kiểm tra – đề thi</a></li>
        </ul>
      </li>

      <li class="has-sub">
        <a class="dy-link" href="/search/label/Ky-nang-so">🎯 Kỹ năng số</a>
        <button class="dy-caret" type="button" aria-label="Mở menu con"></button>
        <ul class="sub">
          <li><a href="/search/label/Thu-thuat-may-tinh">Thủ thuật máy tính</a></li>
          <li><a href="/search/label/An-toan-thong-tin">An toàn thông tin</a></li>
          <li><a href="/search/label/AI-cho-hoc-sinh">AI cho học sinh</a></li>
          <li><a href="/search/label/Ky-nang-hoc-tap">Kỹ năng học tập</a></li>
        </ul>
      </li>

      <li><a href="/p/lien-he.html">📞 Liên hệ</a></li>
    </ul>
  </div>
</nav>

<style>
:root{--dy-green:#0b8f5a;--dy-green2:#10b981;--dy-deep:#065f46;--dy-yellow:#facc15;--dy-white:#fff;--dy-soft:#ecfdf5;}
.dy-menu,.dy-menu *{box-sizing:border-box;}
.dy-menu{position:relative;z-index:999999;background:var(--dy-green);}
.dy-menu__wrap{max-width:1100px;margin:0 auto;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;overflow:visible;}
.dy-menu__wrap,.dy-menu__list,.dy-menu__list>li{overflow:visible!important;}
.dy-menu__brand{text-decoration:none;font-weight:900;font-size:22px;letter-spacing:.3px;color:var(--dy-yellow);padding:8px 10px;border-radius:12px;}
.dy-menu__list{list-style:none;margin:0;padding:0;display:flex;gap:6px;align-items:center;}
.dy-menu__list>li{position:relative;display:flex;align-items:center;}
.dy-menu__list a{display:inline-flex;align-items:center;gap:6px;padding:10px 12px;text-decoration:none;border-radius:12px;white-space:nowrap;color:var(--dy-white);font-weight:600;transition:background .18s ease,transform .18s ease;}
.dy-menu__list>li>a:hover{background:var(--dy-green2);transform:translateY(-1px);}
.dy-caret{border:0;background:transparent;cursor:pointer;width:34px;height:36px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;margin-left:-6px;}
.dy-caret:before{content:"";width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid rgba(255,255,255,.95);transform:translateY(1px);}
.dy-caret:hover{background:rgba(255,255,255,.10);}
.has-sub{position:relative;}
.sub{display:none;position:absolute;left:0;top:100%;min-width:250px;list-style:none;margin:10px 0 0;padding:8px;border-radius:16px;background:var(--dy-white);box-shadow:0 16px 40px rgba(0,0,0,.18);z-index:999999;}
.sub a{display:flex;width:100%;padding:10px 12px;border-radius:12px;color:var(--dy-deep);font-weight:600;}
.sub a:hover{background:var(--dy-soft);color:var(--dy-green);}
.sub .divider{height:1px;margin:6px 8px;background:rgba(6,95,70,.18);}
.sub-right{left:100%;top:0;margin-left:10px;}
@media (min-width:981px){.dy-caret{display:none;}.has-sub:hover>.sub{display:block;}.sub .has-sub:hover>.sub{display:block;}}
.dy-menu__hamburger{display:none;border:0;background:transparent;cursor:pointer;padding:10px 10px;border-radius:12px;}
.dy-menu__hamburger span{display:block;width:22px;height:2px;margin:5px 0;background:#fff;}
@media (max-width:980px){.dy-menu__hamburger{display:block;}.dy-menu__list{display:none;position:absolute;left:0;right:0;top:100%;margin:0;padding:12px;flex-direction:column;align-items:stretch;background:var(--dy-green);box-shadow:0 16px 40px rgba(0,0,0,.22);}
.dy-menu__list.show{display:flex;}
.dy-menu__list>li{flex-wrap:wrap;justify-content:space-between;}
.dy-menu__list>li>a{flex:1;}
.sub{position:static;width:100%;margin:8px 0 0;box-shadow:none;display:none;}
.sub-right{margin-left:0;}
.has-sub.open>.sub{display:block;}}
</style>

<script>
(function(){
  var nav=document.querySelector('.dy-menu'); if(!nav) return;
  var btn=nav.querySelector('.dy-menu__hamburger');
  var list=nav.querySelector('.dy-menu__list');

  if(btn){
    btn.addEventListener('click',function(){
      var isOpen=list.classList.toggle('show');
      btn.setAttribute('aria-expanded',isOpen?'true':'false');
    });
  }

  nav.querySelectorAll('.has-sub > .dy-caret').forEach(function(caret){
    caret.addEventListener('click',function(e){
      e.preventDefault(); e.stopPropagation();
      var li=caret.parentElement;
      Array.prototype.forEach.call(li.parentElement.children,function(sib){
        if(sib!==li) sib.classList.remove('open');
      });
      li.classList.toggle('open');
    });
  });

  document.addEventListener('click',function(e){
    if(!nav.contains(e.target)){
      nav.querySelectorAll('.has-sub.open').forEach(function(li){li.classList.remove('open');});
      list && list.classList.remove('show');
      btn && btn.setAttribute('aria-expanded','false');
    }
  });
})();
</script>

---

4) Ghi chú quan trọng

• Muốn menu chạy thật: dán code ở Bố cục → HTML/JavaScript.
• Muốn đăng bài chia sẻ code: giữ nguyên khối <pre><code> để người đọc copy.
• Nếu dropdown bị “cắt”: thêm CSS nâng cao:
  #header, .header, .Header, .navbar, .nav-wrapper { overflow: visible !important; }

Chúc bạn dựng blog học tập thật chuyên nghiệp! Nếu bạn muốn phiên bản sticky (dính khi cuộn) hoặc thêm ô tìm kiếm ngay trên menu, mình làm tiếp cho bạn.