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