Joomla.it Forum
Joomla! 2.5 (versione con supporto terminato) => Joomla! 1.6/1.7/2.5 => I Template di Joomla 1.6/1.7/2.5 => : antodesign 13 May 2011, 15:47:01
-
Ciao.
Ho un problema con un menù di joomla (1.6).
Vorrei creare un menu fatto ad immagini e ho scoperto che esiste all'interno della voce del menu stesso, una voce "opzioni tipo link" che da la possibilità di associare un'immagine alla voce di menu.
Il problema è che vorrei che queste immagini avessero un rollover e uno stato diverso quando si è dentro alla pagina del menù selezionato.
Esiste una funzione che mi premette di automatizzare tutto? oppure devo fare un modulo html personalizzato per il menu e inserire i vari comportamenti col css?
Grazie in anticipo.
Antonella
-
dal mio punto di vista il modo più semplice è quello di farlo dal CSS. basta usare i selettori :hover e :active...senza modulo html
-
mmmm, scusa ma allora non ho capito, come inserisco i pulsanti se non in un modulo html?
e come posso dirgli di mostrarmi l'immagine che dico io quando è dentro alla pagina cliccata?
Quindi non solo uno stato rollover ma anche uno stato premuto.
Spero di essermi spiegata.
Grazie
Antonella
-
lascia perdere il modulo html, per fare i menu ci sono i moduli appositi.
per impostare il rollover e la voce attiva basta usare le pseudo classi ":hover" e ":active" dei css.
http://www.w3schools.com/css/sel_hover.asp
http://www.w3schools.com/Css/sel_active.asp
oppure usi un modulo di questi
http://extensions.joomla.org/extensions/structure-a-navigation/menu-systems/image-menus
-
Grazie e scusami se sono pesante ma ancora non capisco bene.
Ho capito come realizzare lo stato delle immagini (link, hover, active) ma non capisco dove devo applicare lo stile.
Devo creare il menù nella gestione menù e poi ad ogni voce associare un css con i vari stadi oppure devo muovermi in un altro modo? per esempio creare un nuovo DIV dentro al template index.php?
Oppure come?
Spero di essermi spiegata.
Scusami davvero ma è la prima volta che mi capita un'esigenza simile.
Grazie ancora.
Antonella
-
non ti devi scusare... siamo qui per aiutare ed essere aiutati :)
anzi scusami te se sono sembrato brusco.
Devo creare il menù nella gestione menù e poi ad ogni voce associare un css con i vari stadi oppure devo muovermi in un altro modo? per esempio creare un nuovo DIV dentro al template index.php?
hai già tutto. devi solo aggiungere delle classi CSS nel fogliio di stile.
metti un suffisso CSS al menu, in modo da diversificarlo da tutti gli altri, poi scrivi una cosa del genere
ul .menu_suffisso li:hover {...........}
ul .menu_suffisso li:active {...........}
se mi posti il link del sito ti faccio un esempio concreto
ciao
-
Ciao, grazie per la gentilezza, non sei stato per nulla brusco.
Sono riuscita a creare uno stile apposito per ogni voce di menu e mi funziona il rollover! unica cosa è che non va lo stile "acrive" ovvero quando clicco sul pulsante per un attimo mi appare l'immagine che ho scelto per questo stato ma quando poi rilascio il mouse mi viene tolta.
Grazie ancora
Antonella
-
posta il link pls
-
scusa, mi sono dimenticata di dire che il sito lo sto lavorando in locale quindi non riesco a postare il link.
-
prova a controllare se la voce attiva prende un id o una classe particolare (di solito #current o .active) e semmai usali per definire una nuova regola.
-
Ciao, non mi torna ancora :(
Credo di avere fatto in modo di verso rispetto a quello che mi dici tu, io praticamente ho fatto un nuovo foglio di stile:
.home {
width:54px;
height:29px;
background: url(../images/menu/pulsanti_03.png) ;
}
.home:visited {
background: url(../images/menu/pulsantih_03.png) ;
width:54px;
height:29px;
}
.home:hover {
background: url(../images/menu/pulsantih_03.png) ;
width:54px;
height:29px;
}
.home:active {
background: url(../images/menu/pulsantih_03.png) ;
}
e poi, nel pannello di amministrazione, nella finestra che si apre quando clicchi sulla voce del menu ho scritto home nella voce stile link css.
questo perchè poi voglio che ogni voce di menu abbia un colore diverso rispetto agli altri quando ci vai sopra ed entri nella pagina, non è giusta così la procedura?
Ancora grazie!
Antonella
-
no non ci siamo....
quell'"_home" che inserisci nel suffisso del modulo non è così che si usa.
il suffisso va a finire come suffisso appunto, di una classe già presente nel template, che potrebbe essere .moduletable
quindi diventerebbe
.moduletable_home {...........}
per cui per l'active e hover diventerebbe qualcosa di simile
.moduletable_home li a:hover{...........}
.moduletable_home li a:active{...........}
-
Ciao, grazie della risposta.
Sono riuscita a fare quello che dici tu e lo stile funziona, ho applicato al modulo questo nuovo suffisso ed è ok, il problema è che io ho varie voci di menu dentro a quel menu/modulo e ad ognuna volevo assegnare una immagine rollover/active diversa, facendo così invece, essendo lo stile unico mi mette la stessa immagien di sfondo in tutte le voci di menu.
Grazie
Ciao
Antonella
-
in questo caso devi analizzare le voci di menu con firebug. ognuna dovrebbe avere una classe o id univoco che puoi usare per differenziare le immagini
per esempio
.moduletable_home li.item2 a:hover{...........}
.moduletable_home li.item2 a:active{...........}
-
Ciao, grazie ancora.
Ho creato le sotto classi ma associando lo stile test al mio menù ancora nonmi funziona nulla.
Ti posto il codice:
#topmenu .menu_prodotti {
background-image: url(../images/menu/pulsanti_04.png);
list-style: none;
font-weight: normal;
font-size: 14px;
padding: 0;
margin: 0;
}
#topmenu .menu_prodotti li a {
background-image: url(../images/menu/pulsanti_04.png);
display: block;
text-decoration: none;
padding: 0;
}
#topmenu .menu_prodotti li {
background-image: url(../images/menu/pulsanti_04.png);
float: left;
padding: 0;
}
#topmenu .menu_prodotti li.active a {
background-image: url(../images/menu/pulsantih_04.png);
}
#topmenu .menu_prodotti li a:hover {
background-image: url(../images/menu/pulsantih_04.png);
}
#topmenu .menu_prodotti li.test a:active {
background-image: url(../images/menu/pulsantih_02.png);
}
#topmenu .menu_prodotti li.test a:hover {
background-image: url(../images/menu/pulsantih_02.png);
}
Ho messo poi, all'interno ad una voce di un menu (per esempio home) nel campo "stile Link CSS" il valore "test".
Cosa sbaglio?
Grazie mille.
Antonella
-
prova con
#topmenu .menu_prodotti li a.test {
}
-
Ancora nulla :-\
Ho inserito questo codice
#topmenu .menu_prodotti li a.chisiamo {
background-image: url(../images/menu/pulsanti_04.png);
height:29px;
}
#topmenu .menu_prodotti li a.chisiamo:hover,active {
background-image: url(../images/menu/pulsantih_04.png);
}
e il rollover funziona correttamente ma non tiene lo stato active.
Grazie
Antonella
-
#topmenu .menu_prodotti li a.chisiamo {
background-image: url(../images/menu/pulsanti_04.png);
height:29px;
}
#topmenu .menu_prodotti li a.chisiamo:hover,
#topmenu .menu_prodotti li a.chisiamo:active {
background-image: url(../images/menu/pulsantih_04.png);
}
-
Grazie però ancora nulla, proprio lo stato active non me lo piglia :-\
-
prenditi uno spazio hosting gratuito e metti online il sito, altrimenti non ne usciamo.
-
Ciao, faccio un ultimo tentativo caricando due immagini con el schermate dell'amministrazione.
Mi sorge il dubbio che non metto nel giusto posto il link al css.
Come prima cosa questa è la schermata di come ho applicato lo stile al modulo
(http://www.albergopallone.it/cancellare/2.jpg)
E qui come ho applicato lo stile personalizzato ad ogni singola voce di menu.
Mi viene il dubbio che sbaglio ad applcare quest'ultima anche perchè nella singola voce di menù mi appare poi anche il titolo del pulsante in maniera testuale (vedi altra img sotto) e io avendolo ad immagine lo vorrei togliere ma da questa finestra non ne sono ingrado.
(http://www.albergopallone.it/cancellare/1.jpg)
(http://www.albergopallone.it/cancellare/3.jpg)
Grazie ancora per la super pazienza!
Antonella
-
allora... proviamo così:
per ogni voce di menu metti in "stile link css" una parola diversa
ad esempio per home scrivi "stile_home"
e nel css
questo per le voci attive
ul.menu li.active a.stile_home:link, ul.menu li.active a.stile_home:visited{
color:red;
}
questo per le voci non attive
ul.menu li a.stile_home:link, ul.menu li a.stile_home:visited{
color:green;
}
...e così via per ogni voce di menu
-
Ci sono finalmente riuscita!
Sono riuscita col 1° metodo mettendo però questo codice css:
#topmenu .menu_prodotti li a.home {
background-image: url(../images/menu/pulsanti_03.png);
height:29px;
width:54px;
}
#topmenu .menu_prodotti li a.home:hover,
#topmenu .menu_prodotti li.active a.home {
background-image: url(../images/menu/pulsantih_03.png);
width:54px;
Ti ringrazio di cuore per tutto l'aiuto che mi hai dato e spero di poter ricambiare in caso tu ne abbia bisogno.
Sei stato davvero gentientile!
Antonella
-
Ciao! Sono nuovo del Forum!
Ho letto i vostri post e ho risolto anche io il problema :)
Volevo però chiedere:
- mi si visualizza l'immagine di sfondo (background-image) e quella dell'hover, ma rimane il link visibile (classica scritta blu sottolineata) e il puntino di elenco (classico dei menu joomla).
...come faccio al eliminarli e visualizzare solo lo sfondo?!?
Almeno il puntino :)
-
benvenuto GoldenGreenHouse,
metti il link del tuo sito così ti diciamo cosa e dove modificare.