A reszponzív menü létrehozása a webfejlesztés egyik alapvető feladata, mivel biztosítja, hogy a weboldalunk minden eszközön megfelelően jelenjen meg. Ebben a cikkben lépésről lépésre bemutatjuk, hogyan készíthetsz egy olyan menüt, amely asztali nézetben teljes, mobil nézetben pedig egy ikonra vált.
1. lépés: Alap HTML Struktúra
Kezdjük egy alap HTML struktúrával, amely tartalmazza a menüpontokat és egy hamburger ikont mobil nézethez. Hozd létre az index.html file-t.
<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Reszponzív Menü</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <nav> <div class="menu-icon" id="menu-icon"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M3 6H21V8H3V6Z" fill="white"/> <path d="M3 11H21V13H3V11Z" fill="white"/> <path d="M3 16H21V18H3V16Z" fill="white"/> </svg> </div> <ul class="menu" id="menu"> <li><a href="#">Főoldal</a></li> <li><a href="#">Rólunk</a></li> <li><a href="#">Szolgáltatások</a></li> <li><a href="#">Kapcsolat</a></li> </ul> </nav> </header> <script src="js/script.js"></script> </body> </html>2. lépés: Alap CSS Stílusok
Most hozzunk létre egy style.css fájlt, amely tartalmazza az alap stílusokat a menühöz. Az alábbi stílusok asztali nézethez készültek.
/* Alap stílusok */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #333; color: white; padding: 10px 0; } nav { display: flex; justify-content: space-between; align-items: center; padding: 0 20px; } .menu-icon { display: none; font-size: 24px; cursor: pointer; } .menu { list-style-type: none; margin: 0; padding: 0; display: flex; } .menu li { margin: 0 10px; } .menu li a { color: white; text-decoration: none; padding: 8px 12px; } .menu li a:hover { background-color: #575757; border-radius: 4px; }3. lépés: Reszponzív Stílusok
Adjuk hozzá a reszponzív stílusokat, hogy a menü megfelelően jelenjen meg mobil eszközökön.
/* Reszponzív stílusok */ @media (max-width: 768px) { .menu { display: none; flex-direction: column; width: 100%; text-align: center; } .menu li { margin: 10px 0; } .menu-icon { display: block; } }4. lépés: JavaScript a Menü Működtetéséhez
Végül, adjunk hozzá egy kis JavaScript kódot, hogy a hamburger ikonra kattintva megjelenjen vagy elrejtődjön a menü.
Hozz létre egy script.js fájlt a következő tartalommal:
document.getElementById('menu-icon').addEventListener('click', function() { var menu = document.getElementById('menu'); if (menu.style.display === 'block') { menu.style.display = 'none'; } else { menu.style.display = 'block'; } });