Joomla.it Forum

Joomla! 1.5.x (versione con supporto terminato) => Joomla! 1.5 => I Template di Joomla 1.5.x => : Caluk 31 Oct 2009, 18:50:15

: [RISOLTO]Evidenziare link attivo tramite css
: Caluk 31 Oct 2009, 18:50:15
Ciao raga, sto facendo un mio template (tutto da 0)

Ho creato un'area #nav dove si vede il menu principale (orizzontale).

Adesso sto provando a dare i vari stadi tramite css (hover active, focus,etc)

Funziona tutto a meraviglia, solo che non riesco a fare funzionare lo stato active, infatti quando il link è attivo ha lo stesso colore di quello di default. ecco il css:

:
div.moduletable_main a{
         color:red;
   }

   div.moduletable_main a:active{
         color:green;
   }     

   div.moduletable_main a:focus{
         color:yellow;
   }

: Re:menu principale a:active nn vuole andare
: conti1 31 Oct 2009, 21:54:15
ciao prova a scriverlo in questa maniera

:
div.moduletable_main li:active{
         color:green;
   }     

oppure

:
div.moduletable_main a.active{
         color:green;
   }     
: Re:menu principale a:active nn vuole andare
: Caluk 01 Nov 2009, 00:58:06
ops, eheh avevo letto male la guida e ho travisato la funzione di active. In pratica active "si attiva" quando clicco col mouse

Io invece devo fare che viene evidenziata la pagina attiva. Per esempio, io ho 3 link (home, chi siamo, contatti), voglio ke se sono in contatti, il link contatti rimanga evidenziato in modo da far capire all'user ke si trova li.

Ho spulciato un po' nel web e ho trovato delle guide. In pratica ho proceduto nella maniera seguente:

sn andato nel componente "menu principale" e al posto di metterlo in "menu orizzonale" l'ho rimesso in lista. Poi nel css, ho scritto questo:

:
#nav li {
   float:left;
   list-style:none;
   padding:0px;

   }
/*float:left inserito per fare il menu orizzontale e non verticale e list-style per togliere il punto (tipico delle liste)
 
   #nav li a {
   color:#FFFFFF;
   font-weight:bold;
   display:block;
   width:100px;
   height:20px;
   text-align:center;
   padding:0px;
   margin:0px;
   text-decoration:none;
   background:#3e3fa9;
   }
   
   #nav li a:hover {
   color:#ffffff;
   display:block;
   width:100px;
   height:20px;
   background:url(../images/bg_main_hover.png);
   text-align:center;
   text-decoration:none;
   }
   
   #nav li a:active {
   color:#ffffff;
   display:block;
   width:100px;
   height:20px;
   background:yellow;
   text-align:center;
   text-decoration:none;
   }
   

Adesso ho il mio bel menu orizzontale (ho fatto un altro procedimento x avere lo stesso risultato, lo so :D )

Potreste spiegarmi come faccio ad evidenziare il link della pagina ke sto visualizzando?

Ho trovato il modo di farlo tramite css, ma su joomla nn so come farlo andare ;(

Grazie infinite per l'aiuto ;)
: Re:menu principale a:active nn vuole andare
: conti1 01 Nov 2009, 12:27:11
ciao
se messo quel css che hai postato e come dici  funziona
cambia il colore di questa parte
:
#nav li a:active {
      color:#ffffff;<<<<<<<qui
      display:block;
      width:100px;
      height:20px;
      background:yellow;
      text-align:center;
      text-decoration:none;
   }
   

se usi firebub guarda un  qualunque menu e vedi come e fatto il css
: Re:menu principale a:active nn vuole andare
: Caluk 01 Nov 2009, 14:15:30
bhè, il tema lo sto facendo io da 0. nn ho usato un tema prefatto :D

cambiando dove dici tu il colore funziona, ma solo quando clicco (e infatti è corretto)

cmq per quanto riguarda l'active, come ho scritto sopra, credevo servisse ad evidenziare la pagina corrente, invece si attiva solamente quando tengo il pulsante del mouse cliccato.

Io vorrei cercare di evidenziare la pagina corrente. Anzi adesso cambio il titolo del topic perchè così è errato.
: Re:Evidenziare link attivo tramite css
: Caluk 01 Nov 2009, 14:23:16
grandioso :D ho risolto :D

Per fare quello che voglio io si fa in questo modo:

:
#nav li.active a {
   color:#0F9;
   text-decoration:none;
   
   }

Infatti devo assegnare il colore alla classe .active (ke a quanto ho capito corrisponde al link attivo) Adesso funziona che è una meraviglia XD
: Re:[RISOLTO]Evidenziare link attivo tramite css
: mandrux 05 Feb 2010, 18:38:13
Grazie della soluzione, mi aveva fatto impazzire!!
: Re:Evidenziare link attivo tramite css
: LukeDesigner 26 Sep 2011, 00:11:10
grandioso :D ho risolto :D

Per fare quello che voglio io si fa in questo modo:

:
#nav li.active a {
      color:#0F9;
      text-decoration:none;
     
   }

Infatti devo assegnare il colore alla classe .active (ke a quanto ho capito corrisponde al link attivo) Adesso funziona che è una meraviglia XD

stavo impazzendo anche io. veramente grazie.

fortunatamente non è servito nessuno script come molti suggerivano.

Di nuovo grazie.
: Re:[RISOLTO]Evidenziare link attivo tramite css
: GoldenGreenHouse 27 Jan 2012, 11:19:26
Salve ragazzi.
Quello che avete scritto funziona solo nei menu' principali, perché Joomla mette automaticamente la classe active al pulsante selezionato.
A me servirebbe lo stesso effetto in un menu' non principale. Idee?