Jak zrobić menu po lewej stronie w HTML?

Aby stworzyć menu boczne po lewej stronie w HTML, wystarczy odpowiednio zorganizować strukturę HTML i zastosować CSS do stylowania oraz pozycjonowania elementów. Takie menu jest często stosowane na stronach firmowych, w panelach administracyjnych czy blogach, gdzie szybka nawigacja ma kluczowe znaczenie.

Struktura HTML

Najprostszą strukturę można przygotować, wykorzystując listę nieuporządkowaną (<ul>) oraz elementy <li>, zawierające linki do różnych sekcji lub podstron:

<nav class="menu-boczne">
  <ul>
    <li><a href="#strona-glowna">Strona główna</a></li>
    <li><a href="#o-nas">O nas</a></li>
    <li><a href="#uslugi">Usługi</a></li>
    <li><a href="#kontakt">Kontakt</a></li>
  </ul>
</nav>

Podstawowe stylowanie CSS menu bocznego

Przykład prostego menu przyklejonego do lewej krawędzi:

.menu-boczne {
  width: 220px;
  background: #f2f2f2;
  height: 100vh; /* menu na całą wysokość ekranu */
  position: fixed;
  left: 0;
  top: 0;
  border-right: 2px solid #ddd;
  box-shadow: 2px 0 5px rgba(0,0,0,0.06);
}
.menu-boczne ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu-boczne li {
  margin: 0;
  padding: 0;
}
.menu-boczne li a {
  display: block;
  padding: 15px 20px;
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: background 0.2s, color 0.2s;
}
.menu-boczne li a:hover,
.menu-boczne li a.active {
  background: #2196f3;
  color: #fff;
}

Dzięki temu otrzymasz czytelne, wygodne menu boczne, które nie przewija się ze stroną i cały czas pozostaje widoczne dla użytkownika.

Menu boczne z rozwijaną nawigacją

Aby menu mogło mieć rozwijane elementy (podmenu), należy zmodyfikować strukturę HTML oraz CSS:

Przykład HTML

<nav class="menu-boczne">
  <ul>
    <li>
      <a href="#strona-glowna">Strona główna</a>
    </li>
    <li>
      <a href="#oferta">Oferta</a>
      <ul class="submenu">
        <li><a href="#usluga1">Usługa 1</a></li>
        <li><a href="#usluga2">Usługa 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#kontakt">Kontakt</a>
    </li>
  </ul>
</nav>

Przykład CSS zapewniający rozwijalność po najechaniu

.menu-boczne ul .submenu {
  display: none;
  background: #e3e3e3;
  padding-left: 0;
}
.menu-boczne ul li:hover > .submenu {
  display: block;
  position: static;
}
.menu-boczne ul .submenu li a {
  padding-left: 40px;
  background: none;
}
/* Dodatkowe opcje stylowania */
.menu-boczne ul .submenu li a:hover {
  background: #1976d2;
}

Zastosowania menu bocznego

Menu po lewej stronie sprawdzi się w wielu przypadkach:

• Panele administracyjne – szybki dostęp do sekcji zarządzania;
• Strony firmowe – przejrzysta nawigacja między usługami i działami;
• Blogi – szybkie przełączanie kategorii i archiwów;
• Sklepy internetowe – filtrowanie produktów wg kategorii.

Nowoczesne urozmaicenia

Współczesne boczne menu często rozszerza się o dodatkowe interakcje:

• Ikony obok tekstu menu (np. za pomocą Font Awesome lub SVG);
• Responsywność – menu zwijane na urządzeniach mobilnych – można użyć CSS Media Queries do ukrycia i rozwijania menu po kliknięciu przycisku (hamburgera);
• Animacje na rozwijanie i chowające się podmenu, np. przy pomocy animacji CSS (transition).

Przykład responsywnego bocznego menu

@media (max-width: 768px) {
  .menu-boczne {
    width: 60px;
    overflow: hidden;
  }
  .menu-boczne li a {
    text-align: center;
    padding: 15px 10px;
    font-size: 18px;
  }
  /* Można też całkowicie ukryć menu i wyświetlić przycisk do jego rozwijania */
}

Podsumowanie najważniejszych kroków

• Tworzymy semantyczną strukturę HTML z użyciem <nav>, <ul>, <li> oraz <a>;
• Pozycjonujemy menu po lewej stronie korzystając z position: fixed lub float: left (historycznie);
• Stylujemy menu i przyciski nawigacyjne zgodnie z wymaganiami projektu;
• Dodajemy rozwijalność oraz responsywność, by menu było wygodne na każdym urządzeniu;
• Wzbogacamy projekt o animacje, ikony, czy efekty hover dla lepszych wrażeń użytkownika.

Dzięki takiemu podejściu Twoja strona zyska profesjonalne i wygodne menu boczne, które będzie łatwe do rozbudowy i estetyczne dla użytkownika.