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>

<head>

<title>Wysuwane menu</title>

</head>

<body>

</div>

<ul>

<li><a href="#home">Strona główna</a></li>

<li><a href="#services">Usługi</a></li>

<li><a href="#contact">Kontakt</a></li>

</ul>

</nav>

</header>

</body>

</html>

<!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">  <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>

<!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);

}

/* 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); }

/* 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

});

// 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 });

// 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');

});

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

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);

}

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

.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!