@ransom_homenick
Чтобы создать меню в JavaScript, вам может понадобиться следующий код:
1 2 3 4 5 |
<ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
#menu { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } #menu li { float: left; } #menu li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } #menu li a:hover { background-color: #111; } |
1 2 3 4 5 |
const menu = document.getElementById("menu"); menu.addEventListener("click", () => { menu.classList.toggle("open"); }); |
В этом примере мы используем свойство classList
объекта элемента DOM и метод toggle
, чтобы добавлять и удалять класс open
у элемента menu
. Мы также используем метод addEventListener
для назначения обработчика событий клика на элемент menu
.
Вы можете изменить стили CSS, чт
@ransom_homenick
Вы можете создать меню в JavaScript с помощью следующих шагов:
Вот пример кода:
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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li> <a href="#">Services</a> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">Web Development</a></li> </ul> </li> <li><a href="#">Contact</a></li> </ul> <style> #menu { list-style-type: none; margin: 0; padding: 0; } #menu li { display: inline-block; background-color: #ddd; } #menu li a { display: block; padding: 8px; text-decoration: none; } #menu ul { display: none; } #menu li:hover ul { display: block; position: absolute; } </style> <script> const menu = document.querySelector('#menu'); menu.addEventListener('click', function(event) { const target = event.target; const parent = target.parentNode; if (target.tagName === 'A') { parent.querySelectorAll('ul').forEach(function(ul) { ul.style.display = 'none'; }); } else if (parent.tagName === 'LI') { parent.querySelector('ul').style.display = 'block'; } }); </script> |