Как вынести выпадающее меню из overflow: auto?
Есть меню, при переполнение меню, оно уходит вправо и появляется скролл(написанный на js), при клике на меню со стрелочкой выпадает список, но когда появляется скролл список не открывается. Подскажите пожалуйста как сделать так что-бы список открывался? как я понял вся проблема в menu__body{ overflow:auto; }. Есть ли какие-нибудь способы это исправить? все голову сломал. Спасибо!
snippet
Дополнительно:
Да, если есть скрол, то показывать какой-то абсолютный элемент, выходящий за рамки скрола не получится и с этим ничего не поделаешь. Другой способ: сделать все меню целиком абсолютным по отношению к странице, гор. скрол будет в самой нижней точке этого меню включая абсолютный выпадающий список (придется поиграться с pointer-events: none, чтоб можно было нажать на все, что под меню).
PS. при гор. сролле не надо обрабатывать координату y на строке 28.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для выноса выпадающего меню из области с overflow: auto можно использовать следующий подход:
1. Изменить позиционирование меню на fixed или absolute. Это позволит меню "выпадать" за пределы родительского контейнера.
2. Установить z-index для меню, чтобы оно оставалось поверх других элементов на странице.
Пример кода на PHP:
.parent { position: relative; overflow: auto; height: 200px; } .dropdown-menu { position: absolute; z-index: 999; background: #fff; border: 1px solid #ccc; padding: 10px; } <div class="parent"> <button>Show Menu</button> <div class="dropdown-menu"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div> </div> function toggleMenu() { var menu = document.querySelector('.dropdown-menu'); if (menu.style.display === 'none') { menu.style.display = 'block'; } else { menu.style.display = 'none'; } }.parent { position: relative; overflow: auto; height: 200px; } .dropdown-menu { position: absolute; z-index: 999; background: #fff; border: 1px solid #ccc; padding: 10px; } <div class="parent"> <button>Show Menu</button> <div class="dropdown-menu"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div> </div> function toggleMenu() { var menu = document.querySelector('.dropdown-menu'); if (menu.style.display === 'none') { menu.style.display = 'block'; } else { menu.style.display = 'none'; } }
В данном примере меню будет выпадать за пределы родительского контейнера с overflow: auto, благодаря использованию позиционирования absolute и z-index. Кроме того, при клике на кнопку "Show Menu" меню будет появляться и скрываться.