Overlay menu 
Author: Roberto M.AL TEAM INCOMEDIA
Desidero sottoporre alla vostra attenzione una proposta concreta per migliorare il sistema di navigazione nei siti Web creati con WebSite X5. Attualmente, l’overlay menu nativo gestisce esclusivamente i livelli principali, ignorando completamente i sottolivelli. Questa limitazione è stata segnalata più volte dalla community, ma ad oggi non si intravede alcun intervento risolutivo.
Per rispondere a questa esigenza, ho sviluppato un overlay menu responsive con gestione avanzata dei submenu, pensato per siti con una struttura ipertestuale complessa. Il codice è stato progettato per offrire flessibilità e controllo, ma proprio per questo motivo non è adatto a utenti alle prime armi: richiede competenze tecniche e una buona familiarità con HTML, CSS e JavaScript. È uno strumento pensato per chi sa dove mettere le mani e desidera superare i limiti imposti dal sistema attuale.
Ritengo che un’integrazione nativa di funzionalità simili all’interno di WebSite X5 possa rappresentare un passo importante verso una piattaforma più potente e versatile, capace di soddisfare anche le esigenze degli utenti più esperti.
ANDIAMO NEL DETTAGLIO:
Questo overlay menu è una barra laterale interattiva che consente la navigazione tra livelli principali e sottolivelli (submenu), cosa che il menu nativo di WebSite X5 non gestisce correttamente. È pensato per siti con struttura ipertestuale complessa, dove la gerarchia dei contenuti è fondamentale.
Funzionalità principali1. Sidebar fissa e responsive
- Si posiziona a sinistra dello schermo.
- È visibile su dispositivi mobili e desktop.
- Si attiva/disattiva con un pulsante flottante (☰) e un overlay trasparente.
- Ogni voce principale (menu-title) può contenere un gruppo di link secondari (submenu).
- I submenu si aprono e chiudono con animazioni fluide (fade-in, max-height, opacity).
- Solo un submenu può essere aperto alla volta, evitando confusione visiva.
- Il sistema rileva la pagina attiva tramite window.location.pathname.
- Evidenzia il link corrispondente con la classe active-link.
- Apre automaticamente il relativo submenu e lo evidenzia con la classe active.
- Il titolo del menu attivo lampeggia per 20 secondi all’apertura della pagina che sono personalizzabili.
- Aiuta l’utente a orientarsi visivamente.
- Colori personalizzabili tramite variabili CSS (--rosso-vivo, --bianco, ecc.).
- Comportamento fluido e coerente su tutte le risoluzioni.
Il tutto è stato realizzato con HTML semantico per la struttura, CSS moderno per le variabili, media queries, animazioni, JavaScript vanilla per la logica interattiva (senza dipendenze esterne) ed è Responsive design con breakpoint a 1680px per adattarsi a layout WebSite X5.
RIFERIMENTO SUL MENU' INTERATTIVO QUI
Il menu è completamente personalizzabile: basta modificare i link presenti nel listato HTML per adattarlo alle proprie esigenze. Ogni sezione (menu-item) e sottosezione (submenu) può essere duplicata, rinominata o riorganizzata liberamente.
Esempi di intervento:
Questa stringa si cambia la categoria:
<div class="menu-title" onclick="toggleSubmenu(this)">Saluto Romano <span class="arrow">▶</span></div>
Quest'altra modifica il link della pagina a cui deve puntare l'utente: <a href="saluto-romano.html">Definizione</a>
Cosa chiedo a INCOMEDIA?
Lo sviluppo di un oggetto professionale dedicato alla navigazione avanzata, anche come componente premium a pagamento, che consenta agli utenti di:
- Gestire menu multilivello con struttura ad albero.
- Personalizzare grafica, icone, colori, animazioni e comportamento responsive.
- Attivare funzioni come scroll automatico, evidenziazione dinamica, ricerca interna, e effetti visivi temporizzati.
- Salvare e riutilizzare configurazioni in più progetti.
Questo oggetto potrebbe essere distribuito come modulo aggiuntivo nel marketplace WebSite X5, oppure integrato nei piani Pro. Gli utenti esperti sarebbero disposti a investire in uno strumento che risolve definitivamente le limitazioni del menu nativo, offrendo flessibilità, scalabilità e controllo totale.
Grazie Solo Roberto per aver postato il tuo lavoro qui.
P S. Solo con Incomedia e Website X5 si hanno queste limitazioni sull'overlay menu, lo dico con cognizione di causa dato che il sottoscritto utilizza anche altre piattaforme per i propri lavori.
+ 1000 https://helpcenter.websitex5.com/en/post/262756
+++1 ottimo Roberto, grazie.
+ 1000
condivido il pensiero di Roberto
....Questa limitazione è stata segnalata più volte dalla community, ma ad oggi non si intravede alcun intervento risolutivo...
Grazie
+ 1 grazie Roberto M.
Ciao Roberto,
ti ringrazio per avere condiviso con gli altri utenti il tuo lavoro.
Ho già segnalato la richiesta di avere un overlay menù che comprenda tutti i livelli, ma comunque colgo l'occasione per riportare l'attenzione su questo tema.
Grazie ancora, ti auguro una buona giornata.
Elisa, il vero problema è che noi proponiamo e tu segnali, noi proponiamo e tu segnali e la cosa va avanti così da anni: ci vogliono azioni concrete, tutto qui.
Ho dato un'idea in passato:
Voi di Incomedia stilate una lista di 5/8 aggiornamenti di nuove funzionalità da inserire in Website (occhio, la lista lastilate VOI DI INCOMEDIA in base alle tante richieste degli utenti, non pretendiamo di stilarla noi, vi metteremmo in difficoltà sicuramente!), poi pubblicate la lista, mettetela ai voti e la funzionalità che ottiene più voti la realizzate e implementate in un successivo (non lontano!) aggiornamento.
Credo che così iniziereste a far felici un po' di utenti.
Difficile è tutto questo?
P.S. 'sto fatto che quando inserisci il grassetto sulle parole qui nel forum, alcune poi si attaccano alla precedente dopo la pubblicazione... chiaramente era "la stilate"
Author
Volevo solo aggiungere che nei casi in cui i sub menu risultassero tagliati, agire sulla parte del listato che segue:
.submenu.open {
max-height: 600px;
opacity: 1;
}
600px se vi sembra corto il menù aumentate di 100 px
Per il resto l'idea di Giuseppe Guida è azzeccatissima.Coinvolgimento assicurato olte le aspettative
.
Author
Il post di riferimento non dice niente e non mi sembra collegato a questa idea. Tra l'altro il sito di riferimento NON E' SICURO.Non trovo riferimenti a spunti di codice operativo. Vedo una soluzione di Giuseppe Guida (uno che mi ha insegnato tanto) che è questa :
<!-- FIX OVERLAY -->
<style>
#imPageRowGraphicsOverlay_num {
z-index: 0 !important;
}
Quel fix serve a risolvere un bug di sovrapposizione causato da WebSite X5, non dal mio codice. In ogni caso se si fosse presentato il problema sul mio codice sarebbe bastato aggiungere:
<style> #imPageRowGraphicsOverlay_num { z-index: 0 !important; pointer-events: none; } </style>
Il listato attuale in riferimento sul mio post è già ottimizzato per modularità, accessibilità e interattività. Ogni funzione è giustificata da una necessità concreta (toggle, evidenziazione, responsive, animazione).Funziona solo su Header fissi dato che la stiky bar a quel punto è inutile in tutti i breack-point : non è che ci vuole uno scienziato a notarlo.
INOLTRE:
Il codice è lungo? Sì. Ma anche la Costituzione lo è, eppure funziona. Se bastasse un click per fare tutto, WebSite X5 non avrebbe bisogno di sviluppatori. Il mio codice è pensato per chi vuole capire, non solo “cliccare”
Quando fai riferimento a “Semplificare” significherebbe rimuovere funzionalità, non ottimizzare. Se tu hai una proposta più semplice che mantenga tutte le feature attuali, ti invito a presentarla o a fare riferimento su post anche datati ma che abbiano l'esempio in concreto operativo con markup e script funzionante così da poterlo testare.
Anche cercando di capire cosa vorresti fare o buttarti su una cosa simile...
<ul>
<li><a href="index.html">Home</a></li>
<li>
Saluto Romano
<ul>
<li><a href="saluto-romano.html">Definizione</a></li>
<li><a href="origini.html">Origini</a></li>
</ul>
</li>
</ul>
è perfetto solo che:
È una semplificazione da HTML statico anni ’90, non una soluzione moderna. Se proprio volessimo ricercare una ottimizzazione del codice bisognerebbe:
Ripeto.... se hai una proposta concreta da condividere, sarebbe interessante confrontarla con quella attuale. L’obiettivo è migliorare insieme, e ogni spunto pratico è benvenuto.