在一个页面站点的一个点更改菜单颜色

Question

我正在制作单页作品集。网站的内容将是水平滚动的，只有菜单是固定的。前两页是黑色，最后一页是白色。但是第3页是半黑半白，它是两种背景的分离者。

这是我的问题的最佳解决方案：http://jsfiddle.net/a5a7x/1/ 我只有问题才能让水平不垂直。

这是我要放置拆分的页面内容：http://jsfiddle.net/n3FGr/

请记住，我只需要拆分菜单，因为它会被修复，所以当内容将左右滑动时，只有菜单会有分割。

Answer 1

快速和肮脏的相当接近的解决方案

我已经探索了实现目标的方法并进行了一些实验：

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

我没有完整的解决方案，但效果非常好：（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;
}

工作方法：

同步每个渐变中的百分比：

52％：
62％

<强>优点：

• 普通html＆amp; css;

<强>缺点：

• 仅限webkit支持;

Canvas -way

<强>优点：

• 跨浏览器（也可移动）

<强>缺点：

• 需要Javascript

SVG -way

<强>优点：

• 跨浏览器
• 免费Javascript（静态）
• 比Canvas更具语义性

Answer 2

难道你不能在css3中做对角线渐变，说黑色为50％，然后白色为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))
);

Answer 3

如何更改菜单项的CSS颜色：

$('#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/