<!-- ============================================================ LingoYou — Off-Canvas Mobile Menu (self-contained) Paste the , the trigger button + panel markup, and the into an Elementor HTML widget (or into your header template via a Custom HTML widget). No external JS libraries needed. Font Awesome is used for icons — your site already loads it, so you can remove the CDN below when embedding. ============================================================= --> :root{ --ly-purple: #784593; /* pehle: #2E1B4D */ --ly-purple-light: #8F5AAD; /* pehle: #3A2560 — thoda lighter shade of primary, hover/submenu bg ke liye */ --ly-border: rgba(255,255,255,0.12); /* same rehne dein */ --ly-text: #FFFFFF; /* same rehne dein */ --ly-text-dim: #D9CFEC; /* same rehne dein, ya #C9B8DC bhi chalega */ } .ly-phone-btn{ border: 1px solid #499AD4; /* pehle: rgba(255,255,255,0.4) */ } .ly-menu-item.open > .ly-menu-row .ly-menu-toggle-icon{ color: #499AD4; /* open state mein chevron ka color accent bane */ } /* ---------- Trigger button (hamburger) ---------- */ .ly-menu-trigger{ display:none; background:none; border:none; color:#fff; font-size:24px; cursor:pointer; padding:8px; } @media (max-width: 1024px){ .ly-menu-trigger{ display:inline-flex; align-items:center; justify-content:center; } } /* ---------- Overlay ---------- */ .ly-offcanvas-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.5); opacity:0; visibility:hidden; transition:opacity .3s ease; z-index:9998; } .ly-offcanvas-overlay.active{ opacity:1; visibility:visible; } /* ---------- Panel ---------- */ .ly-offcanvas-panel{ position:fixed; top:0; right:0; width:340px; max-width:88vw; height:100%; background:var(--ly-purple); color:var(--ly-text); transform:translateX(100%); transition:transform .35s ease; z-index:9999; display:flex; flex-direction:column; box-shadow:-8px 0 30px rgba(0,0,0,0.3); } .ly-offcanvas-panel.active{ transform:translateX(0); } .ly-offcanvas-header{ display:flex; justify-content:flex-end; padding:20px 20px 8px; } .ly-offcanvas-close{ background:none; border:none; color:#fff; font-size:20px; cursor:pointer; padding:6px; line-height:1; } .ly-offcanvas-body{ flex:1; overflow-y:auto; padding:0 12px 20px; } /* ---------- Menu list ---------- */ .ly-menu-list, .ly-submenu-list{ list-style:none; margin:0; padding:0; } .ly-menu-item{ border-bottom:1px solid var(--ly-border); } .ly-menu-item:last-child{ border-bottom:none; } .ly-menu-row{ display:flex; align-items:center; justify-content:space-between; padding:16px 8px; cursor:pointer; } .ly-menu-row-left{ display:flex; align-items:center; gap:14px; } .ly-menu-icon{ width:20px; text-align:center; opacity:.9; font-size:16px; } .ly-menu-link{ color:var(--ly-text); text-decoration:none; font-size:16px; font-weight:500; } .ly-menu-row a.ly-menu-link{ flex:1; } .ly-menu-toggle-icon{ font-size:13px; transition:transform .25s ease; color:var(--ly-text-dim); padding:4px 8px; } .ly-menu-item.open > .ly-menu-row .ly-menu-toggle-icon{ transform:rotate(180deg); } /* ---------- Submenu (collapsible) ---------- */ .ly-submenu{ max-height:0; overflow:hidden; transition:max-height .3s ease; background:var(--ly-purple-light); border-radius:8px; margin:0 4px 6px; } .ly-menu-item.open > .ly-submenu{ max-height:2000px; /* generous cap so nested content isn't clipped */ } .ly-submenu-list .ly-menu-row{ padding:12px 16px 12px 34px; } .ly-submenu-list .ly-menu-link{ font-size:14.5px; font-weight:400; color:var(--ly-text-dim); } .ly-submenu-list .ly-submenu{ margin:0 4px 6px 10px; } .ly-submenu-list .ly-submenu .ly-menu-row{ padding-left:46px; } /* ---------- Footer (phone button) ---------- */ .ly-offcanvas-footer{ padding:16px 20px 24px; border-top:1px solid var(--ly-border); } .ly-phone-btn{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:12px 16px; border:1px solid rgba(255,255,255,0.4); border-radius:50px; color:#fff; text-decoration:none; font-size:15px; font-weight:500; } .ly-phone-btn i{ font-size:14px; } (function(){ // --------------------------------------------------------------- // Menu data — built from LingoYou's actual header menu structure // --------------------------------------------------------------- const menuData = [ { label: "Home", url: "https://www.lingoyou.com/", icon: "fa-house" }, { label: "Chi Siamo", url: "https://www.lingoyou.com/chi-siamo/", icon: "fa-users", children: [ { label: "Team", url: "https://www.lingoyou.com/chi-siamo/team/" }, { label: "Valori", url: "https://www.lingoyou.com/chi-siamo/valori/" }, { label: "Brands", url: "https://www.lingoyou.com/chi-siamo/brands/" }, { label: "Uffici", url: "https://www.lingoyou.com/chi-siamo/uffici/" }, { label: "Impegno Sociale", url: "https://www.lingoyou.com/chi-siamo/cares/" }, { label: "I Nostri Clienti", url: "https://www.lingoyou.com/chi-siamo/i-nostri-clienti/" }, { label: "Certificazioni", url: "https://www.lingoyou.com/chi-siamo/le-nostre-certificazioni" } ]}, { label: "Tecnologia", url: "https://www.lingoyou.com/tecnologia/", icon: "fa-microchip", children: [ { label: "Atlas", url: "https://www.lingoyou.com/atlas/" }, { label: "Aura", url: "https://www.lingoyou.com/aura/" }, { label: "Universe", url: "https://www.lingoyou.com/universe/" }, { label: "Fusion", url: "https://www.lingoyou.com/fusion/" }, { label: "Layout", url: "https://www.lingoyou.com/ly-layout/" } ]}, { label: "Soluzioni", url: "https://www.lingoyou.com/Soluzioni/", icon: "fa-globe", children: [ { label: "Traduzione e Localizzazione", children: [ { label: "Servizio di Traduzione", url: "https://www.lingoyou.com/servizi-traduzione-e-localizzazione/traduzione/" }, { label: "Servizio di Localizzazione", url: "https://www.lingoyou.com/servizi-traduzione-e-localizzazione/localizzazione/" }, { label: "Traduzione AI", url: "https://www.lingoyou.com/tecnologia/traduzione-ai/" }, { label: "Interpretariato AI", url: "https://www.lingoyou.com/tecnologia/interpretariato-ai/" }, { label: "Interpretariato", url: "https://www.lingoyou.com/servizi-traduzione-e-localizzazione/interpretariato/" } ]}, { label: "Traduzione Certificata", children: [ { label: "Traduzioni Certificate LY", url: "https://www.lingoyou.com/traduzione-certificata/traduzioni-certificate-ly/" }, { label: "Traduzioni Giurate", url: "https://www.lingoyou.com/traduzione-certificata/traduzioni-giurate/" }, { label: "Traduzioni Legalizzate", url: "https://www.lingoyou.com/traduzione-certificata/traduzioni-legalizzate/" }, { label: "Traduzioni Legalizzate in Ambasciata", url: "https://www.lingoyou.com/traduzione-certificata/traduzioni-legalizzate-in-ambasciata/" } ]}, { label: "Marketing Multilingue", children: [ { label: "Servizio di Copywriting", url: "https://www.lingoyou.com/servizi-di-marketing-multilingue/servizio-di-copywriting/" }, { label: "Impaginazione Grafica", url: "https://www.lingoyou.com/servizi-traduzione-e-localizzazione/desktop-publishing/" }, { label: "Transcreazione", url: "https://www.lingoyou.com/servizi-di-marketing-multilingue/servizi-di-transcreazione/" } ]}, { label: "Servizi AI", children: [ { label: "Voice–over AI", url: "https://www.lingoyou.com/servizi-linguistici-multimediali-e-audiovisivi/voice-over-ai/" }, { label: "Speakeraggio AI", url: "https://www.lingoyou.com/servizi-linguistici-multimediali-e-audiovisivi/speakeraggio-ai/" }, { label: "Doppiaggio AI", url: "https://www.lingoyou.com/servizi-linguistici-multimediali-e-audiovisivi/doppiaggio-ai/" }, { label: "Interpretariato AI", url: "https://www.lingoyou.com/tecnologia/interpretariato-ai/" }, { label: "Traduzione AI", url: "https://www.lingoyou.com/tecnologia/traduzione-ai/" }, { label: "Interpretariato Telefonico AI", url: "https://www.lingoyou.com/aura/phone-interpreting-ai/" }, { label: "Sottotitolaggio AI", url: "https://www.lingoyou.com/servizi-linguistici-multimediali-e-audiovisivi/sottotitolaggio-ai/" } ]}, { label: "Servizi Multimediali e Audiovisivi", children: [ { label: "Doppiaggio", url: "https://www.lingoyou.com/servizi-linguistici-multimediali-e-audiovisivi/doppiaggio/" }, { label: "Sottotitolaggio", url: "https://www.lingoyou.com/servizi-linguistici-multimediali-e-audiovisivi/sottotitolaggio/" }, { label: "Speakeraggio", url: "https://www.lingoyou.com/servizi-linguistici-multimediali-e-audiovisivi/speakeraggio/" }, { label: "Voice Over", url: "https://www.lingoyou.com/servizi-linguistici-multimediali-e-audiovisivi/voice-over/" } ]}, { label: "Traduzione Siti & App", children: [ { label: "Localizzazione Software", url: "https://www.lingoyou.com/servizi-di-marketing-multilingue/localizzazione-software/" }, { label: "Traduzione Google Ads", url: "https://www.lingoyou.com/servizi-di-marketing-multilingue/traduzioni-ppc-multilingua/" }, { label: "Localizzazione siti web", url: "https://www.lingoyou.com/servizi-di-marketing-multilingue/localizzazione-siti-web/" }, { label: "Traduzione Seo", url: "https://www.lingoyou.com/servizi-di-marketing-multilingue/traduzione-seo-multilingue/" }, { label: "Localizzazione App", url: "https://www.lingoyou.com/servizi-di-marketing-multilingue/traduzione-e-localizzazione-app/" } ]}, { label: "Call Centering Multilingua", children: [ { label: "Call Center Multilingua", url: "https://www.lingoyou.com/tecnologia/call-center-multilingua/" }, { label: "Call Center VoIP Cloud", url: "https://www.lingoyou.com/tecnologia/call-center-multilingua/telefonia-cloud/" }, { label: "SIP Trunking Multilingua", url: "https://www.lingoyou.com/tecnologia/call-center-multilingua/sip-trunking/" }, { label: "Call Center Multilingua AI", url: "https://www.lingoyou.com/tecnologia/call-center-multilingua/ai-call-center/" }, { label: "Outsourcing Call Center Multilingua", url: "https://www.lingoyou.com/tecnologia/call-center-multilingua/outsourcing-call-center/" } ]}, { label: "Corsi di Lingua", children: [ { label: "Business English", url: "https://www.lingoyou.com/corsi-di-business-english/" }, { label: "Corsi per Export", url: "https://www.lingoyou.com/corsi-per-export/" }, { label: "Corsi per Customer Care", url: "https://www.lingoyou.com/corsi-di-lingua-per-customer-care/" }, { label: "Corsi Individuali", url: "https://www.lingoyou.com/corsi-di-lingua-individuali/" }, { label: "Corsi di Gruppo", url: "https://www.lingoyou.com/corsi-di-lingua-di-gruppo/" } ]} ]}, { label: "Settori", url: "https://www.lingoyou.com/settori/", icon: "fa-building", children: [ { label: "Brevettuale", url: "https://www.lingoyou.com/settore-legale/brevetti-e-proprieta-intellettuale/", children: [ { label: "Traduzione brevetti fase nazionale PCT", url: "https://www.lingoyou.com/settore-legale/brevetti-e-proprieta-intellettuale/pct-fase-nazionale/" }, { label: "Convalida brevetto europeo", url: "https://www.lingoyou.com/settore-legale/brevetti-e-proprieta-intellettuale/ep-validation-italia/" }, { label: "Traduzione brevetto unitario", url: "https://www.lingoyou.com/settore-legale/brevetti-e-proprieta-intellettuale/brevetto-unitario/" }, { label: "Traduzione rivendicazioni per deposito brevetti", url: "https://www.lingoyou.com/settore-legale/brevetti-e-proprieta-intellettuale/traduzione-rivendicazioni-claims/" }, { label: "Deposito brevetto per invenzione", url: "https://www.lingoyou.com/settore-legale/brevetti-e-proprieta-intellettuale/deposito-brevetto-invenzione/" }, { label: "Ricerca di anteriorità brevetti", url: "https://www.lingoyou.com/settore-legale/brevetti-e-proprieta-intellettuale/ricerca-anteriorita-brevettabilita/" } ]}, { label: "Finanziario", url: "https://www.lingoyou.com/settore-finanziario/", children: [ { label: "Settore Bancario e Mercati Finanziari", url: "https://www.lingoyou.com/settore-finanziario/settore-bancario-e-mercati-finanziari/" }, { label: "Settore Assicurativo", url: "https://www.lingoyou.com/settore-finanziario/settore-assicurativo/" }, { label: "Settore Fintech e Servizi Finanziari Digitali", url: "https://www.lingoyou.com/settore-finanziario/fintech-e-servizi-finanziari-digitali/" } ]}, { label: "Legale", url: "https://www.lingoyou.com/settore-legale/", children: [ { label: "Settore Societario e Contrattuale", url: "https://www.lingoyou.com/settore-legale/settore-societario-e-contrattuale/" }, { label: "Settore Giudiziario e Contenzioso", url: "https://www.lingoyou.com/settore-legale/settore-giudiziario-e-contenzioso/" }, { label: "Settore Brevetti e Proprietà Intellettuale", url: "https://www.lingoyou.com/settore-legale/brevetti-e-proprieta-intellettuale/" } ]}, { label: "Medico-Scientifico", url: "https://www.lingoyou.com/settore-medico-scientifico/", children: [ { label: "Settore Farmaceutico e Sperimentazioni Cliniche", url: "https://www.lingoyou.com/settore-medico-scientifico/settore-farmaceutico-e-sperimentazioni-cliniche/" }, { label: "Dispositivi Medici e Tecnologie Sanitarie", url: "https://www.lingoyou.com/settore-medico-scientifico/dispositivi-medici-e-tecnologie-sanitarie/" }, { label: "Ricerca Medica e Pubblicazioni Scientifiche", url: "https://www.lingoyou.com/settore-medico-scientifico/ricerca-medica-e-pubblicazioni-scientifiche/" } ]}, { label: "Moda", url: "https://www.lingoyou.com/settore-moda/", children: [ { label: "Alta Moda e Lusso", url: "https://www.lingoyou.com/settore-moda/alta-moda-e-lusso/" }, { label: "Retail ed E-commerce Moda", url: "https://www.lingoyou.com/settore-moda/retail-ed-e-commerce-moda/" }, { label: "Cosmetica e Cura della Persona", url: "https://www.lingoyou.com/settore-moda/cosmetica-e-cura-della-persona/" } ]}, { label: "Industriale Ingegneristico", url: "https://www.lingoyou.com/settore-industriale-e-ingegneristico/", children: [ { label: "Automotive e Trasporti", url: "https://www.lingoyou.com/settore-industriale-e-ingegneristico/automotive-e-trasporti/" }, { label: "Macchinari Industriali e Ingegneria Meccanica", url: "https://www.lingoyou.com/settore-industriale-e-ingegneristico/macchinari-industriali-e-ingegneria-meccanica/" }, { label: "Energia e Impiantistica", url: "https://www.lingoyou.com/settore-industriale-e-ingegneristico/energia-e-impiantistica/" } ]}, { label: "Pubblico e Amministrativo", url: "https://www.lingoyou.com/settore-pubblico-e-amministrativo/", children: [ { label: "Enti Governativi e Ministeri", url: "https://www.lingoyou.com/settore-pubblico-e-amministrativo/enti-governativi-e-ministeri/" }, { label: "Pubblica Amministrazione Locale", url: "https://www.lingoyou.com/settore-pubblico-e-amministrativo/pubblica-amministrazione-locale/" }, { label: "Organizzazioni Internazionali e ONG", url: "https://www.lingoyou.com/settore-pubblico-e-amministrativo/organizzazioni-internazionali-e-ong/" } ]}, { label: "Energia e Ambiente", url: "https://www.lingoyou.com/energia-e-ambiente/", children: [ { label: "Energie Rinnovabili", url: "https://www.lingoyou.com/energia-e-ambiente/energie-rinnovabili/" }, { label: "Oil & Gas", url: "https://www.lingoyou.com/energia-e-ambiente/oil-gas/" }, { label: "Utilities & Reti", url: "https://www.lingoyou.com/energia-e-ambiente/utilities-reti/" } ]}, { label: "Marketing e Pubblicità", url: "https://www.lingoyou.com/marketing-e-pubblicita/", children: [ { label: "Pubblicità e Campagne", url: "https://www.lingoyou.com/marketing-e-pubblicita/pubblicita-e-campagne/" }, { label: "Branding e corporate communication", url: "https://www.lingoyou.com/marketing-e-pubblicita/branding-e-corporate-communication/" }, { label: "Digitale e Contenuti Web", url: "https://www.lingoyou.com/marketing-e-pubblicita/digitale-e-contenuti-web/" } ]}, { label: "Turismo e Ospitalità", url: "https://www.lingoyou.com/turismo-e-ospitalita/", children: [ { label: "Hotellerie", url: "https://www.lingoyou.com/turismo-e-ospitalita/hotellerie/" }, { label: "Viaggi e Tour Operator", url: "https://www.lingoyou.com/turismo-e-ospitalita/viaggi-e-tour-operator/" } ]}, { label: "IT e Software", url: "https://www.lingoyou.com/it-e-software/", children: [ { label: "Software e Applicazioni", url: "https://www.lingoyou.com/it-e-software/software-e-applicazioni/" }, { label: "Videogiochi e intrattenimento digitale", url: "https://www.lingoyou.com/it-e-software/videogiochi-e-intrattenimento-digitale/" }, { label: "Cybersecurity e infrastrutture IT", url: "https://www.lingoyou.com/it-e-software/cybersecurity-e-infrastrutture-it/" } ]}, { label: "Alimentari e Bevande", url: "https://www.lingoyou.com/alimentare-e-bevande/", children: [ { label: "Etichette e packaging", url: "https://www.lingoyou.com/alimentare-e-bevande/etichette-e-packaging/" }, { label: "Marketing e Comunicazione", url: "https://www.lingoyou.com/alimentare-e-bevande/marketing-e-comunicazione-food-beverage/" }, { label: "Certificazioni e Normative", url: "https://www.lingoyou.com/alimentare-e-bevande/normative-e-certificazioni-traduzioni-food-beverage/" } ]}, { label: "Edilizia e Architettura", url: "https://www.lingoyou.com/edilizia-e-architettura/", children: [ { label: "Progetti e capitolati", url: "https://www.lingoyou.com/edilizia-e-architettura/progetti-e-capitolati/" }, { label: "Design e Architettura", url: "https://www.lingoyou.com/edilizia-e-architettura/design-e-architettura/" }, { label: "Normative e Sicurezza", url: "https://www.lingoyou.com/edilizia-e-architettura/normative-e-sicurezza/" } ]} ]}, { label: "Risorse", url: "https://www.lingoyou.com/risorse/", icon: "fa-book-open", children: [ { label: "Casi Studio", url: "https://www.lingoyou.com/casi-studio/" }, { label: "Multimedia", url: "https://www.youtube.com/@lingoyougroup" }, { label: "Blog", url: "https://www.lingoyou.com/lingoyou-blog/" } ]}, { label: "Contattaci", url: "https://www.lingoyou.com/contattaci/", icon: "fa-envelope" } ]; // --------------------------------------------------------------- // Renderer — recursively builds
- from the data above // --------------------------------------------------------------- function renderMenu(items, isRoot){ const ul = document.createElement("ul"); ul.className = isRoot ? "ly-menu-list" : "ly-submenu-list"; items.forEach(item => { const li = document.createElement("li"); li.className = "ly-menu-item"; const row = document.createElement("div"); row.className = "ly-menu-row"; const left = document.createElement("div"); left.className = "ly-menu-row-left"; if (isRoot && item.icon){ const iconSpan = document.createElement("span"); iconSpan.className = "ly-menu-icon"; iconSpan.innerHTML = ``; left.appendChild(iconSpan); } const a = document.createElement("a"); a.className = "ly-menu-link"; a.href = item.url || "#"; a.textContent = item.label; left.appendChild(a); row.appendChild(left); if (item.children && item.children.length){ const toggle = document.createElement("span"); toggle.className = "ly-menu-toggle-icon"; toggle.innerHTML = ``; row.appendChild(toggle); row.addEventListener("click", function(e){ // Clicking the row (not the link itself) toggles the submenu if (e.target.closest("a")) return; // let link navigate normally li.classList.toggle("open"); }); // Also allow tapping the chevron area specifically toggle.addEventListener("click", function(e){ e.preventDefault(); e.stopPropagation(); li.classList.toggle("open"); }); li.appendChild(row); const submenu = document.createElement("div"); submenu.className = "ly-submenu"; submenu.appendChild(renderMenu(item.children, false)); li.appendChild(submenu); } else { li.appendChild(row); } ul.appendChild(li); }); return ul; } document.getElementById("lyMenuRoot").appendChild(renderMenu(menuData, true)); // --------------------------------------------------------------- // Open / close behavior // --------------------------------------------------------------- const trigger = document.getElementById("lyMenuTrigger"); const overlay = document.getElementById("lyOverlay"); const panel = document.getElementById("lyPanel"); const closeBtn = document.getElementById("lyCloseBtn"); function openMenu(){ panel.classList.add("active"); overlay.classList.add("active"); document.body.style.overflow = "hidden"; } function closeMenu(){ panel.classList.remove("active"); overlay.classList.remove("active"); document.body.style.overflow = ""; } trigger.addEventListener("click", openMenu); closeBtn.addEventListener("click", closeMenu); overlay.addEventListener("click", closeMenu); })();
