Navigazione principale e menu Prodotti

La sezione di header occupa l’intera larghezza superiore del sito e riprende esattamente palette colori, font e spaziature già in uso. A sinistra è presente il logo, centrato verticalmente, mentre a destra si sviluppa il menù di navigazione principale a scaletta / tendina, con voci disposte in orizzontale: Home, Azienda, Prodotti, Supporto, Risorse, Contatti. Il font delle voci è lo stesso tipografico del resto del sito (peso medio), con interlinea e padding verticale coerenti con i pulsanti e i titoli delle altre sezioni, così da garantire continuità visiva.

La voce “Prodotti” è messa in evidenza tramite una gerarchia visiva chiara ma elegante: colore del testo leggermente più saturo o scuro rispetto alle altre voci, peso del font leggermente maggiore (es. semibold) e un piccolo pill background o sottolineatura morbida che compare al passaggio del mouse. Accanto all’etichetta “Prodotti” è presente una micro-icona a freccia verso il basso (caret) minimal, in linea con lo stile delle altre icone del sito (stesso spessore di linea, stesso colore principale o un neutro scuro). Questa freccia ruota di 180° quando il sottomenu è aperto, fungendo da chiaro indicatore di stato.

Al passaggio del mouse (o al tocco su mobile) sulla voce “Prodotti”, si apre un menu a tendina con sfondo leggermente contrastato rispetto all’header (ad esempio bianco su header colorato, oppure un tono più chiaro dello stesso colore principale). Il pannello è allineato sotto la voce principale, con bordi arrotondati coerenti con i bottoni del sito e un’ombra morbida per staccarlo dallo sfondo. Le sei categorie merceologiche sono disposte in una singola colonna verticale, con ampio spazio tra le voci per facilitare la selezione:

• Rischio cardiovascolare e diabete
• Funzionalità renale
• Infiammazione e infezione
• Coagulazione
• Immunologia, endocrinologia e ormoni
• Misura professionale della pressione arteriosa

Ogni sottovoce utilizza un font leggermente più piccolo rispetto alla voce “Prodotti”, ma con la stessa famiglia tipografica. La gerarchia visiva è definita da: dimensione e peso del font inferiori, allineamento a sinistra, e un indicatore di selezione al passaggio del mouse (cambio colore del testo, evidenziazione di sfondo o una sottile barra colorata a sinistra). In questo modo è chiaro che “Prodotti” è il livello principale, mentre le sei categorie sono sottolivelli.

Per rendere il sottomenu ancora più leggibile, si possono usare micro-icone tematiche a sinistra di ciascuna categoria, tutte nello stesso stile lineare o pieno già adottato nel sito (stesso set di icone, stessa palette):

• Rischio cardiovascolare e diabete: icona di cuore stilizzato con piccolo grafico o goccia.
• Funzionalità renale: icona di rene stilizzato.
• Infiammazione e infezione: icona di termometro o scudo con piccolo segnale di allerta.
• Coagulazione: icona di goccia di sangue con segno di controllo.
• Immunologia, endocrinologia e ormoni: icona di scudo con molecola o simbolo ormonale astratto.
• Misura professionale della pressione arteriosa: icona di bracciale per pressione o manometro.

Su desktop, il comportamento è hover-first: il sottomenu si apre al passaggio del mouse e rimane visibile finché il cursore resta sulla voce “Prodotti” o all’interno del pannello. Al di fuori di quest’area, il menu si chiude con una breve animazione di dissolvenza o scorrimento verso l’alto, coerente con le transizioni già presenti nel sito. Su mobile e tablet, la voce “Prodotti” è inserita nel menu a icona hamburger: al tocco, l’elemento si espande a fisarmonica mostrando le sei sottovoci, con la freccia che ruota verso l’alto e un leggero rientro (indent) delle categorie per evidenziare la gerarchia.

Spaziature orizzontali e verticali sono allineate alla griglia esistente: margini laterali dell’header uguali a quelli del contenuto principale, altezza minima dell’header sufficiente a contenere logo e menu senza affollamento, e padding interno del sottomenu coerente con card e box informativi del sito. In questo modo il menu di navigazione principale e il sottomenu “Prodotti” risultano perfettamente integrati nello stile grafico complessivo, mantenendo chiarezza, ordine e facilità d’uso.

Le nostre 6 categorie di prodotti