WebSite X5Help Center

 
Roberto M.
Roberto M.
User

Overlay menu  it

Autor: Roberto M.
Besucht 87, Followers 0, Geteilt 0  

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

RIFERIMENTO SUL CODICE 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:

  1. Gestire menu multilivello con struttura ad albero.
  2. Personalizzare grafica, icone, colori, animazioni e comportamento responsive.
  3. Attivare funzioni come scroll automatico, evidenziazione dinamica, ricerca interna, e effetti visivi temporizzati.
  4. 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.

Gepostet am
5 ANTWORTEN
Giuseppe Guida
Giuseppe Guida
User

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.

Mehr lesen
Gepostet am von Giuseppe Guida
Giancarlo B.
Giancarlo B.
User

+++1 ottimo Roberto, grazie.

Mehr lesen
Gepostet am von Giancarlo B.
Alessandro R.
Alessandro R.
User

+ 1000 

condivido il pensiero di Roberto

....Questa limitazione è stata segnalata più volte dalla community, ma ad oggi non si intravede alcun intervento risolutivo...

Grazie

Mehr lesen
Gepostet am von Alessandro R.
Alex *
Alex *
User

+ 1 grazie Roberto M.

Mehr lesen
Gepostet am von Alex *