Meniu Hamburger Accesibil Pur CSS (Zero JavaScript)

1. Structura Semantică HTML5

Pentru a respecta standardele de accesibilitate și SEO, structura de bază plasează checkbox-ul ascuns vizual, eticheta interactivă cu liniile grafice și elementul semantic <nav>:

<header class="header-mobil">
  <a href="/" class="logo">Brand</a>

  <!-- Checkbox-ul care stocheaza starea deschis/inchis -->
  <input type="checkbox" id="burger-toggle" class="burger-checkbox" aria-label="Comută meniul de navigare">

  <!-- Butonul vizual accesibil (Label legat prin for) -->
  <label for="burger-toggle" class="burger-btn" tabindex="0">
    <span class="bar bar-1"></span>
    <span class="bar bar-2"></span>
    <span class="bar bar-3"></span>
  </label>

  <!-- Meniul propriu-zis care gliseaza -->
  <nav class="nav-drawer">
    <ul>
      <li><a href="index.php">Acasă</a></li>
      <li><a href="selectori.php">Selectori CSS</a></li>
      <li><a href="layout.php">Layout Flex & Grid</a></li>
      <li><a href="contact.php">Contact</a></li>
    </ul>
  </nav>
</header>

2. Stilurile CSS pentru Animația Hamburger → X

Prin utilizarea proprietăților transform și opacity, obținem o tranziție calculată direct pe placa grafică (GPU), garantând 60–120 cadre pe secundă chiar și pe telefoane mobile economice:

/* 1. Ascundem input-ul nativ pastrandu-l functional */
.burger-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* 2. Containerul butonului hamburger */
.burger-btn {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  cursor: pointer;
  z-index: 100;
}

/* 3. Cele 3 linii orizontale */
.burger-btn .bar {
  display: block;
  width: 100%;
  height: 2.5px;
  background-color: var(--cream);
  border-radius: 2px;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1),
              opacity .2s ease;
}

/* 4. Transformarea magica la starea :checked */
.burger-checkbox:checked + .burger-btn .bar-1 {
  transform: translateY(8.5px) rotate(45deg);
}

.burger-checkbox:checked + .burger-btn .bar-2 {
  opacity: 0; /* Linia din mijloc dispare lin */
}

.burger-checkbox:checked + .burger-btn .bar-3 {
  transform: translateY(-8.5px) rotate(-45deg);
}

3. Efectul de Sertar Glisant (Slide Drawer)

Navigația se poziționează în afara ecranului prin transform: translateX(100%) și este adusă la translateX(0) atunci când meniul este activat:

.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(80vw, 320px);
  height: 100vh;
  background: var(--blue-deep);
  box-shadow: -4px 0 24px rgba(0, 0, 0, .3);
  padding: 80px 24px 24px;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
  z-index: 90;
}

/* Cand utilizatorul bifeaza butonul, sertarul intra pe ecran */
.burger-checkbox:checked ~ .nav-drawer {
  transform: translateX(0);
}

4. Accesibilitate la Tastatură și Reguli WCAG

Un meniu fără JavaScript trebuie să poată fi operat la fel de ușor de persoanele care navighează exclusiv cu tasta Tab:

/* Evidentiere la navigarea prin tasta TAB */
.burger-checkbox:focus-visible + .burger-btn {
  outline: 2px solid var(--accent-2);
  outline-offset: 4px;
}

De asemenea, pentru a preveni derularea accidentală a conținutului de fundal când meniul este deschis, putem folosi selectorul modern :has():

/* Opreste scroll-ul paginii doar cand meniul este activ */
body:has(#burger-toggle:checked) {
  overflow: hidden;
}