Как сделать меню в Javascript?
Как сделать меню в Javascript?
2 ответа
от
aaron_armstrong ,
3 года назад
@ransom_homenick
Чтобы создать меню в JavaScript, вам может понадобиться следующий код:
- Создайте список ссылок с помощью тега ul:
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> |
- Создайте стили для меню с помощью CSS:
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;
}
|
- Используйте JavaScript, чтобы добавить функциональность меню, например, открытие и закрытие по клику:
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, чт
от
marshall.cummings ,
3 года назад
@ransom_homenick
Вы можете создать меню в JavaScript с помощью следующих шагов:
- Создать HTML структуру меню, используя элементы ul, li и a
- Использовать CSS, чтобы задать стиль меню
- Использовать 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>
|
15