https://www.sham-shui-po.com/mobile-menu.js

1/**
2 * Mobile Menu Functionality for Castel dell'Ovo Website
3 * Provides sliding mobile menu similar to recoleta-ba.com
4 */
5
6document.addEventListener('DOMContentLoaded', function() {
7    // Get mobile menu elements
8    const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
9    const mobileMenuOverlay = document.querySelector('.mobile-menu-overlay');
10    const mobileMenuBackdrop = document.querySelector('.mobile-menu-backdrop');
11    const mobileMenuClose = document.querySelector('.mobile-menu-close');
12    const mobileNavLinks = document.querySelectorAll('.mobile-nav-menu a');
13
14    // Check if elements exist
15    if (!mobileMenuToggle || !mobileMenuOverlay || !mobileMenuBackdrop) {
16        console.log('Mobile menu elements not found');
17        return;
18    }
19
20    // Function to open mobile menu
21    function openMobileMenu() {
22        mobileMenuOverlay.classList.add('active');
23        mobileMenuBackdrop.classList.add('active');
24        document.body.style.overflow = 'hidden'; // Prevent background scrolling
25    }
26
27    // Function to close mobile menu
28    function closeMobileMenu() {
29        mobileMenuOverlay.classList.remove('active');
30        mobileMenuBackdrop.classList.remove('active');
31        document.body.style.overflow = ''; // Restore background scrolling
32    }
33
34    // Event listeners
35    mobileMenuToggle.addEventListener('click', function(e) {
36        e.preventDefault();
37        openMobileMenu();
38    });
39
40    // Close menu when backdrop is clicked
41    mobileMenuBackdrop.addEventListener('click', function(e) {
42        e.preventDefault();
43        closeMobileMenu();
44    });
45
46    // Close menu when close button is clicked (if it exists)
47    if (mobileMenuClose) {
48        mobileMenuClose.addEventListener('click', function(e) {
49            e.preventDefault();
50            closeMobileMenu();
51        });
52    }
53
54    // Close menu when a navigation link is clicked
55    mobileNavLinks.forEach(function(link) {
56        link.addEventListener('click', function(e) {
57            // Allow the link to work normally, but close the menu
58            setTimeout(closeMobileMenu, 100);
59        });
60    });
61
62    // Close menu on escape key
63    document.addEventListener('keydown', function(e) {
64        if (e.key === 'Escape') {
65            closeMobileMenu();
66        }
67    });
68
69    // Handle window resize - close menu if desktop size is reached
70    window.addEventListener('resize', function() {
71        if (window.innerWidth >= 768) {
72            closeMobileMenu();
73        }
74    });
75});