menu selezionato

[stiffa]

Ciao.

So che ne avete gia parlato. ma ho difficolta a trovare qualcosa di semplice che possa applicare al caso mio.

vorrei avere un menu verticale che evidenzi il link che abbiamo cliccato. ossia la voce del menu della pagina corrente.

Il tutto sarebbe bello poterlo mettere in un template .dwt (ho qualche problema a farlo in php, trasformando il modello dwt in dwt.php ...quando aggiorna le altre pagine da errore...).

link , thread ...accetto tutto...materiale da legg...etc.... qualcosa pero' di semplice e chiaro.
ciao e grazie

[Xinod]

il concetto di per se' e' abbastanza semplice
per sommi capi

window.onload=function(){
  // tutti i link del tuo menu'
  var lnks=document.getElementById('idTuoMenu').getElementsByTagName('a');
  // indirizzo del documento
  var loc=self.location.href;
  // ciclo per tutti i link
  for(var k=0,l=lnks.length;k<l;++k){
     // se l' href di quel link e' contenuto nell' indirizzo
     if(loc.indexOf(lnks[k].href)>-1){
       // assegno la classe al link
       lnks[k].className='classeLinkPaginaCorrente';
       // ed esco dal ciclo
       break;
     }
  }
}

dove classeLinkPaginaCorrente e' la classe css dove definisci l' aspetto visivo del link che punta al documento al momento visualizzato

[stiffa]

grazzzie per la risposta chiara e funzionante.

unico problema... come dici tu riesco a dare alle voci di menu uno stile solo al testo...parlo di dimensioni....ma quando dico che la mia classe "selezionato" deve avere un altro background ...non va. ... non gli arriva.

ecco il mio codice del menu :

     <div id="ddblueblockmenu">
        <div class="menutitle">Home</div>
        <ul>[*][url="../prodotti.php"]I Prodotti[/url][*][url="../azienda.php"]L'Azienda[/url][*][url="../info.php"]Richiesta Informazioni[/url][*][url="../lavora_con_noi.php"]Lavora con Noi[/url][*][url="../contatti.php"]Contatti[/url][/list]
</div>
</div> 

ed ecco il css :

 
#ddblueblockmenu{
border: 1px solid black;
border-bottom-width: 0;
width: 230px;
overflow:hidden;
}

#ddblueblockmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 15px 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}

#ddblueblockmenu li a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 296px; /*185px minus all left/right paddings and margins*/
text-decoration: none;
color: white;
background-color: #2175bc;
border-bottom: 1px solid #90bade;
border-left: 7px solid #1958b7;
}

* html #ddblueblockmenu li a{ /*IE only */
width: 187px; /*IE 5*/
width: 100%; /*185px minus all left/right paddings and margins*/
}

#ddblueblockmenu li a:hover {
background-color: #2586d7;
border-left-color: #1c64d1;
}

#ddblueblockmenu div.menutitle{
color: white;
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: black;
font: bold 16px 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}



#ddblueblockmenu div.menutitle a{
color: white;
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: black;
font: bold 16px 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
text-decoration:none;
}


.selezionato{
background-color: #2586d7;
border-left-color: #1c64d1;
font-size:24px;
/*   color:red;  */
} 

prob e' una cacchiata ma non capisco proprio dove intoppo

se provi il codice vedrai che il font cambia grandezza ma lo sfondo no.
e nemmeno se metto color:red;

qualche idea?

[Xinod]

non ha piu' niente a che vedere con javascript

le regole css hanno una diversa specificita':
questa
#ddblueblockmenu li a
e' molto piu' specifica di questa
.selezionato
perche' si parla di link in list item nell' elemento con id #ddblueblockmenu
piuttosto che di un elemento generico con classe selezionato

se delle proprieta' vengono sovrascritte la prima vince
per questo dici di vedere cambiare la dimensione del carattere (nella prima non viene specificata)
ma non il colore di sfondo

rendi .selezionato ancora piu' specifica cambiandola in
#ddblueblockmenu li a.selezionato

ciao

[stiffa]

grazie xinod. era proprio quello.

ora funzia tutto.

ciao e graz