Meniuri de navigare HTML și CSS: ghid de creare și optimizare pentru web

Meniurile de navigare sunt elementele structurale fundamentale ale oricărui site web. Un meniu bine proiectat ghidează vizitatorii spre informațiile dorite, reduce rata de abandon și contribuie la arhitectura SEO a site-ului prin distribuirea autorității interne. Crearea meniurilor HTML moderne, responsive și accesibile nu mai necesită JavaScript complicat, CSS3 oferă toate instrumentele necesare.

Structura HTML semantică a unui meniu

<nav aria-label="Navigare principală">
 <ul class="nav-list">
 <li><a href="/">Acasă</a></li>
 <li><a href="/servicii">Servicii</a>
 <ul class="submenu">
 <li><a href="/servicii/seo">SEO</a></li>
 <li><a href="/servicii/web-design">Web Design</a></li>
 </ul>
 </li>
 <li><a href="/blog">Blog</a></li>
 <li><a href="/contact">Contact</a></li>
 </ul>
</nav>

Stilizarea CSS a meniului orizontal

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

.nav-list a {
 display: block;
 padding: 16px 20px;
 color: #ffffff;
 text-decoration: none;
 transition: background 0.2s;
}

.nav-list a:hover {
 background-color: rgba(255,255,255,0.1);
}

/* Submeniu dropdown */
.nav-list li {
 position: relative;
}

.submenu {
 display: none;
 position: absolute;
 top: 100%;
 left: 0;
 min-width: 200px;
 background: #1b2028;
 list-style: none;
 padding: 8px 0;
 box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.nav-list li:hover .submenu {
 display: block;
}

Meniu hamburger pentru mobil

/* Buton hamburger */
.nav-toggle {
 display: none;
 background: none;
 border: none;
 cursor: pointer;
 padding: 10px;
}

.nav-toggle span {
 display: block;
 width: 25px;
 height: 3px;
 background: white;
 margin: 5px 0;
 transition: all 0.3s;
}

@media (max-width: 768px) {
 .nav-toggle { display: block; }
 .nav-list {
 display: none;
 flex-direction: column;
 }
 .nav-list.is-open { display: flex; }
}

Accesibilitatea meniurilor

• Utilizați tagul <nav> cu atribut aria-label
• Adăugați aria-expanded pe butoanele care controlează submeniurile
• Asigurați navigarea completă cu tastatura (Tab, Enter, Escape)
• Indicatorul de focus trebuie să fie vizibil pe toate elementele interactive

Un meniu HTML și CSS bine implementat îmbunătățește atât experiența utilizatorului cât și crawlabilitatea site-ului de motoarele de căutare. Structura semantică corectă cu tagul <nav> și lista ordonată semnalează clar crawlerilor că este vorba de un element de navigare.