Come inserire icone nei menù

[tonicopi]

Ho scritto un piccolo articolo che sia di guida per inserire icone nei menù di Joomla!

Ciò perchè ho visto che viene spesso chiesto aiuto nel forum.

Magari poi si può anche fare un articolo di approfondimento spiegando come ottenere effetti maggiori dalle immagini, rendendole cliccabili e modificabili con rollover

LINK: http://www.joomla.it/articoli-della-community/877-inserire-immagini-nel-menu.html

[ventus85]

Vai, sono con te!
Buon lavoro!

[giungla]

si ma devi ridimensionarle andando ad intuito! vero? www.unangoloperme.com

[ventus85]

Finalmente l'ho letto!
Bravo! 
Ho visto il link http://www.sizzlesites.com/html/icons2.html, potresti specificare che quelle sono icone per il cibo ma nelle altre pagine ci sono altre per contesti diversi. A parte che hai sottolineato che se ne trovavo tantissime.
In teoria basterebbe addirittura usare la ricerca di Google per le immagini di dimensione piccola.

[tonicopi]

si ma devi ridimensionarle andando ad intuito! vero? www.unangoloperme.com

Perchè a intuito? Misuri prima di quale dimensione hai bisogno Leggi questo:
http://www.joomla.it/articoli-della-community/797-tre-moschettieri-al-servizio-di-joomla.html

[hoguera]

Ciao,
un bel post ed un'ottima guida!
Recentemente ho installato un componente per rendere maggiormente visibile e comprensibile il top menù, mi restava da mettere mano al menù principale.....
Tanks

[bigham]

Grande tonicopi!
A dimostrazione che l'età è solo un fattore anagrafico e che i neuroni non seguono le leggi di natura

[NightRider]

Bella e utile guida, io invece avrei bisogno di un passo successivo a questo...

Vorrei che l'icona comparisse soltanto al passaggio del mouse sopra al link del menù, e che rimanesse solo per la pagina attiva, il tutto senza spostare a destra il testo del menù.

Un po' come succede per il sito www.facebook.com quando si posiziona il mouse sopra la scritta FACEBOOK in alto a sinistra, in quel caso compare una casetta.

Grazie.

[tonicopi]

Ciao NightRider. Il tema da te proposto sarà oggetto di un prossimo articolo. Non è cosa molto difficile. Sembra a te che l'immagine venga aggiunta solo con il mouse over. In realtà è una sola immagine che viene utilizzata come rollover.
L'immagine è questa
http://b.static.ak.fbcdn.net/images/menubar/fb_menubar_logo-ltr.gif e viene chiamata con con questo codice:

Codice: [Seleziona]

#fb_menubar #fb_menubar_logo a span {
background:transparent url(/images/menubar/fb_menubar_logo-ltr.gif) no-repeat scroll 0 0;
display:block;
height:17px;
width:90px;
}il rollover viene ottenuto con questo codice :

Codice: [Seleziona]

#fb_menubar #fb_menubar_logo a:hover span {
background-position:left -17px;
}Per fare restare visibile la casetta anche sulla pagina attiva io aggiungerei questo:

Codice: [Seleziona]

#fb_menubar #fb_menubar_logo a:active span {
background-position:left -17px;
}

[NightRider]

Grazie tante!

Posso farti un appunto? Credo che a:active non funzioni in Firefox ma solo in Explorer...è possibile fare in modo che funzioni in tutti e 2 i browser?

Bisogna creare un file css apposta?

Grazie ancora!

[hoguera]

Ciao tonicopi,
ho seguito le tue indicazioni ma senza ottenere i risultati sperati, se dal modulo menù principale spunto :immagini menù=si, la home appare completamente incasinata, mi appaiono le immagini sparse per la pagina, sono le immagini presenti nelle categorie,sezioni e articoli collegate/i al menù. La prima immagine l'ho assegnata da menù principale a home, la dimensione è 32x32 file.png.
Sapresti dirmi cosa ho mancato?
Grazie

[tonicopi]

Ciao tonicopi,
ho seguito le tue indicazioni ma senza ottenere i risultati sperati, se dal modulo menù principale spunto :immagini menù=si, la home appare completamente incasinata, mi appaiono le immagini sparse per la pagina, sono le immagini presenti nelle categorie,sezioni e articoli collegate/i al menù. La prima immagine l'ho assegnata da menù principale a home, la dimensione è 32x32 file.png.
Sapresti dirmi cosa ho mancato?
Grazie

E' davvero strano. Sai usando lo stesso template del mio articolo? Se è così credo che l'unica spiegazione stia nel fatto che sono state assegnate immagini troppo grandi a tutte le voci del mainmenù - Prova a controllare.
OT: bello il menù che hai nella posizione patway. Dove si trova?

[Pixel_73]

Tonicopi, finalmente ho messo mano all'articolo seguendo le tue istruzioni. Mi è stato davvero utile. Adesso il menù ha finalmemte una caratterizzazione! Grazie per il tuo articolo...davvero ben fatto e direi molto chiaro.
L'unico incoveniente delle icone è che si rallenta un pò lo scorrimento del template...forse si è appesantito troppo?
Secondo te c'è un modo per alleggerire il tutto lasciando le icone così come sonoP
Se hai cinque minuti prova a entrare nel mio sito, così valuti la cosa direttamente. Ovvio senza impegno...

[elenix]

Tonicopi,
l'articolo è bellissimo e brillante (come sempre) ma provando a seguire le tue istruzioni sono incappata in un problemino, anzi, due:
1) se metto lista legacy (verticale) l'immagine non è più linkata al contenuto (come invece accade di default con il settaggio lista)
2)come faccio a fare sparire la scritta del menù (per utilizzare quindi solo l'immagine)?


aggiungo questa che però riguarda solo me:
3) non mi funziona con il template universatil ((

[tonicopi]

@Pixel_73 scusa il ritardo nella risposta. Mi era scappato il tuo intervento. Direi che quelle piccole icone non rallentano nulla 

@elenix ci si potrebbe lavorare attorno un pochino ma lo scopo di questo articolo era di inserire piccole icone nel menù e non di fare un menù ad immagini per il quale è meglio utilizzare questo moduloMa vai nel forum e scaricati la versione migliorata. Scriverò presto la recensione di questo splendido moduletto

[lakeman]

estremamente utile - grazie !

[RenRic]

Mi sto affacciando solo adesso a questo magnifico mondo di joomla e reputo la vs. partecipazione assolutamente eccezionale.
Ho provato ad inserire una icona aa una voce del Menu Principale; tutto ok tranne per la cornice che non riesco a togliere all'icona.
Ho aperto il file template.css nella cartella template/cafepapagei/css ( il tempalte che sto adoperando per fare delle prove) ed ho sostituito alla riga "border:0;" con "border:none;", ma purtroppo la cornice non scompare.
Un'ultima cosa; le cornici delle immagini son, per me, una persecuzione amche con l'editor testi "joomla FCK". Ma come faccio a far scomparire queste cornici.
Saluti e Grazie
RR

[tonicopi]

Ciao RenRic e benvenuto nel forum 
Per togliere le cornici alle immagini nell'articolo è scritto:
Può anche accadere, non è il caso del rhuk_milkyway, che le immagini abbiano una antipatica cornice (su explorer addirittura blu) che non c'azzecca coi colori del template. Quella la puoi togliere  con un piccolissimo intervento aggiungendo questo codice nel file css del template:
a img {
    border:none;}
Ora tu hai scritto questa regola nel tuo css?
Puoi mettere un link al sito?
 

[matala]

@tonicopi
Grazie per la utile guida, ma avrei una domanda:
le immagini vengono inserite correttamente, ma ho notato che non sono cliccabili, il link è presente solo sul testo.
È possibile cambiare questo comportamento senza installare alcun componente aggiuntivo?
Grazie

[tonicopi]

Ciao matala e scusa per il ritardo ma sono stato in vacanza per una settimana. Dovresti settare su si la voce Link immagini menu su Altri parametrinel modulo del menù dove hai inserito le immagini. Ma a me in una prova veloce non funziona nel template Rhuk_Milkyway.
In ogni caso puoi utilizzare il modulo imagemenù per utilizzare immagini cliccabili:
http://www.joomla.it/articoli-della-community/931-menu-con-immagini-rollover.html