Sezione menù in evidenza

**Mitico** · 28-04-2005, 12:18

http://www.alistapart.com/

Stavo provando a riprodurre questo layout. Ho scaricato anche il css.
Se clikkate nel menù di navigazione in alto una delle voci(articles, about ala ecc), passete in una nuova pagina e il "tasto" appena clikkato assumerà un colore rosso, proprio ad evidenziare dove ci si trova.

Non riesco però in locale a riprodurre tale effetto.
In cosa consiste? Come si ottiene?

Grazie mille, ciao.

**pierofix** · 28-04-2005, 12:22

Basta applicare un id o una class (decidi tu come è meglio) al link corrente, e stilosarlo semplicemente tramite css.

Più facile di così...

**Mitico** · 28-04-2005, 12:31

Quello che non capisco(essendo neofita) è che salvando quella pagina sul pc(con relativo css), l'effetto non si ottiene. Com'è?

**Mitico** · 28-04-2005, 13:43

Cioè non capisco questo. Il codice del menù di navigazione dell'home page è il seguente:

<div id="menu"><ul><li id="one">up front<li id="two">articles<li id="three">about ala<li id="four">live events<li id="five">xml feeds[/list]</div>

E in questo caso la casella corrispondente a <li id="one"> risulta rossa.

Vedo poi il codice della seconda pagina, Articles:

<div id="menu"><ul><li id="one">up front<li id="two">articles<li id="three">about ala<li id="four">live events<li id="five">xml feeds[/list]</div>

in questo caso se non sbaglio è <li id="two"> che ci interessa e che rende rosso la casella corrispondente.

Ma io, da profano, non trovo nessuna differenza tra i due codice.

Come funge?

**Arthens** · 28-04-2005, 14:12

#menu a:active {

background: #c60;

color: #fff;

}

**Mitico** · 28-04-2005, 15:11

Originariamente inviato da Arthens
#menu a:active {

background: #c60;

color: #fff;

}

Perfetto. Ho capito il perchè.

Però Mettiamo che io credo due pagine identiche come codice xhtml. Dalla home metto il link per andare alla seconda...perchè quando vado sulla seconda il backgorund del menù non cambia e diventa #c60?
So imbranato.

**jesus** · 28-04-2005, 15:36

La risposta si trova nel tag body. Infatti ogni pagina a un id diverso sul tag body (o almeno ogni sezione) tale da permettere la personalizzazione dei menu senza toccare l'xhtml.

Esempio:

codice:

<body id="section-one">
  <ul id="menu">
    <li id="one"><a hfre="#">One</a>
    <li id="two"><a hfre="#">Two</a>[/list]
</body>


<body id="section-two">
  <ul id="menu">
    <li id="one"><a hfre="#">One</a>
    <li id="two"><a hfre="#">Two</a>[/list]
</body>

/* CSS */

body#section-one ul#menu li#one {
  background-color: red;
}
body#section-one ul#menu li#two {
  background-color: white;
}


body#section-two ul#menu li#one {
  background-color: white;
}
body#section-two ul#menu li#two {
  background-color: two;
}

**Mitico** · 28-04-2005, 16:08

Tutto chiaro, ti ringrazio.

Discussione: Sezione menù in evidenza

Strumenti discussione

Ricerca discussione

Visualizza

Sezione menù in evidenza

Permessi di invio