menu orizzontale e li.selected.

**erbalibera1000** · 24-07-2010, 12:14

Salve a tutti, so che l'argomento e' trito e ritrito ma sono alle prime armi con i css e anche con il notevole aiuto del forum non riesco a venirne fuori. Ho un menu orizzontale composto da 4 sezioni differenti. Vorrei che cliccando su una di esse il colore del testo o dello sfondo cambiasse.

vi allego il codice html:

codice:

<div id=top-menu> <ul> [*]
    Home
   [*]
    Presentation
   [/list]
</div>

e il css:

codice:

#top-menu
{          
  width:100%;     
  height: 36px; 
}  

#top-menu ul {    
  list-style: none;      
  background: transparent;     
  padding: 0;     margin: 0; }  

top-menu li {    
  border-right: 1px solid #DBDBDB;     
  float: left;    
  line-height: 36px; 
}  

#top-menu li a {     
  color: #B1B1B1;     
  font-weight:bold;     
  padding:0 2em;     
  text-decoration:none;     
  text-transform:uppercase;     
  line-height: 36px; 
}  

#top-menu li.selected a, 
#top-menu li.selected a:visited,
#top-menu li.selected a:hover 
{   
  color: #C00000; 
}

qualcuno mi potrebbe aiutare? Grazie

**emnlmn** · 24-07-2010, 14:32

codice:

#top-menu
{          
  width:100%;     
  height: 36px; 
}  

#top-menu ul {    
  list-style: none;      
  background: transparent;     
  padding: 0;     margin: 0; }  

top-menu li {    
  border-right: 1px solid #DBDBDB;     
  float: left;    
  line-height: 36px; 
}  

#top-menu li a {     
  color: #B1B1B1;     
  font-weight:bold;     
  padding:0 2em;     
  text-decoration:none;     
  text-transform:uppercase;     
  line-height: 36px; 
}  

#top-menu li a:hover 
{   
  color: #C00000; 
}

Codice PHP:


<body>

  <div id=top-menu>

    <ul> [*][url="/catalogs/index"]Home[/url] [*][url="/catalogs/presentation"]Presentation[/url] [/list]

  </div>

</body>

Intendi così?

**erbalibera1000** · 24-07-2010, 14:40

no. Con a:hover il link cambia colore appena ci si passa sopra con il mouse. Io voglio che una volta cliccato il cambiamento rimanga permanente, ovvero tutti grigi tranne la pagina corrente ( rossa ). Forse non si riesce a fare solo con css e html?

**emnlmn** · 24-07-2010, 14:46

Ok, ok.
Semplicemente usa il codice che hai postato tu, ma togli le classi che hai associato agli elementi "a" e impostala solamente per l'elementi li relativo alla pagine in cui ti trovi.
Avrai quindi per ogni pagina la classe "selected" associata di volta in volta ad un li differente.

**erbalibera1000** · 24-07-2010, 14:59

scusa non ho capito bene. Devo spostare il class selected dai tag <a> a quelli[*]?
grazie mille per l'aiuto.

**emnlmn** · 24-07-2010, 15:01

si, esatto.
Ma non devi associare la classe selected a tutti gli li, ma solamente a quello che vuoi evidenziare.

**erbalibera1000** · 24-07-2010, 15:38

scusa ma non mi e' chiaro in che modo, di volta in volta posso spatare la class "selected" in un li diverso.
Il menu lo genero in php. Volendo con delle clausole if else, si puo' realizzare, ma non e' bello da vedere..
Grazie mille

**erbalibera1000** · 24-07-2010, 22:09

risolto lato server con php. una giornata persa

Discussione: menu orizzontale e li.selected.

Strumenti discussione

Ricerca discussione

Visualizza

menu orizzontale e li.selected.

Permessi di invio