Change the menu color at one point of one page site

Quick&Dirty rather close solution

I have explored the way to achieve your goal and have the some experiments:

• Text in middle-center
• Text in left-top angle
• Menu in left-top angle
  

I have not full solution, but the result is pretty good: (demo on dabblet)

HTML:

<div>    <h1>Chess</h1></div>

CSS:

div {    background: linear-gradient(45deg, black 52%, white 52%);}ul {    background: linear-gradient(45deg, white 52%, black 52%);    -webkit-background-clip: text;    -webkit-text-fill-color: transparent;}

Method of work:

Sync percents in each gradients:

52%:
62%:

Pros:

• Plain html&css;

Cons:

• Only webkit support;

The Canvas-way

Pros:

• Cross-browser (mobile too)

Cons:

• Javascript needed

The SVG-way

Pros:

• Cross-browser
• Javascript free (in static)
• More semantical then Canvas

Couldn't you do a diagonal gradient in css3 with say black for 50% and then white at 51%?

background-image: linear-gradient(left top, rgb(0,0,0) 54%, rgb(255,255,255) 55%);background-image: -o-linear-gradient(left top, rgb(0,0,0) 54%, rgb(255,255,255) 55%);background-image: -moz-linear-gradient(left top, rgb(0,0,0) 54%, rgb(255,255,255) 55%);background-image: -webkit-linear-gradient(left top, rgb(0,0,0) 54%, rgb(255,255,255) 55%);background-image: -ms-linear-gradient(left top, rgb(0,0,0) 54%, rgb(255,255,255) 55%);background-image: -webkit-gradient(linear,left top,right bottom,color-stop(0.54, rgb(0,0,0)),color-stop(0.55, rgb(255,255,255)));

How about changing CSS color onclick of the menu item:

$('#link1 a').click(function(){    goTo(0,0);$('#navigation ul li a').css('color','#fff');  });$('#link2 a').click(function(){    goTo(1,0);$('#navigation ul li a').css('color','#fff');});$('#link3 a').click(function(){    goTo(2,0);$('#navigation ul li a').css('color','#000');});$('#link4 a').click(function(){    goTo(3,0);$('#navigation ul li a').css('color','#000');});

JSFIDDLE: http://jsfiddle.net/V7YXC/2/