Autore Topic: [RISOLTO] Menù ad immagini con rollover (Letto 12109 volte)

antodesign · « **il:** 13 Mag 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

ariess · « **Risposta #1 il:** 13 Mag 2011, 15:52:22 »

dal mio punto di vista il modo più semplice è quello di farlo dal CSS. basta usare i selettori :hover e :active...senza modulo html

antodesign · « **Risposta #2 il:** 16 Mag 2011, 15:54:29 »

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

ariess · « **Risposta #3 il:** 16 Mag 2011, 17:13:33 »

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

antodesign · « **Risposta #4 il:** 17 Mag 2011, 14:25:06 »

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

ariess · « **Risposta #5 il:** 17 Mag 2011, 20:05:56 »

non ti devi scusare... siamo qui per aiutare ed essere aiutati

anzi scusami te se sono sembrato brusco.

Citazione

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

Codice: [Seleziona]

ul .menu_suffisso li:hover {...........}
ul .menu_suffisso li:active {...........}

se mi posti il link del sito ti faccio un esempio concreto
ciao

antodesign · « **Risposta #6 il:** 01 Giu 2011, 10:56:12 »

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

ariess · « **Risposta #7 il:** 01 Giu 2011, 13:03:20 »

posta il link pls

antodesign · « **Risposta #8 il:** 01 Giu 2011, 14:06:00 »

scusa, mi sono dimenticata di dire che il sito lo sto lavorando in locale quindi non riesco a postare il link.

ariess · « **Risposta #9 il:** 01 Giu 2011, 14:29:43 »

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.

antodesign · « **Risposta #10 il:** 03 Giu 2011, 14:46:39 »

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

ariess · « **Risposta #11 il:** 03 Giu 2011, 21:20:30 »

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{...........}

antodesign · « **Risposta #12 il:** 06 Giu 2011, 08:25:12 »

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

ariess · « **Risposta #13 il:** 06 Giu 2011, 12:30:16 »

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{...........}

antodesign · « **Risposta #14 il:** 06 Giu 2011, 16:06:05 »

Ciao, grazie ancora.
Ho creato le sotto classi ma associando lo stile test al mio menù ancora nonmi funziona nulla.
Ti posto il codice:

Codice: [Seleziona]

#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

ariess · « **Risposta #15 il:** 06 Giu 2011, 16:23:29 »

prova con

#topmenu .menu_prodotti li a.test {

}

antodesign · « **Risposta #16 il:** 07 Giu 2011, 09:34:37 »

Ancora nulla $:-\$
Ho inserito questo codice

Codice: [Seleziona]

#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

ariess · « **Risposta #17 il:** 07 Giu 2011, 13:08:42 »

Codice: [Seleziona]

#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);
}

antodesign · « **Risposta #18 il:** 07 Giu 2011, 13:51:08 »

Grazie però ancora nulla, proprio lo stato active non me lo piglia $:-\$

ariess · « **Risposta #19 il:** 07 Giu 2011, 16:08:43 »

prenditi uno spazio hosting gratuito e metti online il sito, altrimenti non ne usciamo.