Menu a tendina per WordPress

[template Suckerfish]

Se usate il plugin WordPress Menubar potete facilmente costruire dei menu dropdown, o a tendina, usando il template Suckerfish.

Il template Suckerfish (Download) si chiama così perchè è realizzato seguendo i due articoli ormai celebri che spiegano come realizzare menu dropdown accessibili, leggeri, conformi agli standard e compatibili con i vari browser. Ve li ricordo:

Il template Suckerfish utilizza una sola immagine, per l’ombra sotto la barra orizzontale, e poche righe di JavaScript che gli consentono di funzionare anche con IE. Se JavaScript è disabilitato, il dropdown non funziona in IE, ma continua a funzionare negli altri browser provati (Firefox e Opera).

Come sempre è possibile personalizzare l’aspetto del menu modificando il foglio di stile del template, e cambiare dimensioni, colori, font, bordi, margini del menu per sintonizzarlo perfettamente con il design del vostro sito.

Buona personalizzazione!

40 Comments so far

  1. maxanima on December 13th, 2007

    Scusa il disturbo, vedo sei un esperto… da qualche giorno nel mio blog wordpress non mi fa più modificare la sidebar… non solo se aggiungo e salvo codici di widget non me li salva, ma neanche se li elimino… praticamente come se non mi salvasse più le modifiche che faccio… che succede? :-(

  2. andrea on December 13th, 2007

    Ciao Max,
    nessun disturbo, i commenti sono aperti per questo :-)

    Prova a verificare se hai esaurito lo spazio per il database. Altrimenti prova a disattivare i plugin e vedi se la situazione torna normale. Se il problema persiste, suggerisco di chiedere una mano anche agli altri amici di WordPress Italy, http://www.wordpress-it.it/forum/

    Sta tranquillo che troviamo una soluzione!

  3. maxanima on December 16th, 2007

    ciao andrea, sai cos’era? i permessi… così per caso ho provato nel mio hosting a riparare permessi di cartelle e file… e ora funziona… mah, chissà che era successo :-)

    Grazie dell’appoggio :-)

  4. Mindthegap on December 31st, 2007

    Ciao andrea. complimenti per l’ottimo plug in. l’ho già installato e personalizzato :-)
    unica cosa che ancora mi sfugge è come fare per eliminare le pagine figlie-figlie dal menu …
    quello che voglio dire è che vorrei che apparisse solo il primo livello di pagine figlie e non tutto l’albero.
    come fare?
    approfitto dell’occasione per augurarti buone feste. :-) Dario
    ps il sito che sto mettendo su: http://www.annadevemorire.altervista.org

  5. andrea on December 31st, 2007

    Ciao Dario,
    ho inserito la risposta alla tua domanda nella nota in fondo all’articolo. Ti ricambio gli auguri di buone feste e buon anno!

  6. mindthegap on January 1st, 2008

    Ciao Andrea. ho appena modificato opportunamente il file incriminato :-)
    adesso funziona proprio come volevo.
    grazie per la dritta.

    Di nuovo auguri di buon anno!
    Dario

  7. ubu4ever on January 11th, 2008

    Ciao Andrea. Davvero un bel plugin. Complimenti :)

    Ho un problema con questo template. Quando lo attivo, nella home appare questo:

    http://img171.imageshack.us/img171/4117/bar2jn6.png

    al posto del menù in immagine.

    Ciao e grazie :)

  8. andrea on January 12th, 2008

    Ciao Ubu4ever,
    ti ho inviato via mail alcuni suggerimenti, fammi sapere se la situazione migliora!

  9. ubu4ever on January 12th, 2008

    Grazie 10 000 andrea :)

    Tutto ok :)

    Grazie ancora (sia per il plugin sia per l’aiuto)

    Ciao :)

  10. emanuela on February 4th, 2008

    innanzitutto complimenti per il lavoro e la professionalità!
    Stavo cercando un modo per inserire nel mio nuovo sito che sto creando con WP, un menu a tendina.
    Ho scaricato il plugin Menubar 2.2, ho inserito attraverso questo plugin il menu principale (basato su pagine), commentando il menu che avevo creato precedentemente.
    Ora però mi trovo in difficoltà, perchè non capisco come gestire il menu di secondo livello.
    semplifico con un esempio, puramente fittizio.
    Il menu è fatto da queste pagine:
    HOME, PAGINA1, PAGINA2, … PAGINA7
    Per PAGINA2 prevedo 3 ’sottopagine’
    Pagina2-a, Pagina2-b, Pagina2-c
    Ho già creato queste pagine dal pannello di amministrazione, ma come faccio ora a riportarle nel menu?
    Ho inserito anche i codici che riporti sopra nell’articolo nel file wpm.php
    ti ringrazio in anticipo per l’aiuto!

  11. andrea on February 6th, 2008

    Ciao Emanuela,
    il menu a tendina per il momento è disponibile solo con il template Suckerfish. Ti basta scaricarlo, installarlo ed attivarlo seguendo le istruzioni (vedi “Come usare i template di menu“) e le tendine verranno visualizzate automaticamente. Forse non hai attivato Suckerfish? Fammi sapere!

  12. Fil on February 15th, 2008

    Ciao Andrea,
    complimenti per il bellissimo plugin.
    Ho dei problemi con la visualizzazione delle categorie e spero tu possa darmi qualche suggerimento.

    Ho creato un “albero” di categorie: cat.A (livello 1), cat.B (sottocategoria di A), cat.C (sottocategoria di B), cat.D (sottocategoria di B).
    In una voce del menu, scegliendo come tipo “Category” e segnalando come “ID della categoria” l’ID di cat.B, mi aspetto che mi si apra una tendina con due elementi: cat.C e cat.D, giusto?
    Invece continua a comparire solo “nessuna categoria” :(

    Cosa sbaglio?

    Grazie e ancora complimenti.

  13. andrea on February 15th, 2008

    Ciao Fil,
    prova ad inserire dei post nelle sottocategorie, altrimenti WordPress non le visualizza. Buon lavoro!

  14. silvia on March 19th, 2008

    grazie per aver creato un menù bar a tendina ho un problema con il tema kubrick che uso perchè mi occorre una testata personalizzabile per inserire un logo specifico il menù diventa di un colore violaceo fastidiosissimo puoi aiutarmi ciao e grazie Silvia

  15. andrea on March 19th, 2008

    Ciao Silvia,
    se apri il file wp-content/plugins/menubar/Suckerfish/wpm.css puoi trovare (e cambiare) tutti i colori del menu. Ad esempio il colore #1874CD è il colore di sfondo, #2EB0FF è il colore del bordo superiore, e così via.

  16. Fil on March 31st, 2008

    Ciao Andrea,
    stavo provando a installare WP 2.5 riportandomi tutti i plugin utilizzati… ma la menubar mi genera un errore strano in testa alla pagina del blog e anche nelle pagine di amministrazione relative alla gestione della menubar.
    Ecco l’errore:

    Warning: Invalid argument supplied for foreach() in /nomesito/wp-includes/wp-db.php on line 556

    Spero possa esserti utile nel caso tu voglia lavorarci.
    Ciao a tutti!

  17. andrea on April 2nd, 2008

    Grazie della segnalazione, ti faccio sapere qualcosa al più presto. Ciao!

  18. Fil on April 4th, 2008

    Ciao Andrea, sempre io…
    volevo sapere se c’era un modo per rendere non cliccabile un pulsante del menu che abbia delle sottocategorie (ovvero che presenti l’effetto dropdown).
    Ci sto provando ma non mi viene nulla in mente…
    Grazie e ciao!

  19. andrea on April 4th, 2008

    Ciao Fil,
    la cosa che chiedi non c’è ancora, ma la sto aggiungendo per la prossima versione, Menubar 3.0 beta 5. Ciao!

  20. Fil on April 6th, 2008

    Lo so, rompo sempre troppo… :)
    Grazie ancora cmq!

  21. Chiara on April 20th, 2008

    Ciao Andrea!
    Ti scrissi tempo fa per alcuni problemi che avevo con il menu, (all’epoca, il sito era http://thelword.hostsnake.com, adesso ho cambiato servizio di hosting perchè avevo problemi di accessibilità: lentezza incredibile, a volta non si apriva nemmeno, e simili). Ho installato wordpress 2.5 e caricato il la versione del menu 3.0 beta 4, visto che quella che avevo prima non era compatibile con quest’ultima versione di wordpress.
    Ma, quando provo ad inserire il menù. ottnego questo messaggio di errore:
    “Warning: include() [function.include]: open_basedir restriction in effect. File(/wpm3.php) is not within the allowed path(s): (/tmp/:/users/t/h/e/thelword/public_html/) in /users/t/h/e/thelword/public_html/wp-content/plugins/menubar/wpm-main.php on line 151

    Warning: include(/wpm3.php) [function.include]: failed to open stream: Operation not permitted in /users/t/h/e/thelword/public_html/wp-content/plugins/menubar/wpm-main.php on line 151

    Warning: include() [function.include]: open_basedir restriction in effect. File(/wpm3.php) is not within the allowed path(s): (/tmp/:/users/t/h/e/thelword/public_html/) in /users/t/h/e/thelword/public_html/wp-content/plugins/menubar/wpm-main.php on line 151

    Warning: include(/wpm3.php) [function.include]: failed to open stream: Operation not permitted in /users/t/h/e/thelword/public_html/wp-content/plugins/menubar/wpm-main.php on line 151

    Warning: include() [function.include]: Failed opening ‘/wpm3.php’ for inclusion (include_path=’.:/usr/share/php:/usr/share/pear’) in /users/t/h/e/thelword/public_html/wp-content/plugins/menubar/wpm-main.php on line 151″ dove vorrei che apparisse il menu.
    Hai qualche suggerimento? Io non so davvero dove mettere le mani…

  22. andrea on April 23rd, 2008

    Ciao Chiara,
    ho appena rilasciato la versione 2.3 di Menubar, che funziona anche con WordPress 2.5 ma per il resto è identica alla precedente versione 2.2.

    Se vuoi provarla, potrebbe risolvere il tuo problema; se invece non lo risolvesse, fammelo sapere così approfondisco l’indagine. Il link per scaricare il plugin è sempre nella pagina Download.

  23. Chiara on May 4th, 2008

    Ciao Andrea,
    ho scaricato la versione 2.3 ma, purtroppo, ci sono dei problemi con l’hosting che sto usando, probabilmente il retaggio dell’ultima manutenzione ai server che hanno fatto il 2 maggio.
    Non ho potuto controllare prima se avessi o meno risposto al messaggio, quindi sono bloccata. Ci sono sia problemi d’accesso via FTP che problemi via pannello di controllo, (fa vedere tutto bianco, come se non esistessero cartelle o files, benchè il sito sia visibile).
    Non appena sarò in grado di uploadare la nuova versione, ti farò sapere ^_^
    Intanto grazie per la risposte e un’ultima domandina: visto che avevo già adattato il template suckerfish al template del sito, che non ho cambiato, ci sono problemi? Nel senso, posso utilizzarlo con le modifiche che ho già fatto, oppure devo riadattarlo? Grazie ancora ^_^

  24. andrea on May 5th, 2008

    Ciao Chiara,
    se passi a Menubar 3.0 dovrai riadattare il CSS di Suckerfish, ma l’operazione non è difficile perchè il CSS originale per la versione 3.0 è quasi identico a quello della versione 2.x.
    Fammi sapere come procedi con l’hosting!

  25. Dave on September 3rd, 2008

    Ciao Andrea, è inutile farti i complimenti tanto sai che ti seguo e uso le tue utilità per i miei siti.
    Volevo solo dirti, ma magari già lo sai, che ho usato la versione 2.3 del tuo plugin menubar con WP 2.5.1 e mi ha dato dei problemi, nel senso che non riuscivo ad accedere ai sotto menu di suckerfish, quando passavo sulla voce mi si apriva il sotto menu ma poi non riuscivo a cliccare niente perchè spariva.
    Ho risolto tutto utilizzando la beta6 di menubar 3!
    Continua così perchè fai dei lavori davvero ottimi.

  26. atletico on December 10th, 2008

    Ciao,
    ti premetto che non sono un esperto della materia.
    Ho installato il tuo plugin con il template Suckerfish. Va tutto bene, solo ho un problema: il menu dovrebbe scorrere verso l’alto. Come posso fare?

    Grazie

  27. andrea on December 11th, 2008

    Ciao atletico,
    non sono sicuro che si possa fare quello che chiedi, avrò bisogno di qualche giorno per studiare il problema. A presto!

  28. atletico on December 11th, 2008

    grazie per la risposta, spero che tu riesca a risolvermi questo problema.
    grazie ancora.

  29. Luigino on August 15th, 2009

    Ciao Andrea,

    volevo chiederti una cosa: siccome i menu’ a tendina non sono propriamente “accessibili” per la Legge Stanca presumo perche’ da qualche parte sicuramente qualche browser fara’ casino; quindi avevo pensato ad un menù su due righe dove nella seconda riga comparissero gli items di una voce di menu’ della prima riga….come se fossero dei sottomenu’…magari è possibile con uno di questi template?…
    Intanto complimenti per il plugin, e’ molto interessante!

    Grazie!
    Ciao, Luigi

  30. andrea on August 20th, 2009

    Ciao Luigi,

    ci sto lavorando, ma non sono ancora riuscito ad ottenere il risultato voluto. Resta sintonizzato!

  31. Jerry on November 9th, 2009

    Ciao Andrea,
    inserisco un commento a questo tuo utilissimo post poichè il problema che mi capita sui browser riguarda i menù a tendina anche se uso un mio template. Sul mio giornale, il quale link ho indicato sul commento, succede questo:

    Ho fatto impostare i menù a tendina in automatico a wordpress inserendo delle categorie figlie all’interno di macro-categorie per evitare il sovrappopolamento della subnav però capita una cosa strana che non sono riuscito a risolvere neanche lavorando su margin o padding.

    In pratica su firefox funziona benissimo su ie invece funziona tutto tranne l’home-page che in pratica oltre a visualizzarsi tutta spostata a sinistra e fuori sfondo non da la possibilità di visualizzare i menù a tendina.

    Da cosa può dipendere?
    Spero puoi darmi una mano.

    Saluti
    Jerry

  32. andrea on November 10th, 2009

    Ciao Jerry,

    lo spostamento dell’intera pagina e il problema col menu potrebbe essere dovuto a qualche modifica che hai apportato al tema, si dovrebbe ripartire dall’originale e verificare, con una modifica per volta, quale modifica non funziona. Se poi è proprio l’originale che non funziona, meglio segnalarlo all’autore del tema che così potrà rimediare.

    In bocca al lupo per il tuo giornale!

  33. 1835 on January 28th, 2010

    salve andrea

    grazie per menubar!
    ho provato a modificare il css per creare dei menu “dropUP” anzichè dropdown.
    un po’ a tentoni, ma ci sono riuscito.
    guardando il codice però non mi riesco a spiegare le seguenti duplicazioni di dichiarazione per uno stesso elemento:

    .sf-vertical ul ul {
    top: 26px;
    position: absolute;
    left: -999em;
    width: 170px;
    margin: 0;
    padding: 0;
    }

    .sf-vertical ul ul {
    margin: -26px 0 0 170px;
    }

    .sf-vertical li {
    float: left;
    padding: 0;
    height: 26px;
    position: relative;
    }

    .sf-vertical li {
    float: left;
    padding: 0;
    width: 170px;
    }

    mi verrebbe da pensare che si poteva mettere tutto dentro a due sole dichiarazioni, o no?
    magari la spiegazione mi porterà all’illuminazione del css ed entrerò nel nirvana del web…
    cmq grazie e ciao

  34. andrea on January 28th, 2010

    Ciao 1835,

    hai perfettamente ragione, due regole CSS con lo stesso selettore possono essere fuse in una sola.

    Il motivo di quella stranezza è che il CSS per il menu verticale deriva da quello orizzontale con poche modifiche, e una di quelle modifiche ha reso uguali due selettori che nel CSS originale erano diversi.

  35. 1835 on February 3rd, 2010

    ciao andrea
    grazie per la conferma qui su.

    sono alle prese con un problema su IE: se provo ad attribuire a diversi elementi di lista classi diverse, in modo da ottenere comportamenti diversi (es: colori diversi per ogni elemento) pare che la classe .wpmhover ricordi solo l’ultima regola data nel foglio di stile. e addirittura la cosa agisce anche se abbiamo due menù completamente diversi. è come se a .wpmhover non interessasse a quale classe applicarsi…
    può essere?

    mille grazie e ciao

  36. andrea on February 3rd, 2010

    Quando c’è di mezzo IE tutto è possibile :-)

    Comunque per capirci qualcosa ho bisogno di vedere il sito con il problema, se non vuoi mettere l’indirizzo nei commenti puoi inviarmelo per e-mail.

    Ciao!

  37. 1835 on February 4th, 2010

    ciao
    sì anch’io sono un grande fan dei colpi di scena di IE.

    il sito eccolo qua: http://www.rottelocali.it/wordpress/
    non so cosa vedrai nel momento in cui lo visiti, perché ci sto lavorando, comunque il problema qua sopra l’ho aggirato inserendo per ogni un identificatore anziché una classe.

    sempre grazie!

  38. andrea on February 4th, 2010

    Ora che me lo dici mi è tornato in mente che IE gestisce solo una classe per ogni elemento, o qualcosa del genere, e quindi bisogna ricorrere agli id per differenziare gli elementi tra loro.

    Complimenti e in bocca al lupo per il sito!

  39. Paolo on May 28th, 2010

    Ciao, avrei una domanda da porvi per un menu a tendina (uso wordpress da pochissimo, abbiate pietà di me!). Utilizzo come template Azul 1.1, ho creato alcune pagine madri con diverse sottopagine per ognuna di esse (anche a più di due livelli); è possibile creare dei menu a tendina per rendere la navigazione più semplificata? E comeee?

  40. andrea on May 29th, 2010

    Paolo,

    ti suggerisco di seguire le istruzioni contenute in http://www.dontdream.it/come-usare-wp-menubar-30

    Se trovi delle difficoltà, fammi sapere dove ti sei bloccato. Ciao!

Leave a reply