Scusate, come posso modificare le voci del menù facendo in modo che quando sono su una pagina specifica quella voce sul menù compaia in maniera differente dalle altre. Sul menù (links primari) ho "Home", "Chi siamo", "Contatti" etc. etc. Quando sono su "Chi siamo", ad esempio, vorrei che la voce del menù appaia con la scritta blu su fondo bianco, mentre le altre hanno scritta bianca su fondo blu.
Su style.css la parte relativa al menù è questa, e non riesco a capire come fare:
/* begin Menu */
/* menu structure */
.art-menu a, .art-menu a:link, .art-menu a:visited, .art-menu a:hover
{
text-align:left;
text-decoration:none;
outline:none;
letter-spacing:normal;
word-spacing:normal;
}
.art-menu, .art-menu ul
{
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
display: block;
}
.art-menu li
{
margin: 0;
padding: 0;
border: 0;
display: block;
float: left;
position: relative;
z-index: 5;
background:none;
}
.art-menu li:hover
{
z-index: 10000;
white-space: normal;
}
.art-menu li li
{
float: none;
}
.art-menu ul
{
visibility: hidden;
position: absolute;
z-index: 10;
left: 0;
top: 0;
background:none;
}
.art-menu li:hover>ul
{
visibility: visible;
top: 100%;
}
.art-menu li li:hover>ul
{
top: 0;
left: 100%;
}
.art-menu:after, .art-menu ul:after
{
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
.art-menu, .art-menu ul
{
min-height: 0;
}
.art-menu ul
{
background-image: url(images/spacer.gif);
padding: 10px 30px 30px 30px;
margin: -10px 0 0 -30px;
}
.art-menu ul ul
{
padding: 30px 30px 30px 10px;
margin: -30px 0 0 -10px;
}
/* menu structure */
.art-menu
{
padding: 4px 6px 0px 6px;
}
.art-nav
{
position: relative;
height: 29px;
z-index: 100;
}
.art-nav .l, .art-nav .r
{
position: absolute;
z-index: -1;
top: 0;
height: 29px;
background-image: url('images/nav.png');
}
.art-nav .l
{
left: 0;
right:6px;
}
.art-nav .r
{
right: 0;
width: 890px;
clip: rect(auto, auto, auto, 884px);
}
/* end Menu */
/* begin MenuItem */
.art-menu ul li
{
clear: both;
}
.art-menu a
{
position:relative;
display: block;
overflow:hidden;
height: 25px;
cursor: pointer;
text-decoration: none;
margin-right: 2px;
margin-left: 2px;
}
.art-menu a .r, .art-menu a .l
{
position:absolute;
display: block;
top:0;
z-index:-1;
height: 75px;
background-image: url('images/MenuItem.png');
}
.art-menu a .l
{
left:0;
right:6px;
}
.art-menu a .r
{
width:412px;
right:0;
clip: rect(auto, auto, auto, 406px);
}
.art-menu a .t
{
font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
color: #FAFAFF;
padding: 0 7px;
margin: 0 6px;
line-height: 25px;
text-align: center;
}
.art-menu a:hover .l, .art-menu a:hover .r
{
top:-25px;
}
.art-menu li:hover>a .l, .art-menu li:hover>a .r
{
top:-25px;
}
.art-menu li:hover a .l, .art-menu li:hover a .r
{
top:-25px;
}
.art-menu a:hover .t
{
color: #DBDBFF;
}
.art-menu li:hover a .t
{
color: #DBDBFF;
}
.art-menu li:hover>a .t
{
color: #DBDBFF;
}
.art-menu a.active .l, .art-menu a.active .r
{
top: -50px;
}
.art-menu a.active .t
{
color: #000080;
}
/* end MenuItem */
/* begin MenuSubItem */
.art-menu ul a
{
display:block;
text-align: center;
white-space: nowrap;
height: 20px;
width: 180px;
overflow:hidden;
line-height: 20px;
margin-right: auto;
background-image: url('images/subitem-bg.png');
background-position: left top;
background-repeat: repeat-x;
border-width: 0px;
border-style: solid;
}
.art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
display: inline;
float: none;
margin: inherit;
padding: inherit;
background-image: none;
text-align: inherit;
text-decoration: inherit;
}
.art-menu ul a, .art-menu ul a:link, .art-menu ul a:visited, .art-menu ul a:hover, .art-menu ul a:active, .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
text-align: left;
text-indent: 12px;
text-decoration: none;
line-height: 20px;
color: #DBDBFF;
font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
}
.art-menu ul ul a
{
margin-left: auto;
}
.art-menu ul li a:hover
{
color: #000000;
background-position: 0 -20px;
}
.art-menu ul li:hover>a
{
color: #000000;
background-position: 0 -20px;
}
.art-nav .art-menu ul li a:hover span, .art-nav .art-menu ul li a:hover span span
{
color: #000000;
}
.art-nav .art-menu ul li:hover>a span, .art-nav .art-menu ul li:hover>a span span
{
color: #000000;
}
/* end MenuSubItem */
Ogni voce del menu ha una propria classe es. la voce Forum di questo sito ha una classe menu-282.
Quindi scopri la classe della voce che ti interessa personalizzare e personalizzala dal CSS.
Uhmmm... Però io non è che voglio avere una voce sempre personalizzata. Quello che voglio fare è che cambi quando sono su quella pagina. Prendendo come esempio questo sito, se io sono sul forum vorrei che sia evidenziato "Forum" sul menù in alto, ma se cambio pagina e vado su documentazione vorrei che si evidenziasse "Documentazione" e "Forum" torni uguale agli altri.
per quello che vuoi fare esistono le classi .active (associata alla tag
<a>) e .active-trail (associata alla tag<li>che la contiene)Certified to Rock
Ah, ecco! Grazie mille!