Я создаю бургер-меню с анимационным раскрывающимся списком или наложением как часть заголовка моего веб-сайта. Назовем это страницей «mobile-header». Ссылка на веб-сайт (как ни странно, эта функция не выполняется в браузере на настольном компьютере, но отлично работает при тестировании на мобильном телефоне): https://andreasvoldmaa2.cargo.site/
Однако, поскольку для отображения всего меню раскрывающееся меню должно заполнять всю высоту области просмотра, это означает, что заголовок также заполняет всю высоту области просмотра. , потому что все они вложены в "один"... это, в свою очередь, препятствует правильной работе прокрутки (поскольку вы, скорее всего, начнете перетаскивать "mobile-header"- страницу вместо этого, пытаясь прокрутить страницу вниз).
Я не очень хорошо разбираюсь в программировании или написании сценариев, но должна быть способ гарантировать, что заголовок не мешает функции прокрутки страницы в целом, и в то же время убедиться, что он имеет достаточную высоту для расширения в меню?
Это основано на CodePen: https://codepen.io/312_JohnC/pen/KVrjMa
Я использую Cargo 3. HTML:
// Function to toggle menu-opened class
function toggleMenu() {
var header = document.querySelector('.header');
if (header) {
header.classList.toggle('menu-opened');
} else {
console.error("Could not find header element.");
}
}
// Add event listener to toggle menu when burger icon is clicked
function setupMenu() {
var burger = document.querySelector('.burger-container');
if (burger) {
burger.addEventListener('click', toggleMenu);
} else {
console.error("Could not find burger element.");
}
}
// Add event listener to menu items to close menu when clicked
function setupMenuItems() {
var menuItems = document.querySelectorAll('.menu-item');
if (menuItems.length > 0) {
menuItems.forEach(function(item) {
item.addEventListener('click', toggleMenu);
});
} else {
console.error("No menu items found.");
}
}
// Execute script when the entire page has finished loading
window.onload = function() {
setupMenu();
setupMenuItems();
};
Буду признателен за любую помощь!
Теперь я попробовал уменьшить заголовок до 10vh, когда это не «активирован», а затем после активации расширяется до 100vh — но это своего рода сместило место щелчка в меню гамбургера и определенно нарушило функциональность.
С грузом также немного сложнее. для работы с Javascript, но я обнаружил, что Javascript, который я здесь разместил, работает при развертывании из Cargo, однако исходный Javascript из Codepen не работал, но работает в сайте-редакторе Cargo 3.
Я создаю бургер-меню с анимационным раскрывающимся списком или наложением как часть заголовка моего веб-сайта. Назовем это [b]страницей «mobile-header»[/b]. [b]Ссылка на веб-сайт[/b] (как ни странно, эта функция не выполняется в браузере на настольном компьютере, но отлично работает при тестировании на мобильном телефоне): https://andreasvoldmaa2.cargo.site/ Однако, поскольку для отображения всего меню раскрывающееся меню должно заполнять всю высоту области просмотра, это означает, что заголовок также заполняет всю высоту области просмотра. , потому что все они вложены в "один"... это, в свою очередь, препятствует правильной работе прокрутки (поскольку вы, скорее всего, начнете перетаскивать [b]"mobile-header"- страницу[/b] вместо этого, пытаясь прокрутить страницу вниз). Я не очень хорошо разбираюсь в программировании или написании сценариев, но должна быть способ гарантировать, что заголовок не мешает функции прокрутки страницы в целом, и в то же время убедиться, что он имеет достаточную высоту для расширения в меню? Это основано на CodePen: https://codepen.io/312_JohnC/pen/KVrjMa Я использую [b]Cargo 3[/b]. [b]HTML:[/b] [code]
[id="J2926239532"] .page-content { padding: 0rem; align-items: flex-start; } [/code] [b]Javascript (в моем «глобальном» HTML-файле):[/b] [code] // Function to toggle menu-opened class function toggleMenu() { var header = document.querySelector('.header'); if (header) { header.classList.toggle('menu-opened'); } else { console.error("Could not find header element."); } }
// Add event listener to toggle menu when burger icon is clicked function setupMenu() { var burger = document.querySelector('.burger-container'); if (burger) { burger.addEventListener('click', toggleMenu); } else { console.error("Could not find burger element."); } }
// Add event listener to menu items to close menu when clicked function setupMenuItems() { var menuItems = document.querySelectorAll('.menu-item'); if (menuItems.length > 0) { menuItems.forEach(function(item) { item.addEventListener('click', toggleMenu); }); } else { console.error("No menu items found."); } }
// Execute script when the entire page has finished loading window.onload = function() { setupMenu(); setupMenuItems(); };
[/code] Буду признателен за любую помощь! Теперь я попробовал уменьшить заголовок до 10vh, когда это не «активирован», а затем после активации расширяется до 100vh — но это своего рода сместило место щелчка в меню гамбургера и определенно нарушило функциональность. С грузом также немного сложнее. для работы с Javascript, но я обнаружил, что [b]Javascript, который я здесь разместил, работает при развертывании из Cargo[/b], однако исходный Javascript из Codepen не работал, но работает в сайте-редакторе Cargo 3.
Мобильная версия