תפריט מובייל

שלושה דברים שתפריט מובייל כמעט תמיד שוכח: הרקע ממשיך להיגלל מתחת לתפריט, Esc לא סוגר, והמיקוד נופל לתחילת העמוד אחרי סגירה. שלושתם מטופלים כאן, והמגירה נפתחת מצד תחילת השורה (בעברית מימין). תפריט מובייל הוא רכיב מתוך רכיבים של כליקס. מה שמורידים הוא רכיב שלם, גם כ-HTML עצמאי וגם כרכיב React. אין ספרייה חיצונית, אין שלב בנייה, ואם כליקס ייעלם מחר הקוד ימשיך לעבוד. מתאים לעמודים ולמסמכים שעוסקים בניווט, מובייל ונגישות. באותה סדרה יש גם שאלות נפוצות, מחירון עם מתג ודירוג כוכבים.

רכיב · ניווט · מובייל · נגישות

<!-- תפריט מובייל: ערכו את הקישורים ברשימה -->
<style>
  .klix-nav-open, .klix-nav-close { display: grid; place-items: center; width: 2.75rem;
    height: 2.75rem; padding: 0; border: 0; border-radius: .8rem; background: #1e293b;
    color: #e2e8f0; font-size: 1.25rem; cursor: pointer }
  .klix-nav-back { position: fixed; inset: 0; z-index: 50; background: rgba(2,6,23,.7);
    display: none }
  .klix-nav-back[data-open="1"] { display: block }
  .klix-nav-panel { position: absolute; inset-block: 0; inset-inline-start: 0; width: 17rem;
    padding: 1.25rem; background: #0f172a; transform: translateX(-100%);
    transition: transform .25s ease }
  [dir="rtl"] .klix-nav-panel { transform: translateX(100%) }
  .klix-nav-back[data-open="1"] .klix-nav-panel { transform: none }
  .klix-nav-panel ul { margin: 1rem 0 0; padding: 0; list-style: none }
  .klix-nav-panel a { display: block; padding: .75rem; border-radius: .6rem;
    color: #e2e8f0; font-weight: 700; text-decoration: none }
  .klix-nav-panel a:hover { background: rgba(255,255,255,.06) }
  html[data-motion="off"] .klix-nav-panel { transition: none }
</style>

<button class="klix-nav-open" type="button" aria-label="פתיחת תפריט" aria-expanded="false">☰</button>

<div class="klix-nav-back" id="klix-nav">
  <nav class="klix-nav-panel" aria-label="תפריט ראשי">
    <button class="klix-nav-close" type="button" aria-label="סגירת תפריט">×</button>
    <ul>
      <li><a href="#services">שירותים</a></li>
      <li><a href="#about">עלינו</a></li>
      <li><a href="#faq">שאלות נפוצות</a></li>
      <li><a href="#contact">צרו קשר</a></li>
    </ul>
  </nav>
</div>

<script>
(function () {
  var back = document.getElementById('klix-nav');
  var opener = document.querySelector('.klix-nav-open');
  if (!back || !opener) return;

  function setOpen(on) {
    back.setAttribute('data-open', on ? '1' : '0');
    opener.setAttribute('aria-expanded', on ? 'true' : 'false');
    // נועלים את גלילת הרקע כל עוד התפריט פתוח
    document.body.style.overflow = on ? 'hidden' : '';
    if (!on) opener.focus();   // המיקוד חוזר לכפתור ולא נופל לתחילת העמוד
  }

  opener.addEventListener('click', function () { setOpen(true); });
  back.addEventListener('click', function (e) {
    if (e.target === back || e.target.closest('.klix-nav-close, .klix-nav-panel a')) setOpen(false);
  });
  window.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') setOpen(false);
  });
})();
</script>