Back to top

Autore Topic: [RISOLTO]Evidenziare link attivo tramite css  (Letto 20180 volte)

Offline Caluk

  • Nuovo arrivato
  • *
  • Post: 30
    • Mostra profilo
[RISOLTO]Evidenziare link attivo tramite css
« il: 31 Ott 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:

Codice: [Seleziona]
div.moduletable_main a{
         color:red;
   }

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

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

« Ultima modifica: 01 Nov 2009, 14:23:39 da Caluk »
Caluk.iT WebDesign & Multimedia @ Tutorial - WebDesign - Video Editing - CMS

Offline conti1

  • Global Moderator
  • Instancabile
  • *****
  • Post: 9075
  • Sesso: Maschio
    • Mostra profilo
Re:menu principale a:active nn vuole andare
« Risposta #1 il: 31 Ott 2009, 21:54:15 »
ciao prova a scriverlo in questa maniera

Codice: [Seleziona]
div.moduletable_main li:active{
         color:green;
   }     

oppure

Codice: [Seleziona]
div.moduletable_main a.active{
         color:green;
   }     
« Ultima modifica: 31 Ott 2009, 21:58:03 da conti1 »
se possibile postare il link  x risolvere al meglio il problema grazie
evitare nomi commerciali grazie

Offline Caluk

  • Nuovo arrivato
  • *
  • Post: 30
    • Mostra profilo
Re:menu principale a:active nn vuole andare
« Risposta #2 il: 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:

Codice: [Seleziona]
#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 ;)
« Ultima modifica: 01 Nov 2009, 04:46:00 da Caluk »
Caluk.iT WebDesign & Multimedia @ Tutorial - WebDesign - Video Editing - CMS

Offline conti1

  • Global Moderator
  • Instancabile
  • *****
  • Post: 9075
  • Sesso: Maschio
    • Mostra profilo
Re:menu principale a:active nn vuole andare
« Risposta #3 il: 01 Nov 2009, 12:27:11 »
ciao
se messo quel css che hai postato e come dici  funziona
cambia il colore di questa parte
Codice: [Seleziona]
#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
se possibile postare il link  x risolvere al meglio il problema grazie
evitare nomi commerciali grazie

Offline Caluk

  • Nuovo arrivato
  • *
  • Post: 30
    • Mostra profilo
Re:menu principale a:active nn vuole andare
« Risposta #4 il: 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.
Caluk.iT WebDesign & Multimedia @ Tutorial - WebDesign - Video Editing - CMS

Offline Caluk

  • Nuovo arrivato
  • *
  • Post: 30
    • Mostra profilo
Re:Evidenziare link attivo tramite css
« Risposta #5 il: 01 Nov 2009, 14:23:16 »
grandioso :D ho risolto :D

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

Codice: [Seleziona]
#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
Caluk.iT WebDesign & Multimedia @ Tutorial - WebDesign - Video Editing - CMS

mandrux

  • Visitatore
Re:[RISOLTO]Evidenziare link attivo tramite css
« Risposta #6 il: 05 Feb 2010, 18:38:13 »
Grazie della soluzione, mi aveva fatto impazzire!!

Offline LukeDesigner

  • Nuovo arrivato
  • *
  • Post: 11
    • Mostra profilo
Re:Evidenziare link attivo tramite css
« Risposta #7 il: 26 Set 2011, 00:11:10 »
grandioso :D ho risolto :D

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

Codice: [Seleziona]
#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.

Offline GoldenGreenHouse

  • Nuovo arrivato
  • *
  • Post: 3
    • Mostra profilo
Re:[RISOLTO]Evidenziare link attivo tramite css
« Risposta #8 il: 27 Gen 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?

 



Web Design Bolzano Kreatif