menu con cambio colore in base alla pagina

**cronycles** · 09-11-2008, 01:54

Ciao a tutti

ho un problema che non riesco a risolvere da giorni:

ho un menu verticale realizzato con css ed una funzione js che mi itera i vari div a seconda di quanti ne aggiungo. ho quindi ad es 3 sezioni nel mio menu:

chi siamo -> che punta a chi_siamo.html
dove andiamo -> che punta a dove_andiamo.html
cosa facciamo -> che punta a cosa_facciamo.html

nella "home page" lo sfondo di ogni div (chi siamo, dove andiamo, cosa facciamo) è grigio.
Io ora vorrei che lo sfondo di chi siamo diventasse giallo quando sono nella pagina "chi_siamo.html"

come faccio?

sara una cavolata per voi, mi sento un po' handicappato . . .Grazie

bella!

**Gufo** · 09-11-2008, 02:08

Io ti dico la prima cosa che mi viene in mente poi se qualc'uno ha una soluzione migliore meglio.

Es:
prendi lo stesso div nelle 3 sezioni:
1° sezione id="div1-1"
2° sezione id="div1-2"
3° sezione id="dic1-3"

CSS esterno richiamato dalle 3 pagine

codice:

#div1-1 {
	background-color: #CCCCCC;	
}
#div1-2 {
	background-color: #FFFF00;	
}
#div1-3 {
	background-color: #0000FF;	
}

Spero ti vada bene

**cronycles** · 09-11-2008, 03:18

scusa se sembro stupido ma non ho molto capito, semplicemente perchè non ho usato mai la proprieta dei css con i "trattini".

Mettiamo caso che io abbia il seguente codice nella pagina:

codice:

 
<div id="div1"> chi siamo </div>  
<div id="div1"> dove andiamo </div>
<div id="div1"> cosa facciamo </div>

come devono venire i .css per le due pagine? e come devo modificare il codice html per far come dici tu?

css di home.html

codice:

?????

css di chi_siamo.html

codice:

?????

grazie della tua pazienza e scusa ancora la mia ignoranza

**Gufo** · 09-11-2008, 12:36

home.htm

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>

<body>

<h1>Home Page</h1>
<div id="menu">
      <ul>[*]Home[*]Dove andiamo[*]Chi Siamo[*]Cosa Facciamo[/list]
</div>

<div id="home_div1">Inserire qui il contenuto per  id "home_div1"</div>
</body>
</html>

chi_siamo.htm

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>

<body>

<h1>Chi Siamo</h1>
<div id="menu">
      <ul>[*]Home[*]Dove andiamo[*]Chi Siamo[*]Cosa Facciamo[/list]
</div>

<div id="siamo_div1">Inserire qui il contenuto per  id "siamo_div1"</div>
</body>
</html>

cosa_facciamo.htm

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>

<body>

<h1>Cosa Facciamo</h1>
<div id="menu">
      <ul>[*]Home[*]Dove andiamo[*]Chi Siamo[*]Cosa Facciamo[/list]
</div>

<div id="facciamo_div1">Inserire qui il contenuto per  id "facciamo_div1"</div>
</body>
</html>

dove_andiamo.htm

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>

<body>

<h1>Dove Andiamo</h1>
<div id="menu">
      <ul>[*]Home[*]Dove andiamo[*]Chi Siamo[*]Cosa Facciamo[/list]
</div>

<div id="andiamo_div1">Inserire qui il contenuto per  id "andiamo_div1"</div>
</body>
</html>

style.css

codice:

@charset "utf-8";
/* CSS Document */

h1 {
	text-align: center;
	font-weight: bold;
	color: #000000;
}
#home_div1 {
	background-color: #CC6633;
	width: 200px;
	height: 200px;
}
#facciamo_div1 {
	background-color: #00FF00;
	width: 200px;
	height: 200px;
}
#siamo_div1 {
	background-color: #FFFF00;
	width: 200px;
	height: 200px;
}
#andiamo_div1{
	background-color: #00FFFF;
	width: 200px;
	height: 200px;
}
#menu {
	background-color:#FFCCFF;
	color: #000000;
	width: 150px;
	list-style: none;
}
#menu a:link {
	color: #000000;
	text-decoration: none;
}
#menu a:visited {
	text-decoration: none;
	color: #0000FF;
}
#menu a:hover {
	text-decoration: none;
	color: #FF0000;
}
#menu a:active {
	text-decoration: none;
	color: #CC9900;
}

**cronycles** · 09-11-2008, 18:15

sei un grande, grazie mille davvero lo provo subito!

sarai citato nei credits

... uh chissa che onore ma è massimo ringraziamento che posso farti

**cronycles** · 09-11-2008, 19:33

ehm ho visto il codice ma mi sa che mi sono spiegato male e ti ho fatto fare un lavoro inutile, scusa:

per me la tua soluzione è facile da fare, non intendevo quello, intendevo dire che quando sei nella pagina chi_siamo, vorrei che si evidenziasse il colore sotto l'[*] di chi_siamo, come per dire: guarda che di tutte le sezioni tu sei dentro chi_siamo, capito?

scusa se non mi sono spiegato prima

**rikyeko** · 20-04-2011, 08:43

Ciao, per quanto riguarda me sto facendo praticamente la setssa cosa, ma ho risolto il problema in maniera molto snella però lato server con asp in questo modo:

codice:

<%
'Recupero percorso e nome pagina per cambiare colore al link
' il percorso tutto minuscolo
If Request.ServerVariables("SCRIPT_NAME") = ("/percorso/nomepagina.asp") Then
  %>


<font color=red>Home</font></p>
  <%
Else
  %>


<font color=yellow>Home</font></p>
  <%
End If
%>

Io ho creato in menu che includo nelle varie pagine dei contenuti, ed a ogni link-pagina metto questa condizione.

Così funziona, ma non so se ti va bene...

Discussione: menu con cambio colore in base alla pagina

Strumenti discussione

Ricerca discussione

Visualizza

menu con cambio colore in base alla pagina

Permessi di invio