Menu Drop-down

Ritratto di Vanni

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

 

Aggiungi un commento

Filtered HTML

  • Indirizzi web o e-mail vengono trasformati in link automaticamente
  • Elementi HTML permessi: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Linee e paragrafi vanno a capo automaticamente.

Comment

  • Elementi HTML permessi: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Linee e paragrafi vanno a capo automaticamente.
  • Indirizzi web o e-mail vengono trasformati in link automaticamente

Plain text

  • Nessun tag HTML consentito.
  • Indirizzi web o e-mail vengono trasformati in link automaticamente
  • Linee e paragrafi vanno a capo automaticamente.
Per tutelare la vostra privacy suggerisco l'uso di un nickname o lasciare anonimo...
CAPTCHA
Questa domanda e' per testare se sei un visitatore persona e non un software che genera spam
1 + 3 =
Risolvi la semplice domanda di matematica e inserisci il risultato. Es. se e' 1 + 3 inserisci 4.