/* Button Styles */ .menu { --color: #ffffff; width: 36px; height: 36px; padding: 0; margin: 0; outline: none; position: relative; border: none; background: none; cursor: pointer; z-index: 1300; -webkit-appearance: none; -webkit-tap-highlight-color: transparent; transition: z-index 0.5s ease; } .menu.active { z-index: 1300; --color: #0b3a64; } .menu svg { width: 64px; height: 48px; top: -6px; left: -14px; stroke: var(--color); stroke-width: 4px; stroke-linecap: round; stroke-linejoin: round; fill: none; display: block; position: absolute; } .menu svg path { transition: stroke-dasharray var(--duration, .85s) var(--easing, ease) var(--delay, 0s), stroke-dashoffset var(--duration, .85s) var(--easing, ease) var(--delay, 0s); stroke-dasharray: var(--array-1, 26px) var(--array-2, 100px); stroke-dashoffset: var(--offset, 126px); transform: translateZ(0); } .menu svg path:nth-child(2) { --duration: .7s; --easing: ease-in; --offset: 100px; --array-2: 74px; } .menu svg path:nth-child(3) { --offset: 133px; --array-2: 107px; } .menu.active svg path { --offset: 57px; } .menu.active svg path:nth-child(1), .menu.active svg path:nth-child(3) { --delay: .15s; --easing: cubic-bezier(.2, .4, .2, 1.1); } .menu.active svg path:nth-child(2) { --duration: .4s; --offset: 2px; --array-1: 1px; } .menu.active svg path:nth-child(3) { --offset: 58px; } /* Pop-up overlay with smooth slide-in and slide-out */ .popup-overlay { position: fixed; top: 0; right: -100%; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: flex-start; transition: right 0.5s ease; z-index: 1200; } .popup-overlay.show { right: 0; /* Slide in */ } .popup-content { width: 100%; height: 100%; border: none; background: white; } const menuButton = document.querySelector('.menu'); const popupOverlay = document.getElementById('popupOverlay'); const iframe = document.querySelector('.popup-content'); menuButton.addEventListener('click', function() { menuButton.classList.toggle('active'); popupOverlay.classList.toggle('show'); }); // Ensure links inside the iframe open in the main window iframe.addEventListener('load', function() { const iframeDocument = iframe.contentDocument || iframe.contentWindow.document; // Update all links to open in the main window const links = iframeDocument.querySelectorAll('a'); links.forEach(link => { link.setAttribute('target', '_top'); }); });