CODEWITHSUNDEEP
jquerycssmenucolorsweb
DeanDeey
DeanDeey

Reputation: 237

Change the menu color at one point of one page site

I am making a one page portfolio. The content of the site will be horizontal scrollable, only the menu is fixed. The first 2 pages are black and last one is white. But the 3rd page is half black and half white, it's kind a seperator of the two backgrounds.

https://i.sstatic.net/uiVqu.jpg

This is so far the best solution for my question: http://jsfiddle.net/a5a7x/1/ I only have problems to make it horizotnal not vertical.

This is the page content where i want to put the split: http://jsfiddle.net/n3FGr/

Remember, i only need to split the menu, because it will be fixed, so only the menu will have the split, when the content wil slide left and right.

Upvotes: 23

Views: 2299

Answers (3)

Vladimir Starkov
Vladimir Starkov

Reputation: 19803

Quick&Dirty rather close solution

gradient on text

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

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%: enter image description here
62%: enter image description here

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

Upvotes: 6

sanusart
sanusart

Reputation: 1527

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/

Upvotes: 1

Alex Reynolds
Alex Reynolds

Reputation: 6352

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))
);

Upvotes: 1

Related Questions