Menu Drop-down

Ritratto di Vanni
Inviato da il

Per chi usa Drupal 7, creare menù drop-down non è un problema. Ci vengono in aiuto degli appositi moduli che ci dispensano dal mettere mano in maniera diretta a librerie JavaScript (come jQuery) o all’uso massiccio ci CSS3.

I moduli più famosi per creare questi menù a tendina sono Superfish e Nice Menus.

Superfish, che prenderemo in esame in questa pagina, è estremamente configurabile e può soddisfare anche il webmaster più sofisticato. Il modulo si scarica da qui ma ha bisogno anche di un’apposita libreria (Attenzione: aggiornamenti del modulo possono portare ad aggiornamenti anche della libreria). Con la sola configurazione del blocco menù si può scegliere: colore, animazione, velocità di risposta e molto altro. Inoltre, è facile andare ad agire direttamente nei CSS per modificare alcuni aspetti grafici. Se non ci si accontenta dei 3 effetti di animazione dei link, messi a disposizione di default, è possibile anche affiancarli jQuery per aggiungerne di nuovi.

Nice Menus che si può trovare qui è molto funzionale ma un po’ meno configurabile, quindi è ideale per chi non vuole perdere troppo tempo a testare tutte le varie impostazioni. Anch’esso usa una libreria ma è la stessa di Superfish. 

Segnalo anche il modulo TB Mega Menu estremamente potente e facile da configurare, il modulo lo travate qui e ha bisogno solo di jQuery (raccomandata versione 1.7). Inoltre trovate già un video tutorial e una pagina di descrizione riguardo il suo utilizzo.

Descrizione del modulo Superfish

Questo modulo crea dei blocchi a cui poi potremo assegnare uno dei menù che sono presenti nel sito, in questo esempio assegnerò al primo blocco il menù Navigazionale ed al secondo blocco il menù Principale.

  • Installare e abilitare il modulo
  • Tramite la sua pagina di configurazione possiamo scegliere quanti “blocco menu” ci servono
  • Andare nella pagina di configurazione dei blocchi e scorrere fino in fondo dove troveremo dei blocchi chiamati Superfish
  • Impostare: eventuale titolo blocco e assegnarli il tipo di menù che deve visualizzare in stile drop-down
  • pagina di configurazione del "blocco menu" di superfish
  • Dobbiamo impostare: il tipo di menù, lo stile, velocità di animazione e ritardo del mouse
  • impostazione di tipo menu, stile, velocità di animazione
  • Slide-in-effect è il tipo di animazione con cui si apriranno i “sub link” (possiamo aggiungere effetti scaricando jQuery)
  •  Nel fondo pagina si apre la possibilità ad innumerevoli configurazioni
  • impostazione dell'effetto animato ed elenco delle altre configurazioni
  • Assegnare la regione in cui dovrà essere visualizzato il nuovo menù
  • Salvare

Vari esempi di visualizzazione dei menù utilizzando Superfish

Così appare il menù Navigazionale di questo sito impostando:

  1. tipo = verticale; stile = nessuno primo effetto con configurazioni base del menu
  2. tipo = verticale; stile = coffee secondo effetto con colore stile coffee
  3. tipo = orizzonatle; stile = space terzo effetto con colore grigio e menu orrizzontale
  4. tipo = nav bar; stile = light blue quarto effetto con colore blue e effetto nav bar

Così appare il menù Principale di questo sito impostando:

  1. tipo = orizzonatle; stile = spring quinto effetto con colore verde e stile orizzontale
  2. tipo= nav bar; stile = pomegranate sesto effetto con colore viole ed effetto nav bar