Joomla.it Forum

Joomla! 1.5.x (versione con supporto terminato) => Joomla! 1.5 => I Template di Joomla 1.5.x => : donato.chpp 06 May 2010, 16:09:49

: menu immagini
: donato.chpp 06 May 2010, 16:09:49
ciao a tutti, sto creando un mio template, con un menu di navigazione fatto di immagini in posizione top. Finora tutto ok, sono riuscito a mettere le immagini, e creare l'effetto hover tramite i css 'itemid'. Il mio problema è che quando creo il menu, la parte cliccabile è solo quella del link, ad esempio solo la scritta home, invece io vorrei rendere cliccabile tutta l'immagine della cella e magari senza la scritta del link, ad esempio omettere la scritta home. Spero di essermi fatto capire  :P, grazie!!!!!
: Re:menu immagini
: tonicopi 06 May 2010, 16:39:46
Vedi se ti può essere utile questo articolo:
http://www.joomla.it/articoli-della-community/931-menu-con-immagini-rollover.html
 ;)
: Re:menu immagini
: donato.chpp 06 May 2010, 17:03:33
ciao tonicopi, grazie mille per la dritta, però già avevo fatto delle ricerche ed ho provato il modulo, che è molto interessante, però nella versione php 5.3 c'è la funzione ereg() che è deprecata, e quindi il modulo non funziona. Quindi me lo sto creando io con l'aiuto dei css, però non so come dare il link all'intera cella. Una volta fatto questo potremmo dare un'occhiata all'imageMenu, magari cercando di usare un'altra funzione non deprecata, perchè il modulo è davvero molto semplice e utile. Grazie per la risposta, sempre molto gentile  ;)
: Re:menu immagini
: tonicopi 06 May 2010, 18:59:23
Così dovrebbe funzionare:
:
.................................
<style type="text/css">
<!--
.testo {
display: block;
width: 100%;
}
a.testo:link {}
a.testo:hover {
display: block;
color: #FF0000;
width: 100%;
background-color: #00FF00;
}
a.testo:visited {}
-->
</style>

..................................

<table width="230" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="230">
<div align="center"><a href="#" class="testo">andrea</a></div></td>
</tr>
<tr>
<td width="230">
<div align="center"><a href="#" class="testo">enrico</a></div></td>
</tr>
</table>

Se usi la % nello stile DEVI DIMENSIONARE LA CELLA, altrimenti invece che usare la % puoi definire nello stile i pixel della cella.
: Re:menu immagini
: donato.chpp 07 May 2010, 12:43:05
ciao tonicopi, grazie per la risposta, ma in questo modo il menu non è dinamico, no?
io ieri ho fatto in queto modo:

#topmenu ul {
   margin:0;
   list-style:none;
   height:70px;
   padding:0 0 0 350px;
}

#topmenu li {
   height:70px;
   width:80px;
   line-height:25px;
   color:#fff;
   font-weight:bold;
   font-size:11px;
   float:left;
   display:block;
   padding:0 1px;
}

e poi sono andato a modificare i singoli item, ad esempio:

.itemxx {
   background-image:url(...);
   background-repeat:no-repeat;
}

.itemxx:hover{
   background-image:url(...);
   background-repeat:no-repeat;
}

tutto solo con i css, e mi funziona, solo che la cella non so come renderla interamente cliccabile ed eliminare il nome del link del menu ad esempio home.
Il modo che mi hai fatto vedere te va bene, pero lo vorrei lavorare solo con i css, come ho fatto, e dare il link a tutta la cella.
Una scelta del tipo:

<a><td>...</td>< / a>
come si farebbe normalmente.

però da css perchè le td non le creo io nell'index del template ma si creano automaticamente ad ogni item del menu, quindi come potrei renderla cliccabile? che modifiche posso apportare?

grazie per la risposta  ;)
: Re:menu immagini
: tonicopi 07 May 2010, 13:18:05
E metterci la solita vecchia gif trasparente? :)
: Re:menu immagini
: donato.chpp 07 May 2010, 13:42:27
una png? da rendere la cella cliccabile? in che modo  ::)
: Re:menu immagini
: donato.chpp 07 May 2010, 15:54:08
risolto aggiungendo:

#topmenu a {
   width:100%;
   height:100%;
   display:block;
}

come si fa ora ad omettere il testo del link???