Jak zrobić menu boczne w HTML?

Aby stworzyć menu boczne w HTML, potrzebujesz odpowiedniego kodu HTML dla struktury menu oraz stylów CSS, które ustalą jego wygląd i zachowanie. Dodatkowo możesz rozszerzyć funkcjonalność o animowane wysuwanie menu lub sterowanie za pomocą JavaScript. Oto szczegółowy poradnik krok po kroku z praktycznymi przykładami.

Podstawowa struktura menu bocznego

Najprostszą wersję można wykonać wyłącznie z HTML i CSS, aby menu boczne było zawsze widoczne po lewej stronie ekranu.

<!-- Struktura HTML menu bocznego -->
<nav class="sidebar">
  <ul>
    <li><a href="#">Strona główna</a></li>
    <li><a href="#">O nas</a></li>
    <li><a href="#">Usługi</a></li>
    <li><a href="#">Kontakt</a></li>
  </ul>
</nav>

/* CSS dla prostego menu bocznego */
.sidebar {
  width: 220px;
  height: 100vh;
  background: #222;
  color: #fff;
  position: fixed;
  left: 0;
  top: 0;
  padding-top: 40px;
}
.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar li {
  margin: 20px 0;
}
.sidebar a {
  text-decoration: none;
  color: #fff;
  padding: 10px 20px;
  display: block;
  border-radius: 4px;
  transition: background 0.3s;
}
.sidebar a:hover {
  background: #444;
}

Zastosowanie podstawowe – przydatne w statycznych stronach internetowych lub prostych panelach administracyjnych, gdzie menu nie musi się chować ani rozwijać.

Menu boczne wysuwane (przesuwane)

Aby menu mogło być wysuwane i chowane (np. mobilne lub dynamiczne interfejsy), należy użyć dodatkowych stylów oraz JavaScript.

Kod HTML

<button id="show-menu" class="show-menu">&#9776; Menu</button>
<nav id="menu" class="side-menu">
  <ul>
    <li><a href="#">Strona główna</a></li>
    <li><a href="#">Produkty</a></li>
    <li><a href="#">Usługi</a></li>
    <li><a href="#">FAQ</a></li>
    <li><a href="#">Kontakt</a></li>
  </ul>
</nav>

Kod CSS

.show-menu {
  position: fixed;
  left: 10px;
  top: 10px;
  background: #222;
  color: #fff;
  font-size: 30px;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
  z-index: 2000;
}
.side-menu {
  width: 250px;
  height: 100vh;
  background: #222;
  color: #fff;
  position: fixed;
  left: -250px; /* poza ekranem przy starcie */
  top: 0;
  padding-top: 40px;
  transition: left 0.4s cubic-bezier(0.77,0.2,0.05,1.0);
  z-index: 1000;
}
.side-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.side-menu li {
  margin: 20px 0;
}
.side-menu a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: 4px;
  transition: background 0.3s;
}
.side-menu a:hover {
  background: #444;
}

JavaScript do obsługi wysuwania

let clicked = 0;
document.getElementById('show-menu').onclick = function() {
  const menu = document.getElementById('menu');
  if(clicked === 0){
    menu.style.left = '0';
    clicked = 1;
  } else {
    menu.style.left = '-250px';
    clicked = 0;
  }
}

Zastosowanie – to rozwiązanie jest praktyczne na stronach responsywnych, aplikacjach SPA, dashboardach lub wszędzie tam, gdzie użytkownicy korzystają ze smartfonów i tabletów.

Menu boczne reagujące na szerokość ekranu (responsive)

Możesz rozbudować menu, by dostosowywało się do wielkości urządzenia – np. domyślnie widoczne na desktopie, a ukrywane i wysuwane na urządzeniach mobilnych.

Przykład z użyciem media queries

@media (max-width: 800px) {
  .side-menu {
    left: -250px; /* menu domyślnie ukryte */
  }
}

W połączeniu z przyciskiem wysuwającym oraz JavaScript menu wyświetli się na żądanie tylko na mniejszych ekranach.

Rozwijane podmenu w menu bocznym

Częstą potrzebą jest też dodanie podmenu, które można rozwinąć po kliknięciu w element główny.

Przykład HTML

<ul>
  <li><a href="#">Strona główna</a></li>
  <li>
    <a href="#">Produkty</a>
    <ul class="submenu">
      <li><a href="#">Produkt 1</a></li>
      <li><a href="#">Produkt 2</a></li>
    </ul>
  </li>
  <li><a href="#">Kontakt</a></li>
</ul>

Przykład CSS (po najechaniu)

.submenu {
  display: none;
  margin-left: 18px;
}
li:hover > .submenu {
  display: block;
}

Zastosowanie – stosowane na zaawansowanych stronach firmowych, sklepach internetowych do prezentowania wielu kategorii lub sekcji.

Najczęstsze zastosowania menu bocznych

• Panele administracyjne – np. CMS, systemy ERP, gdzie boczny panel nawigacyjny daje dostęp do sekcji zarządzania;
• Sklepy internetowe – filtrowanie produktów, kategorie, szybki dostęp do konta użytkownika;
• Blogi i serwisy informacyjne – lista kategorii, archiwum, menu nawigacyjne;
• Aplikacje mobilne i PWA – jasny podział nawigacji w tzw. „hamburger menu”.

Wskazówki UX i rozszerzenia

• Ikony – ułatwiają nawigację, szczególnie w minimalistycznych projektach;
• Animacje wejścia/wyjścia – zwiększają atrakcyjność i czytelność;
• Ukrywanie menu po kliknięciu poza obszar – warto dodać skrypt, który zamknie menu po kliknięciu poza nim;
• Sticky sidebar – menu zawsze przyklejone do lewej krawędzi ekranu podczas przewijania strony.

Gotowe frameworki

Jeśli nie chcesz pisać wszystkiego od zera, wiele frameworków (np. Bootstrap, Materialize) udostępnia gotowe komponenty z pełną obsługą responsywności, animacjami i wsparciem dla dostępności.

Podsumowanie

Tworzenie menu bocznego wymaga zaplanowania zarówno jego struktury, jak i zachowania – od wersji podstawowej po zaawansowane, rozwijane i animowane komponenty. Kluczowe elementy to odpowiednie style CSS, opcjonalnie logika JavaScript oraz zadbanie o responsive design. Dzięki powyższym przykładom możesz łatwo wdrożyć własne funkcjonalne menu boczne w projekcie internetowym.