Для добавления подменю в меню при наведении мы можем использовать JavaScript и CSS, чтобы управлять отображением подменю и его поведением.
Прежде всего, мы создадим меню с помощью HTML и CSS. Пример кода может выглядеть следующим образом:
<nav> <ul id="main-menu"> <li><a href="#">Пункт меню 1</a></li> <li><a href="#">Пункт меню 2</a> <ul class="sub-menu"> <li><a href="#">Подпункт меню 2.1</a></li> <li><a href="#">Подпункт меню 2.2</a></li> <li><a href="#">Подпункт меню 2.3</a></li> </ul> </li> <li><a href="#">Пункт меню 3</a> <ul class="sub-menu"> <li><a href="#">Подпункт меню 3.1</a></li> <li><a href="#">Подпункт меню 3.2</a></li> <li><a href="#">Подпункт меню 3.3</a></li> </ul> </li> </ul> </nav>
Здесь второй и третий пункты меню имеют подменю соответственно.
Теперь приступим к JavaScript для обработки событий наведения мыши. Мы будем использовать события mouseover
и mouseout
для показа и скрытия подменю при наведении на соответствующий пункт меню.
// Получаем список пунктов меню var menuItems = document.querySelectorAll("#main-menu li"); // Проходимся по каждому пункту меню и добавляем обработчики событий menuItems.forEach(function(menuItem) { // Добавляем обработчик события наведения мыши menuItem.addEventListener("mouseover", function() { // Показываем подменю var subMenu = this.querySelector(".sub-menu"); if (subMenu) { subMenu.style.display = "block"; } }); // Добавляем обработчик события ухода мыши с пункта меню menuItem.addEventListener("mouseout", function() { // Скрываем подменю var subMenu = this.querySelector(".sub-menu"); if (subMenu) { subMenu.style.display = "none"; } }); });
CSS стили помогут нам визуально скрыть подменю по умолчанию и отобразить его при наведении на пункт меню:
.sub-menu { display: none; position: absolute; top: 100%; left: 0; } #main-menu li:hover .sub-menu { display: block; }
В результате, при наведении на второй или третий пункт меню, соответствующее подменю будет отображаться. При уходе мыши с пункта меню, подменю будет скрываться.
Это лишь один из возможных способов реализации подменю при наведении в JavaScript. В зависимости от требований и используемого фреймворка, вы можете изменить реализацию подменю.