I have started to build a mobile menu just like the one on apple.com using the method from the video below:
https://www.youtube.com/watch?v=eTvNoS2yqd4
All is great, except one thing. I can’t figure out how to stop the scrolling at the end of each container. Basically the scroll goes along with the homepage underneath and I end up with a huge empty space if visitors choose to scroll it.
I would love to be able to scroll just until the content from each submenu finishes, not longer. For the container I am using position:absolute instead of fixed. I know that “fixed” would block the scrolling, but I still need it for the containers with multiple items.
I have tried using overflow, a combination of overflow-x and overflow-y, but got no result. I’ve tried to create a no-scroll class, but this blocks the scrolling on all containers, which is fine, except on those where I need scrolling, as the submenu items are too many to fit into the viewport.
Below is a link with a video of the menu, to better understand my problem.
https://drive.google.com/file/d/1lKspXaooDa_O3UTRdI5gorF6XTUGG6dE/view?usp=drive_link
My question is: do you have any idea on how to limit the scrolling to the end of the content of each container, just like on the mobile submenus on apple.com? If it helps, below is the full code that I’ve made for this menu.
Any guidance would be greatly appreciated. Thank you.
type
<head>
<style>
[id^='meniu'] {
opacity: 0;
display: none;
position: absolute;
top: 0;
overflow:hidden;
width: 100%;
height: 100%;
left: 0;
z-index: 9999;
}
</style>
</head>
<body>
<script>
document.addEventListener("DOMContentLoaded", function() {
// Function to toggle visibility for a specific element by ID
function toggleVisibility(elementId, show) {
var element = document.getElementById(elementId);
if (element) {
element.style.display = show ? 'flex' : 'none';
element.style.opacity = show ? '1' : '0';
if (show) {
document.documentElement.classList.add('no-scroll');
document.body.classList.add('no-scroll');
} else {
document.documentElement.classList.remove('no-scroll');
document.body.classList.remove('no-scroll');
}
}
}
// Function to close all elements starting with 'meniu'
function closeAllMenus() {
document.querySelectorAll("[id^='meniu']").forEach(function(menu) {
toggleVisibility(menu.id, false);
});
}
// Show meniu_principal when Link_open is clicked
document.getElementById('Link_open').addEventListener('click', function() {
closeAllMenus();
toggleVisibility('meniu_principal', true);
});
// Adapted to handle any ID beginning with Link_close_all to close all menus
document.querySelectorAll("[id^='Link_close_all']").forEach(function(btn) {
btn.addEventListener('click', function() {
closeAllMenus();
});
});
document.getElementById('Link_open_tratamente_faciale').addEventListener('click', function() {
closeAllMenus();
toggleVisibility('meniu_tratamente_faciale', true);
});
document.getElementById('Link_open_tratamente_faciale2').addEventListener('click', function() {
closeAllMenus();
toggleVisibility('meniu_tratamente_faciale', true);
});
document.getElementById('Link_open_barbati').addEventListener('click', function() {
closeAllMenus();
toggleVisibility('meniu_barbati', true);
});
document.getElementById('Link_open_barbati2').addEventListener('click', function() {
closeAllMenus();
toggleVisibility('meniu_barbati', true);
});
document.getElementById('Link_open_facial_barbati').addEventListener('click', function() {
closeAllMenus();
toggleVisibility('meniu_facial_barbati', true);
});
document.getElementById('Link_open_facial_barbati2').addEventListener('click', function() {
closeAllMenus();
toggleVisibility('meniu_facial_barbati', true);
});
document.getElementById('Link_open_tratamente_corporale').addEventListener('click', function() {
closeAllMenus();
toggleVisibility('meniu_tratamente_corporale', true);
});
document.getElementById('Link_open_tratamente_corporale2').addEventListener('click', function() {
closeAllMenus();
toggleVisibility('meniu_tratamente_corporale', true);
});
document.getElementById('Link_open_servicii').addEventListener('click', function() {
closeAllMenus();
toggleVisibility('meniu_servicii', true);
});
document.getElementById('Link_open_servicii2').addEventListener('click', function() {
closeAllMenus();
toggleVisibility('meniu_servicii', true);
});
document.getElementById('Link_open_facial_design').addEventListener('click', function() {
closeAllMenus();
toggleVisibility('meniu_facial_design', true);
});
document.getElementById('Link_open_facial_design2').addEventListener('click', function() {
closeAllMenus();
toggleVisibility('meniu_facial_design', true);
});
document.getElementById('Link_open_botox').addEventListener('click', function() {
closeAllMenus();
toggleVisibility('meniu_botox', true);
});
document.getElementById('Link_open_botox2').addEventListener('click', function() {
closeAllMenus();
toggleVisibility('meniu_botox', true);
});
document.getElementById('Link_open_botox3').addEventListener('click', function() {
closeAllMenus();
toggleVisibility('meniu_botox_barbati', true);
});
document.getElementById('Link_open_botox4').addEventListener('click', function() {
closeAllMenus();
toggleVisibility('meniu_botox_barbati', true);
});
document.getElementById('Link_open_signature').addEventListener('click', function() {
closeAllMenus();
toggleVisibility('meniu_signature', true);
});
document.getElementById('Link_open_signature2').addEventListener('click', function() {
closeAllMenus();
toggleVisibility('meniu_signature', true);
});
document.getElementById('Link_open_dermatologie').addEventListener('click', function() {
closeAllMenus();
toggleVisibility('meniu_dermatologie', true);
});
document.getElementById('Link_open_dermatologie2').addEventListener('click', function() {
closeAllMenus();
toggleVisibility('meniu_dermatologie', true);
});
document.getElementById('Link_open_ginecologie').addEventListener('click', function() {
closeAllMenus();
toggleVisibility('meniu_ginecologie', true);
});
document.getElementById('Link_open_ginecologie2').addEventListener('click', function() {
closeAllMenus();
toggleVisibility('meniu_ginecologie', true);
});
document.getElementById('Link_open_chirurgie').addEventListener('click', function() {
closeAllMenus();
toggleVisibility('meniu_chirurgie_plastica', true);
});
document.getElementById('Link_open_chirurgie2').addEventListener('click', function() {
closeAllMenus();
toggleVisibility('meniu_chirurgie_plastica', true);
});
document.getElementById('Link_open_stomatologie').addEventListener('click', function() {
closeAllMenus();
toggleVisibility('meniu_stomatologie', true);
});
document.getElementById('Link_open_stomatologie2').addEventListener('click', function() {
closeAllMenus();
toggleVisibility('meniu_stomatologie', true);
});
document.getElementById('Link_open_vitaminoterapie').addEventListener('click', function() {
closeAllMenus();
toggleVisibility('meniu_vitaminoterapie', true);
});
document.getElementById('Link_open_vitaminoterapie2').addEventListener('click', function() {
closeAllMenus();
toggleVisibility('meniu_vitaminoterapie', true);
});
document.getElementById('Link_open_body_design').addEventListener('click', function() {
closeAllMenus();
toggleVisibility('meniu_body_design', true);
});
document.getElementById('Link_open_body_design2').addEventListener('click', function() {
closeAllMenus();
toggleVisibility('meniu_body_design', true);
});
document.getElementById('Link_open_body_design3').addEventListener('click', function() {
closeAllMenus();
toggleVisibility('meniu_body_design_men', true);
});
document.getElementById('Link_open_body_design4').addEventListener('click', function() {
closeAllMenus();
toggleVisibility('meniu_body_design_men', true);
});
document.getElementById('Link_open_mezoterapii').addEventListener('click', function() {
closeAllMenus();
toggleVisibility('meniu_mezoterapii', true);
});
document.getElementById('Link_open_mezoterapii2').addEventListener('click', function() {
closeAllMenus();
toggleVisibility('meniu_mezoterapii', true);
});
document.getElementById('Link_open_mezoterapii3').addEventListener('click', function() {
closeAllMenus();
toggleVisibility('meniu_mezoterapii_men', true);
});
document.getElementById('Link_open_mezoterapii4').addEventListener('click', function() {
closeAllMenus();
toggleVisibility('meniu_mezoterapii_men', true);
});
document.getElementById('Link_open_body_botox').addEventListener('click', function() {
closeAllMenus();
toggleVisibility('meniu_body_botox', true);
});
document.getElementById('Link_open_body_botox2').addEventListener('click', function() {
closeAllMenus();
toggleVisibility('meniu_body_botox', true);
});
document.getElementById('Link_open_body_botox3').addEventListener('click', function() {
closeAllMenus();
toggleVisibility('meniu_body_botox_men', true);
});
document.getElementById('Link_open_body_botox4').addEventListener('click', function() {
closeAllMenus();
toggleVisibility('meniu_body_botox_men', true);
});
// Setup for any click on IDs starting with Link_close_sub to show only Menu_main
document.querySelectorAll("[id^='Link_close_sub']").forEach(function(link) {
link.addEventListener('click', function() {
closeAllMenus(); // First, close all menus
toggleVisibility('meniu_principal', true); // Then, show Menu_main
});
});
// Setup for any click on IDs starting with Link_close_sub to show only Menu_main
document.querySelectorAll("[id^='Link_facial']").forEach(function(link) {
link.addEventListener('click', function() {
closeAllMenus(); // First, close all menus
toggleVisibility('meniu_tratamente_faciale', true); // Then, show Menu_main
});
});
// Setup for any click on IDs starting with Link_close_sub to show only Menu_main
document.querySelectorAll("[id^='Link_corporale']").forEach(function(link) {
link.addEventListener('click', function() {
closeAllMenus(); // First, close all menus
toggleVisibility('meniu_tratamente_corporale', true); // Then, show Menu_main
});
});
// Setup for any click on IDs starting with Link_close_sub to show only Menu_main
document.querySelectorAll("[id^='Link_servicii']").forEach(function(link) {
link.addEventListener('click', function() {
closeAllMenus(); // First, close all menus
toggleVisibility('meniu_servicii', true); // Then, show Menu_main
});
});
// Setup for any click on IDs starting with Link_close_sub to show only Menu_main
document.querySelectorAll("[id^='Link_barbati']").forEach(function(link) {
link.addEventListener('click', function() {
closeAllMenus(); // First, close all menus
toggleVisibility('meniu_barbati', true); // Then, show Menu_main
});
});
});
</script>
</body>
</html>
here