3.2.3 - Következetes navigáció

Kategória: 3. Érthető (Understandable) Irányelv: 3.2. Kiszámítható Szint: AA

Röviden a szabványpontról

A WCAG 2.2 Success Criterion 3.2.3 (Consistent Navigation) megköveteli, hogy azok a navigációs mechanizmusok, amelyek több weboldalon ismétlődnek egy weboldalcsoporton belül, minden alkalommal ugyanabban a relatív sorrendben jelenjenek meg. Ez vonatkozik a navigációs menükre, keresőmezőkre, tartalomjegyzékekre és más navigációs elemekre, amelyeket a webhelyen, vagy alkalmazásban használnak.

Cél: Segíteni a felhasználókat, különösen azokat, akik kognitív fogyatékossággal élnek vagy kisegítő technológiákra támaszkodnak, hogy előre jelezzék és hatékonyan használják a navigációs elemeket anélkül, hogy minden oldalon újra meg kellene tanulniuk a felületet. A következetesség csökkenti a zavart és a kognitív terhelést, megkönnyítve a kívánt tartalom elérését.

Mire vonatkozik: Minden olyan navigációs elemre, amely több oldalon ismétlődik, beleértve a főmenüket, másodlagos navigációt, keresőmezőket, tartalomjegyzékeket, és minden más olyan elemet, amely segíti a felhasználót a webhelyen való tájékozódásban.

Kiket érint

Elsődleges felhasználók: Kognitív fogyatékossággal, memóriaproblémákkal és tanulási nehézségekkel élő emberek profitálnak a legtöbbet, mert a következetes navigáció segíti őket a webhely mentális modelljének felépítésében.

Másodlagos előnyök: A motoros fogyatékossággal élő felhasználók vagy képernyőolvasót használók szintén profitálnak a kiszámítható navigációs sorrendből, javítva az általános böngészési hatékonyságukat.

Tesztelés

Manuális áttekintés több oldalon: Ellenőrizd a navigációs menüket és más ismétlődő navigációs elemeket több oldalon, hogy megbizonyosodj arról, hogy ugyanabban a relatív sorrendben vannak
Képernyőolvasó tesztelés: Használj képernyőolvasót az ismétlődő navigációs elemeken való navigáláshoz különböző oldalakon és ellenőrizd, hogy a sorrend következetes
Mobil tesztelés: Mobil eszközökön ellenőrizd, hogy a navigációs komponensek megtartják ugyanazt a relatív sorrendet a különböző képernyőkön
Automatizált eszközök: Használj eszközöket, mint az axe DevTools vagy axe Monitor a navigációs konzisztencia problémák felismerésére, ha támogatottak
Felhasználói tesztelés: Figyelj meg fogyatékossággal élő felhasználókat a webhelyen való navigálás során, hogy azonosítsd a konzisztenciahiány okozta zavarokat

Jó gyakorlatok

1. Következetes főmenü minden oldalon

<!DOCTYPE html>
<html lang="hu">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Főoldal - Példa Weboldal</title>
</head>
<body>
  <header>
    <div class="logo">
      <img src="logo.png" alt="Példa Weboldal logója">
    </div>
    
    <!-- Főnavigáció - MINDEN oldalon ugyanez a sorrend -->
    <nav role="navigation" aria-label="Főnavigáció">
      <ul class="main-menu">
        <li><a href="/fooldal" aria-current="page">Főoldal</a></li>
        <li><a href="/rolunk">Rólunk</a></li>
        <li><a href="/szolgaltatasok">Szolgáltatások</a></li>
        <li><a href="/portfolio">Portfólió</a></li>
        <li><a href="/blog">Blog</a></li>
        <li><a href="/kapcsolat">Kapcsolat</a></li>
      </ul>
    </nav>
    
    <!-- Keresőmező - mindig a navigáció után -->
    <form role="search" aria-label="Webhely keresése" class="search-form">
      <label for="search-input" class="visually-hidden">Keresés a weboldalon</label>
      <input type="search" id="search-input" name="q" placeholder="Keresés...">
      <button type="submit" aria-label="Keresés indítása">Keresés</button>
    </form>
  </header>
  
  <main>
    <h1>Üdvözöljük a főoldalon</h1>
    <p>Itt található a főoldal tartalma...</p>
  </main>
  
  <footer>
    <!-- Lábléc navigáció - szintén konzisztens sorrend -->
    <nav aria-label="Lábléc navigáció">
      <ul class="footer-menu">
        <li><a href="/adatvedelem">Adatvédelmi nyilatkozat</a></li>
        <li><a href="/felhasznalasi-feltetelek">Felhasználási feltételek</a></li>
        <li><a href="/sutikezelesi-tajekoztato">Sütikezelési tájékoztató</a></li>
        <li><a href="/sitemap">Oldaltérkép</a></li>
      </ul>
    </nav>
  </footer>
</body>
</html>

<!-- SZOLGÁLTATÁSOK OLDAL - Ugyanaz a navigációs sorrend -->
<!DOCTYPE html>
<html lang="hu">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Szolgáltatások - Példa Weboldal</title>
</head>
<body>
  <header>
    <div class="logo">
      <img src="logo.png" alt="Példa Weboldal logója">
    </div>
    
    <!-- PONTOSAN UGYANAZ a navigációs sorrend -->
    <nav role="navigation" aria-label="Főnavigáció">
      <ul class="main-menu">
        <li><a href="/fooldal">Főoldal</a></li>
        <li><a href="/rolunk">Rólunk</a></li>
        <li><a href="/szolgaltatasok" aria-current="page">Szolgáltatások</a></li>
        <li><a href="/portfolio">Portfólió</a></li>
        <li><a href="/blog">Blog</a></li>
        <li><a href="/kapcsolat">Kapcsolat</a></li>
      </ul>
    </nav>
    
    <!-- Keresőmező ugyanazon a helyen -->
    <form role="search" aria-label="Webhely keresése" class="search-form">
      <label for="search-input" class="visually-hidden">Keresés a weboldalon</label>
      <input type="search" id="search-input" name="q" placeholder="Keresés...">
      <button type="submit" aria-label="Keresés indítása">Keresés</button>
    </form>
  </header>
  
  <main>
    <h1>Szolgáltatásaink</h1>
    
    <!-- Másodlagos navigáció - szintén konzisztens -->
    <nav aria-label="Szolgáltatások navigáció" class="secondary-nav">
      <ul>
        <li><a href="#webfejlesztes">Webfejlesztés</a></li>
        <li><a href="#webdesign">Webdesign</a></li>
        <li><a href="#seo">SEO optimalizálás</a></li>
        <li><a href="#karbantartas">Weboldal karbantartás</a></li>
      </ul>
    </nav>
    
    <p>Itt található a szolgáltatások oldal tartalma...</p>
  </main>
  
  <footer>
    <!-- Lábléc navigáció - ugyanaz a sorrend -->
    <nav aria-label="Lábléc navigáció">
      <ul class="footer-menu">
        <li><a href="/adatvedelem">Adatvédelmi nyilatkozat</a></li>
        <li><a href="/felhasznalasi-feltetelek">Felhasználási feltételek</a></li>
        <li><a href="/sutikezelesi-tajekoztato">Sütikezelési tájékoztató</a></li>
        <li><a href="/sitemap">Oldaltérkép</a></li>
      </ul>
    </nav>
  </footer>
</body>
</html>

Magyarázat: A navigációs elemek sorrendje minden oldalon pontosan ugyanaz, lehetővé téve a felhasználók számára, hogy megjegyezzék és hatékonyan használják a navigációt.

2. Felhasználói profil navigáció következetes elhelyezéssel

<!-- PROFIL OLDAL -->
<div class="user-dashboard">
  <header class="dashboard-header">
    <h1>Felhasználói irányítópult</h1>
    
    <!-- Felhasználói menü - mindig ugyanez a sorrend -->
    <nav aria-label="Felhasználói menü" class="user-nav">
      <ul>
        <li><a href="/profil" aria-current="page">Profil</a></li>
        <li><a href="/beallitasok">Beállítások</a></li>
        <li><a href="/uzeneteim">Üzeneteim</a></li>
        <li><a href="/rendeleseim">Rendeléseim</a></li>
        <li><a href="/kedvencek">Kedvencek</a></li>
        <li><a href="/kijelentkezes">Kijelentkezés</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    <h2>Profil adatok</h2>
    <p>Profil oldal tartalma...</p>
  </main>
</div>

<!-- BEÁLLÍTÁSOK OLDAL - Ugyanaz a navigációs sorrend -->
<div class="user-dashboard">
  <header class="dashboard-header">
    <h1>Felhasználói irányítópult</h1>
    
    <!-- PONTOSAN UGYANAZ a navigációs sorrend -->
    <nav aria-label="Felhasználói menü" class="user-nav">
      <ul>
        <li><a href="/profil">Profil</a></li>
        <li><a href="/beallitasok" aria-current="page">Beállítások</a></li>
        <li><a href="/uzeneteim">Üzeneteim</a></li>
        <li><a href="/rendeleseim">Rendeléseim</a></li>
        <li><a href="/kedvencek">Kedvencek</a></li>
        <li><a href="/kijelentkezes">Kijelentkezés</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    <h2>Fiók beállítások</h2>
    
    <!-- Beállítások al-navigáció - szintén konzisztens -->
    <nav aria-label="Beállítások almenü" class="settings-nav">
      <ul>
        <li><a href="#alapadatok">Alapadatok</a></li>
        <li><a href="#jelszo">Jelszó módosítás</a></li>
        <li><a href="#ertesitesek">Értesítések</a></li>
        <li><a href="#adatvedelem">Adatvédelem</a></li>
        <li><a href="#fiok-torlese">Fiók törlése</a></li>
      </ul>
    </nav>
    
    <p>Beállítások oldal tartalma...</p>
  </main>
</div>

<style>
.user-dashboard {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

.dashboard-header {
  background: #f8f9fa;
  padding: 1rem;
  border-bottom: 2px solid #e9ecef;
  margin-bottom: 2rem;
}

.user-nav ul, .settings-nav ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.user-nav li, .settings-nav li {
  margin: 0;
}

.user-nav a, .settings-nav a {
  display: block;
  padding: 0.75rem 1rem;
  text-decoration: none;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  color: #495057;
  transition: all 0.2s ease;
}

.user-nav a:hover, .settings-nav a:hover,
.user-nav a:focus, .settings-nav a:focus {
  background: #e9ecef;
  border-color: #007bff;
  text-decoration: none;
}

.user-nav a[aria-current="page"], 
.settings-nav a[aria-current="page"] {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

/* Mobil nézet */
@media (max-width: 768px) {
  .user-nav ul, .settings-nav ul {
    flex-direction: column;
  }
  
  .user-nav a, .settings-nav a {
    text-align: center;
  }
}

/* Vizuálisan rejtett elemek */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
</style>

Magyarázat: A felhasználói navigáció minden dashboard oldalon ugyanabban a sorrendben jelenjen meg, megkönnyítve a tájékozódást.

3. Mobilbarát következetes navigáció

<!DOCTYPE html>
<html lang="hu">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mobilbarát Navigáció</title>
</head>
<body>
  <header class="main-header">
    <div class="header-container">
      <!-- Logo mindig ugyanazon a helyen -->
      <div class="logo">
        <a href="/fooldal" aria-label="Vissza a főoldalra">
          <img src="logo.png" alt="Weboldal logója">
        </a>
      </div>
      
      <!-- Hamburger menü gomb - mindig a logo után -->
      <button 
        class="menu-toggle" 
        aria-expanded="false" 
        aria-controls="main-navigation"
        aria-label="Navigációs menü megnyitása"
        onclick="toggleMenu()"
      >
        <span class="hamburger-line"></span>
        <span class="hamburger-line"></span>
        <span class="hamburger-line"></span>
      </button>
      
      <!-- Keresős ikon - mindig a menügomb után -->
      <button 
        class="search-toggle" 
        aria-expanded="false"
        aria-controls="search-form"
        aria-label="Keresés megnyitása"
        onclick="toggleSearch()"
      >
        🔍
      </button>
    </div>
    
    <!-- Főnavigáció - rejtett alapállapotban mobilon -->
    <nav 
      id="main-navigation" 
      class="main-nav" 
      role="navigation" 
      aria-label="Főnavigáció"
    >
      <ul class="nav-list">
        <!-- MINDIG ugyanez a sorrend minden oldalon -->
        <li><a href="/fooldal">Főoldal</a></li>
        <li><a href="/termekek">Termékek</a></li>
        <li><a href="/rolunk">Rólunk</a></li>
        <li><a href="/blog">Blog</a></li>
        <li><a href="/kapcsolat">Kapcsolat</a></li>
        <li><a href="/vasarlas">Vásárlás</a></li>
      </ul>
      
      <!-- Másodlagos navigációs elemek - mindig ugyanitt -->
      <div class="secondary-nav-mobile">
        <ul>
          <li><a href="/bejelentkezes">Bejelentkezés</a></li>
          <li><a href="/regisztracio">Regisztráció</a></li>
          <li><a href="/kosar">Kosár (3)</a></li>
        </ul>
      </div>
    </nav>
    
    <!-- Keresőforma - rejtett alapállapotban -->
    <form 
      id="search-form" 
      class="search-form" 
      role="search" 
      aria-label="Webhely keresése"
    >
      <div class="search-container">
        <label for="mobile-search" class="visually-hidden">Keresőkifejezés</label>
        <input 
          type="search" 
          id="mobile-search" 
          name="q" 
          placeholder="Keresés..." 
          aria-describedby="search-help"
        >
        <button type="submit" aria-label="Keresés indítása">Keresés</button>
        <button 
          type="button" 
          class="search-close" 
          aria-label="Keresés bezárása"
          onclick="toggleSearch()"
        >×</button>
      </div>
      <div id="search-help" class="search-help">
        Írja be a keresett kifejezést és nyomja meg az Enter billentyűt.
      </div>
    </form>
  </header>
  
  <main>
    <h1>Oldal tartalma</h1>
    <p>Ez a tartalom minden oldalon más, de a navigáció mindig ugyanaz.</p>
  </main>
  
  <!-- Alsó navigáció mobilra - opcionális, de ha van, akkor konzisztens -->
  <nav class="bottom-nav" aria-label="Gyors navigáció" role="navigation">
    <ul>
      <li>
        <a href="/fooldal">
          <span class="nav-icon">🏠</span>
          <span>Főoldal</span>
        </a>
      </li>
      <li>
        <a href="/termekek">
          <span class="nav-icon">📦</span>
          <span>Termékek</span>
        </a>
      </li>
      <li>
        <a href="/kosar">
          <span class="nav-icon">🛒</span>
          <span>Kosár</span>
        </a>
      </li>
      <li>
        <a href="/profil">
          <span class="nav-icon">👤</span>
          <span>Profil</span>
        </a>
      </li>
    </ul>
  </nav>

<script>
function toggleMenu() {
  const nav = document.getElementById('main-navigation');
  const button = document.querySelector('.menu-toggle');
  const isExpanded = button.getAttribute('aria-expanded') === 'true';
  
  // Állapot váltása
  button.setAttribute('aria-expanded', !isExpanded);
  nav.classList.toggle('nav-open');
  
  // Hamburger animáció
  button.classList.toggle('menu-open');
  
  // Képernyőolvasó értesítése
  const announcement = document.createElement('div');
  announcement.setAttribute('role', 'status');
  announcement.setAttribute('aria-live', 'polite');
  announcement.className = 'visually-hidden';
  announcement.textContent = !isExpanded ? 
    'Navigációs menü megnyitva' : 
    'Navigációs menü bezárva';
  document.body.appendChild(announcement);
  
  setTimeout(() => {
    if (announcement.parentNode) {
      document.body.removeChild(announcement);
    }
  }, 1000);
  
  // Fókusz kezelése
  if (!isExpanded) {
    // Menü megnyitásakor az első linkre fókusz
    setTimeout(() => {
      const firstLink = nav.querySelector('a');
      if (firstLink) firstLink.focus();
    }, 100);
  }
}

function toggleSearch() {
  const form = document.getElementById('search-form');
  const button = document.querySelector('.search-toggle');
  const isExpanded = button.getAttribute('aria-expanded') === 'true';
  
  // Állapot váltása
  button.setAttribute('aria-expanded', !isExpanded);
  form.classList.toggle('search-open');
  
  // Fókusz kezelése
  if (!isExpanded) {
    setTimeout(() => {
      const searchInput = document.getElementById('mobile-search');
      if (searchInput) searchInput.focus();
    }, 100);
  }
}

// Escape billentyű kezelése
document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') {
    // Menü bezárása
    const nav = document.getElementById('main-navigation');
    const menuButton = document.querySelector('.menu-toggle');
    if (nav.classList.contains('nav-open')) {
      menuButton.setAttribute('aria-expanded', 'false');
      nav.classList.remove('nav-open');
      menuButton.classList.remove('menu-open');
      menuButton.focus();
    }
    
    // Keresés bezárása
    const form = document.getElementById('search-form');
    const searchButton = document.querySelector('.search-toggle');
    if (form.classList.contains('search-open')) {
      searchButton.setAttribute('aria-expanded', 'false');
      form.classList.remove('search-open');
      searchButton.focus();
    }
  }
});

// Kattintás a menün kívülre
document.addEventListener('click', function(e) {
  const nav = document.getElementById('main-navigation');
  const menuButton = document.querySelector('.menu-toggle');
  
  if (!nav.contains(e.target) && !menuButton.contains(e.target)) {
    if (nav.classList.contains('nav-open')) {
      menuButton.setAttribute('aria-expanded', 'false');
      nav.classList.remove('nav-open');
      menuButton.classList.remove('menu-open');
    }
  }
});
</script>

<style>
/* Alapstílusok */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

.main-header {
  background: white;
  border-bottom: 1px solid #e9ecef;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

.logo img {
  height: 40px;
  width: auto;
}

/* Gomb stílusok */
.menu-toggle, .search-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.menu-toggle:hover, .search-toggle:hover,
.menu-toggle:focus, .search-toggle:focus {
  background: #f8f9fa;
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* Hamburger menü */
.menu-toggle {
  display: flex;
  flex-direction: column;
  width: 30px;
  height: 30px;
  justify-content: center;
  gap: 4px;
}

.hamburger-line {
  width: 100%;
  height: 3px;
  background: #333;
  transition: all 0.3s ease;
  border-radius: 2px;
}

.menu-open .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.menu-open .hamburger-line:nth-child(2) {
  opacity: 0;
}

.menu-open .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Navigáció */
.main-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border-top: 1px solid #e9ecef;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.main-nav.nav-open {
  max-height: 500px;
}

.nav-list {
  list-style: none;
  padding: 1rem;
}

.nav-list li {
  margin-bottom: 0.5rem;
}

.nav-list a {
  display: block;
  padding: 0.75rem;
  text-decoration: none;
  color: #333;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.nav-list a:hover, .nav-list a:focus {
  background: #f8f9fa;
  text-decoration: none;
}

/* Másodlagos navigáció */
.secondary-nav-mobile {
  border-top: 1px solid #e9ecef;
  margin-top: 1rem;
  padding-top: 1rem;
}

.secondary-nav-mobile ul {
  list-style: none;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.secondary-nav-mobile a {
  padding: 0.5rem 1rem;
  background: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.9em;
}

/* Keresőforma */
.search-form {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border-top: 1px solid #e9ecef;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.search-form.search-open {
  max-height: 200px;
}

.search-container {
  padding: 1rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.search-container input {
  flex: 1;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

.search-container button {
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.search-container button[type="submit"] {
  background: #007bff;
  color: white;
}

.search-close {
  background: #dc3545;
  color: white;
  font-size: 1.2em;
}

.search-help {
  padding: 0 1rem 1rem;
  font-size: 0.9em;
  color: #666;
}

/* Alsó navigáció */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-top: 1px solid #e9ecef;
  z-index: 1000;
}

.bottom-nav ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.bottom-nav li {
  flex: 1;
}

.bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem;
  text-decoration: none;
  color: #666;
  font-size: 0.8em;
}

.bottom-nav a:hover, .bottom-nav a:focus {
  background: #f8f9fa;
  color: #007bff;
}

.nav-icon {
  font-size: 1.2em;
  margin-bottom: 0.25rem;
}

/* Asztali nézet */
@media (min-width: 768px) {
  .menu-toggle, .search-toggle {
    display: none;
  }
  
  .main-nav {
    position: static;
    max-height: none;
    border: none;
    background: transparent;
  }
  
  .nav-list {
    display: flex;
    gap: 1rem;
    padding: 0;
    margin: 0;
  }
  
  .nav-list li {
    margin: 0;
  }
  
  .secondary-nav-mobile {
    display: none;
  }
  
  .search-form {
    position: static;
    max-height: none;
    background: transparent;
    border: none;
  }
  
  .search-container {
    padding: 0;
  }
  
  .bottom-nav {
    display: none;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
</style>
</body>
</html>

Magyarázat: A mobil navigáció minden oldalon ugyanabban a sorrendben és pozícióban jelenik meg, függetlenül a képernyő méretétől.

4. Újrafelhasználható komponensek és sablonok

<!-- NAVIGÁCIÓS KOMPONENS SABLON -->
<script type="text/template" id="navigation-template">
<nav role="navigation" aria-label="{{navLabel}}">
  <ul class="{{navClass}}">
    {{#each menuItems}}
    <li>
      <a href="{{url}}" 
         {{#if current}}aria-current="page"{{/if}}
         {{#if ariLabel}}aria-label="{{ariaLabel}}"{{/if}}>
        {{title}}
        {{#if badge}}<span class="nav-badge">{{badge}}</span>{{/if}}
      </a>
    </li>
    {{/each}}
  </ul>
</nav>
</script>

<script>
// Navigációs konfigurációk - KÖZPONTI hely a konzisztencia biztosítására
const NavigationConfig = {
  // Főnavigáció - minden oldalon ugyanez
  mainNavigation: {
    navLabel: 'Főnavigáció',
    navClass: 'main-nav-list',
    menuItems: [
      { url: '/fooldal', title: 'Főoldal', ariaLabel: 'Vissza a főoldalra' },
      { url: '/termekek', title: 'Termékek' },
      { url: '/kategoriak', title: 'Kategóriák' },
      { url: '/akcio', title: 'Akciók' },
      { url: '/blog', title: 'Blog' },
      { url: '/kapcsolat', title: 'Kapcsolat' },
      { url: '/vasarlas', title: 'Vásárlás' }
    ]
  },
  
  // Felhasználói navigáció
  userNavigation: {
    navLabel: 'Felhasználói menü',
    navClass: 'user-nav-list',
    menuItems: [
      { url: '/profil', title: 'Profil' },
      { url: '/rendeleseim', title: 'Rendeléseim' },
      { url: '/kedvencek', title: 'Kedvencek' },
      { url: '/uzeneteim', title: 'Üzenetek', badge: '3' },
      { url: '/beallitasok', title: 'Beállítások' },
      { url: '/kijelentkezes', title: 'Kijelentkezés' }
    ]
  },
  
  // Admin navigáció
  adminNavigation: {
    navLabel: 'Adminisztrációs menü',
    navClass: 'admin-nav-list',
    menuItems: [
      { url: '/admin/iranyitopult', title: 'Irányítópult' },
      { url: '/admin/felhasznalok', title: 'Felhasználók' },
      { url: '/admin/termekek', title: 'Termékek' },
      { url: '/admin/rendelesek', title: 'Rendelések' },
      { url: '/admin/statisztikak', title: 'Statisztikák' },
      { url: '/admin/beallitasok', title: 'Rendszer beállítások' }
    ]
  },
  
  // Lábléc navigáció
  footerNavigation: {
    navLabel: 'Lábléc navigáció',
    navClass: 'footer-nav-list',
    menuItems: [
      { url: '/adatvedelem', title: 'Adatvédelmi nyilatkozat' },
      { url: '/aszf', title: 'ÁSZF' },
      { url: '/sutikezelesi-tajekoztato', title: 'Sütikezelési tájékoztató' },
      { url: '/impresszum', title: 'Impresszum' },
      { url: '/sitemap', title: 'Oldaltérkép' }
    ]
  }
};

// Navigáció renderelése
function renderNavigation(configKey, currentPath = '') {
  const config = NavigationConfig[configKey];
  if (!config) {
    console.error(`Navigációs konfiguráció nem található: ${configKey}`);
    return '';
  }
  
  // Aktuális oldal jelölése
  const menuItems = config.menuItems.map(item => ({
    ...item,
    current: item.url === currentPath
  }));
  
  // Sablon feldolgozása (egyszerű Handlebars-szerű)
  let template = document.getElementById('navigation-template').innerHTML;
  
  // Sablon változók cseréje
  template = template.replace('{{navLabel}}', config.navLabel);
  template = template.replace('{{navClass}}', config.navClass);
  
  // Menüelemek renderelése
  let menuHTML = '';
  menuItems.forEach(item => {
    let itemHTML = `
      <li>
        <a href="${item.url}"`;
    
    if (item.current) {
      itemHTML += ` aria-current="page"`;
    }
    
    if (item.ariaLabel) {
      itemHTML += ` aria-label="${item.ariaLabel}"`;
    }
    
    itemHTML += `>${item.title}`;
    
    if (item.badge) {
      itemHTML += `<span class="nav-badge">${item.badge}</span>`;
    }
    
    itemHTML += `</a></li>`;
    menuHTML += itemHTML;
  });
  
  template = template.replace('{{#each menuItems}}{{/each}}', menuHTML);
  
  return template;
}

// Navigáció beszúrása a DOM-ba
function insertNavigation(containerId, configKey, currentPath = '') {
  const container = document.getElementById(containerId);
  if (container) {
    container.innerHTML = renderNavigation(configKey, currentPath);
  }
}

// Oldal betöltésekor navigációk renderelése
document.addEventListener('DOMContentLoaded', function() {
  // Jelenlegi útvonal meghatározása
  const currentPath = window.location.pathname;
  
  // Navigációk beszúrása
  insertNavigation('main-navigation', 'mainNavigation', currentPath);
  insertNavigation('user-navigation', 'userNavigation', currentPath);
  insertNavigation('footer-navigation', 'footerNavigation', currentPath);
  
  // Admin oldalakon admin navigáció
  if (currentPath.startsWith('/admin/')) {
    insertNavigation('admin-navigation', 'adminNavigation', currentPath);
  }
});

// Navigáció frissítése AJAX hívások után
function updateNavigationForPage(newPath) {
  insertNavigation('main-navigation', 'mainNavigation', newPath);
  insertNavigation('user-navigation', 'userNavigation', newPath);
  
  if (newPath.startsWith('/admin/')) {
    insertNavigation('admin-navigation', 'adminNavigation', newPath);
  }
}

// Dinamikus badge frissítése
function updateNavigationBadge(configKey, itemUrl, newBadge) {
  const config = NavigationConfig[configKey];
  const item = config.menuItems.find(item => item.url === itemUrl);
  
  if (item) {
    if (newBadge) {
      item.badge = newBadge;
    } else {
      delete item.badge;
    }
    
    // Navigáció újra renderelése
    const currentPath = window.location.pathname;
    if (configKey === 'mainNavigation') {
      insertNavigation('main-navigation', configKey, currentPath);
    } else if (configKey === 'userNavigation') {
      insertNavigation('user-navigation', configKey, currentPath);
    }
  }
}

// Példa használat:
// updateNavigationBadge('userNavigation', '/uzeneteim', '5'); // Új üzenetek
// updateNavigationBadge('userNavigation', '/uzeneteim', null); // Badge eltávolítása
</script>

<!-- HTML struktúra -->
<div class="page-layout">
  <header>
    <div class="logo">
      <img src="logo.png" alt="Weboldal logója">
    </div>
    
    <!-- Főnavigáció konténer -->
    <div id="main-navigation"></div>
    
    <!-- Felhasználói navigáció konténer -->
    <div id="user-navigation"></div>
  </header>
  
  <main>
    <!-- Admin oldalon admin navigáció -->
    <div id="admin-navigation"></div>
    
    <h1>Oldal tartalma</h1>
    <p>Az oldal tartalma változik, de a navigáció mindig konzisztens.</p>
  </main>
  
  <footer>
    <!-- Lábléc navigáció konténer -->
    <div id="footer-navigation"></div>
  </footer>
</div>

<style>
/* Navigációs stílusok */
.main-nav-list, .user-nav-list, .admin-nav-list, .footer-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.main-nav-list a, .user-nav-list a, .admin-nav-list a, .footer-nav-list a {
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.main-nav-list a {
  background: #f8f9fa;
  color: #495057;
  border: 1px solid #dee2e6;
}

.user-nav-list a {
  background: #007bff;
  color: white;
}

.admin-nav-list a {
  background: #28a745;
  color: white;
}

.footer-nav-list a {
  background: transparent;
  color: #6c757d;
}

/* Hover és fókusz állapotok */
.main-nav-list a:hover, .main-nav-list a:focus {
  background: #e9ecef;
  border-color: #007bff;
}

.user-nav-list a:hover, .user-nav-list a:focus {
  background: #0056b3;
}

.admin-nav-list a:hover, .admin-nav-list a:focus {
  background: #1e7e34;
}

.footer-nav-list a:hover, .footer-nav-list a:focus {
  color: #495057;
  text-decoration: underline;
}

/* Aktuális oldal kiemelése */
.main-nav-list a[aria-current="page"] {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

.user-nav-list a[aria-current="page"] {
  background: #0056b3;
  font-weight: bold;
}

.admin-nav-list a[aria-current="page"] {
  background: #1e7e34;
  font-weight: bold;
}

.footer-nav-list a[aria-current="page"] {
  color: #007bff;
  font-weight: bold;
}

/* Badge stílus */
.nav-badge {
  background: #dc3545;
  color: white;
  border-radius: 10px;
  padding: 0.2rem 0.5rem;
  font-size: 0.8em;
  font-weight: bold;
  min-width: 1.2em;
  text-align: center;
}

/* Reszponzív navigáció */
@media (max-width: 768px) {
  .main-nav-list, .user-nav-list, .admin-nav-list {
    flex-direction: column;
  }
  
  .footer-nav-list {
    flex-direction: column;
    text-align: center;
  }
}
</style>

Magyarázat: Központi konfigurációs rendszer biztosítja, hogy minden navigációs elem ugyanabban a sorrendben jelenjen meg minden oldalon, automatikusan kezelve a konzisztenciát.

Rossz gyakorlatok

Változó link sorrend oldalak között

<!-- FŐOLDAL navigációja -->
<nav>
  <ul>
    <li><a href="/fooldal">Főoldal</a></li>
    <li><a href="/szolgaltatasok">Szolgáltatások</a></li>
    <li><a href="/rolunk">Rólunk</a></li>
    <li><a href="/kapcsolat">Kapcsolat</a></li>
  </ul>
</nav>

<!-- KAPCSOLAT OLDAL navigációja - HIBÁS: más sorrend -->
<nav>
  <ul>
    <li><a href="/rolunk">Rólunk</a></li> <!-- Sorrend felcserélve -->
    <li><a href="/fooldal">Főoldal</a></li>
    <li><a href="/szolgaltatasok">Szolgáltatások</a></li>
    <li><a href="/kapcsolat">Kapcsolat</a></li>
  </ul>
</nav>

Probléma: A felhasználóknak minden oldalon újra meg kell tanulniuk a navigációs sorrend, ami zavart okoz és növeli a kognitív terhelést.

Navigációs elemek eltérő elhelyezése

<!-- Főoldal - navigáció felül -->
<header>
  <nav>
    <ul>
      <li><a href="/fooldal">Főoldal</a></li>
      <li><a href="/termekek">Termékek</a></li>
    </ul>
  </nav>
</header>

<!-- Termékek oldal - HIBÁS: navigáció oldalt -->
<div class="layout">
  <aside>
    <nav> <!-- Más helyen! -->
      <ul>
        <li><a href="/fooldal">Főoldal</a></li>
        <li><a href="/termekek">Termékek</a></li>
      </ul>
    </nav>
  </aside>
</div>

Probléma: A navigáció más pozícióban való elhelyezése megzavarja a felhasználókat, akik megszokták az eredeti elhelyezést.

Navigációs elemek elhagyása egyes oldalakon

<!-- Főoldal - teljes navigáció -->
<nav>
  <ul>
    <li><a href="/fooldal">Főoldal</a></li>
    <li><a href="/termekek">Termékek</a></li>
    <li><a href="/rolunk">Rólunk</a></li>
    <li><a href="/kapcsolat">Kapcsolat</a></li>
  </ul>
</nav>

<!-- Kapcsolat oldal - HIBÁS: hiányzó elemek -->
<nav>
  <ul>
    <li><a href="/fooldal">Főoldal</a></li>
    <!-- Termékek és Rólunk linkek hiányoznak -->
    <li><a href="/kapcsolat">Kapcsolat</a></li>
  </ul>
</nav>

Probléma: A navigációs elemek elhagyása összezavarja azokat a felhasználókat, akik a konzisztens navigációs struktúrára támaszkodnak.

Dinamikus navigáció következetesség nélkül

<script>
// HIBÁS: véletlenszerű sorrend generálása
function generateRandomNavigation() {
  const menuItems = [
    { url: '/fooldal', title: 'Főoldal' },
    { url: '/termekek', title: 'Termékek' },
    { url: '/rolunk', title: 'Rólunk' },
    { url: '/kapcsolat', title: 'Kapcsolat' }
  ];
  
  // HIBÁS: véletlenszerű keverés minden oldalon
  const shuffled = menuItems.sort(() => Math.random() - 0.5);
  
  let navHTML = '<ul>';
  shuffled.forEach(item => {
    navHTML += `<li><a href="${item.url}">${item.title}</a></li>`;
  });
  navHTML += '</ul>';
  
  document.getElementById('navigation').innerHTML = navHTML;
}

// HIBÁS: különböző logika alapján rendezés
function sortNavigationByPopularity() {
  // Feltételezett népszerűségi adatok
  const popularityData = getPagePopularity(); // Változó eredmények
  
  const menuItems = [
    { url: '/fooldal', title: 'Főoldal' },
    { url: '/termekek', title: 'Termékek' },
    { url: '/rolunk', title: 'Rólunk' },
    { url: '/kapcsolat', title: 'Kapcsolat' }
  ];
  
  // HIBÁS: népszerűség alapján rendezés változó sorrendet eredményez
  menuItems.sort((a, b) => popularityData[b.url] - popularityData[a.url]);
  
  // Minden oldal más sorrendet kaphat
}
</script>

Probléma: A dinamikus sorrend változása minden oldalbetöltéskor vagy különböző oldalak között megszakítja a felhasználók mentális modelljét.

Mobilon és asztali nézetben eltérő navigációs sorrend

<!-- HIBÁS: eltérő sorrend mobil és asztali nézetben -->
<nav class="desktop-nav">
  <ul>
    <li><a href="/fooldal">Főoldal</a></li>
    <li><a href="/termekek">Termékek</a></li>
    <li><a href="/rolunk">Rólunk</a></li>
    <li><a href="/kapcsolat">Kapcsolat</a></li>
  </ul>
</nav>

<nav class="mobile-nav">
  <ul>
    <!-- HIBÁS: mobil nézetben más sorrend -->
    <li><a href="/kapcsolat">Kapcsolat</a></li>
    <li><a href="/rolunk">Rólunk</a></li>
    <li><a href="/termekek">Termékek</a></li>
    <li><a href="/fooldal">Főoldal</a></li>
  </ul>
</nav>

<style>
@media (max-width: 768px) {
  .desktop-nav { display: none; }
  .mobile-nav { display: block; }
}

@media (min-width: 769px) {
  .desktop-nav { display: block; }
  .mobile-nav { display: none; }
}
</style>

Probléma: A felhasználók, akik váltanak eszközök között, elveszítik a navigációs konzisztenciát és újra kell tanulniuk a sorrend.

Időalapú vagy felhasználói preferencia alapú navigációs változtatások

<script>
// HIBÁS: időalapú navigációs változtatások
function timeBasedNavigation() {
  const currentHour = new Date().getHours();
  let menuItems = [];
  
  if (currentHour < 12) {
    // HIBÁS: reggeli sorrend
    menuItems = [
      { url: '/reggeli-akcio', title: 'Reggeli Akció' },
      { url: '/fooldal', title: 'Főoldal' },
      { url: '/termekek', title: 'Termékek' }
    ];
  } else if (currentHour < 18) {
    // HIBÁS: délutáni sorrend
    menuItems = [
      { url: '/fooldal', title: 'Főoldal' },
      { url: '/delutani-ajanlatok', title: 'Délutáni Ajánlatok' },
      { url: '/termekek', title: 'Termékek' }
    ];
  } else {
    // HIBÁS: esti sorrend
    menuItems = [
      { url: '/esti-kiauritas', title: 'Esti Kiárusítás' },
      { url: '/termekek', title: 'Termékek' },
      { url: '/fooldal', title: 'Főoldal' }
    ];
  }
  
  renderNavigation(menuItems);
}

// HIBÁS: felhasználói típus alapú navigáció
function userTypeBasedNavigation(userType) {
  let menuItems = [];
  
  switch(userType) {
    case 'admin':
      // HIBÁS: adminoknak más sorrend
      menuItems = [
        { url: '/admin', title: 'Admin' },
        { url: '/fooldal', title: 'Főoldal' },
        { url: '/termekek', title: 'Termékek' }
      ];
      break;
      
    case 'premium':
      // HIBÁS: prémium felhasználóknak más sorrend
      menuItems = [
        { url: '/premium-area', title: 'Prémium' },
        { url: '/fooldal', title: 'Főoldal' },
        { url: '/termekek', title: 'Termékek' }
      ];
      break;
      
    default:
      // Alapértelmezett sorrend
      menuItems = [
        { url: '/fooldal', title: 'Főoldal' },
        { url: '/termekek', title: 'Termékek' },
        { url: '/regisztracio', title: 'Regisztráció' }
      ];
  }
  
  renderNavigation(menuItems);
}

// HIBÁS: személyre szabott sorrend
function personalizedNavigation(userPreferences) {
  const allMenuItems = [
    { url: '/fooldal', title: 'Főoldal' },
    { url: '/termekek', title: 'Termékek' },
    { url: '/rolunk', title: 'Rólunk' },
    { url: '/kapcsolat', title: 'Kapcsolat' }
  ];
  
  // HIBÁS: felhasználói preferenciák alapján rendezés
  const personalizedOrder = allMenuItems.sort((a, b) => {
    return userPreferences[b.url] - userPreferences[a.url];
  });
  
  renderNavigation(personalizedOrder);
}
</script>

Probléma: A navigációs sorrend dinamikus változtatása időpont, felhasználói típus vagy preferenciák alapján megtöri a konzisztenciát és megnehezíti a navigációt.

Források

Amennyiben szeretnél első kézből értesülni az új bejegyzésekről, iratkozz fel hírlevelünkre!