HTML
|
1 2 3 4 5 6 7 8 9 |
<div class="navbar"> <div class="menu-icon" id="menuIcon" onclick="toggleMenu()">☰</div> <div class="menu" id="menu"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#services">Services</a> <a href="#contact">Contact</a> </div> </div> |
Style
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
body { font-family: Arial, sans-serif; margin: 0; padding: 0; } .navbar { display: flex; justify-content: space-between; background-color: #333; padding: 10px; position: relative; min-height: 2em; } .navbar a { color: white; text-decoration: none; padding: 14px 20px; display: block; } .navbar a:hover {background-color: #575757;} .menu-icon {font-size: 1.5em; display: none; cursor: pointer; color: white; right: 5px; position: absolute; } .menu {display: flex;} @media (max-width: 600px) { .menu { display: none; flex-direction: column; width: 100%; } .menu-icon {display: block;} .menu.active {display: flex;} } |
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function toggleMenu() { const menu = document.getElementById('menu'); const menuIcon = document.getElementById('menuIcon'); menu.classList.toggle('active'); // Toggle the active class for the menu // Change the menu icon between ☰ and X if (menu.classList.contains('active')) { menuIcon.innerHTML = '⛌'; } else { menuIcon.innerHTML = '☰'; } } |
Dacă nu ne dorim să fie prea sofisticat, adică nu neapărat să se schimbe icon-ul, atunci putem avea următorul JS:
|
1 2 3 |
function toggleMenu() { document.getElementById('menu').classList.toggle('active'); } |
În această variantă nu ne mai este necesar id="menuIcon".
