Wysuwane menu - jak zrobić?

Cześć! Jeśli trafiłeś tutaj, to pewnie zastanawiasz się, jak stworzyć wysuwane menu. Dobra wiadomość: to prostsze, niż myślisz! Nie potrzebujesz zaawansowanych umiejętności programistycznych, by osiągnąć świetne efekty. W tym artykule pokażę Ci krok po kroku, jak zrobić takie menu, które będzie wyglądało świetnie zarówno na komputerach, jak i urządzeniach mobilnych. Gotowy? To zaczynamy!

Czym jest wysuwane menu?

Na początek krótka teoria. Wysuwane menu to element strony internetowej, który pojawia się (najczęściej) po kliknięciu ikony hamburgera 🍔 lub najechaniu myszką na konkretny obszar. Tego typu menu jest popularne w designie responsywnym, bo pozwala zaoszczędzić miejsce na ekranie, a jednocześnie umożliwia użytkownikowi szybki dostęp do różnych sekcji strony.

Zalety wysuwanego menu:

Przejrzystość – Menu nie zajmuje miejsca, dopóki go nie potrzebujesz.
Responsywność – Świetnie działa na urządzeniach mobilnych.
Estetyka – Dodaje nowoczesnego wyglądu Twojej stronie.

Co będzie potrzebne?

Aby stworzyć wysuwane menu, użyjemy trzech podstawowych technologii:

HTML – do stworzenia struktury.
CSS – by nadać styl i zapewnić animacje.
JavaScript – aby dodać funkcjonalność.

Jeśli jeszcze nie czujesz się pewnie w tych technologiach, nie martw się. Wyjaśnię wszystko krok po kroku!

Krok 1: Struktura HTML

Na początek przygotujmy prosty plik HTML. Stworzymy kontener dla menu, ikony hamburgera i kilka przykładowych linków.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Wysuwane menu</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <div class="menu-toggle" id="menuToggle">
      <!-- Ikona hamburgera -->
      <span></span>
      <span></span>
      <span></span>
    </div>
    <nav class="menu" id="menu">
      <ul>
        <li><a href="#home">Strona główna</a></li>
        <li><a href="#about">O nas</a></li>
        <li><a href="#services">Usługi</a></li>
        <li><a href="#contact">Kontakt</a></li>
      </ul>
    </nav>
  </header>
  <script src="script.js"></script>
</body>
</html>

Co tu się dzieje?

Mamy menu-toggle, czyli naszą ikonę hamburgera (trzy poziome kreski).
Nav to nasz kontener na linki.
Każdy link znajduje się w liście <ul> i jest odpowiednio oznaczony.

Krok 2: Stylizacja za pomocą CSS

Teraz zadbajmy o wygląd. Bez tego nasze menu będzie wyglądało jak zbiór przypadkowych linków. Poniżej znajdziesz kod CSS:

/* style.css */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

header {
  position: relative;
  width: 100%;
  background: #333;
  color: white;
}

.menu-toggle {
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
  z-index: 2;
}

.menu-toggle span {
  display: block;
  width: 30px;
  height: 3px;
  margin: 5px;
  background: white;
  transition: 0.3s ease;
}

.menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 200px;
  height: 100%;
  background: #444;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
  transition: right 0.3s ease;
}

.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu ul li {
  margin: 20px 0;
  text-align: center;
}

.menu ul li a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  transition: color 0.3s ease;
}

.menu ul li a:hover {
  color: #ff9800;
}

/* Menu otwarte */
.menu.open {
  right: 0;
}

/* Animacja hamburgera */
.menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translateY(8px);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translateY(-8px);
}

Wyjaśnienia:

menu-toggle to nasz hamburger. Dodałem efekt transformacji, by zmieniał kształt po kliknięciu.
Menu na początku jest ukryte (right: -100%). Gdy dodamy klasę .open, przesunie się w prawo.
Styl linków w menu jest prosty, ale elegancki.

Krok 3: Funkcjonalność za pomocą JavaScript

Czas na magię! Dodamy JavaScript, który umożliwi otwieranie i zamykanie menu po kliknięciu w ikonę hamburgera.

// script.js
const menuToggle = document.getElementById('menuToggle');
const menu = document.getElementById('menu');

menuToggle.addEventListener('click', () => {
  menu.classList.toggle('open'); // Dodaj/usuń klasę "open"
  menuToggle.classList.toggle('active'); // Animacja hamburgera
});

Jak to działa?

menuToggle nasłuchuje kliknięcia.
Po kliknięciu dodaje klasę .open do menu i .active do hamburgera.

Testowanie

Teraz zapisz pliki HTML, CSS i JavaScript w jednym folderze, a następnie otwórz plik HTML w przeglądarce. Kliknij w ikonę hamburgera – menu powinno się wysuwać i chować. Proste, prawda?

Rozszerzenia i usprawnienia

1. Zamknięcie menu po kliknięciu linku

Chcesz, żeby menu zamykało się, gdy użytkownik kliknie link? Dodajmy to!

W pliku script.js zmodyfikuj kod:

const links = menu.querySelectorAll('a');

links.forEach(link => {
  link.addEventListener('click', () => {
    menu.classList.remove('open');
    menuToggle.classList.remove('active');
  });
});

2. Animacje w menu

Możesz dodać delikatne animacje do linków w menu za pomocą CSS. Na przykład:

.menu ul li {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
}

.menu.open ul li {
  opacity: 1;
  transform: translateY(0);
}

I to wszystko! Stworzyliśmy wysuwane menu, które działa, wygląda dobrze i jest łatwe do dostosowania. Właśnie nauczyłeś się czegoś nowego – brawo!

Jeśli masz pytania lub chcesz dowiedzieć się więcej o innych efektach na stronach, daj znać w komentarzach. A teraz… do dzieła! Dodaj to menu do swojej strony i pochwal się efektami!