CSS scrolling and active menu item indicator

[rbfmnpwr]

Hi everyone, new here. But an awesome site, since I’m currently in the process of converting my site to become full CSS3/HTML5.

Back on track! I am currently working on my navigation, but I ran into a small problem, or general lack of knowledge.

https://codepen.io/anon/pen/JRVGvV

I would like to color the menu text once I am on the current location/page. So when I click “Test 1” it should change color until I click “Test 2”, then this should change color, and reset “Test 1”. I think you know where I am heading.

Some kind of indicator, to show the user where they currently are.

Is it even possible with pure css?

Thanks!

[Paulie_D]

Is it even possible with pure css?

No…scrolling is not detectable by CSS. You’d need javascript.

[Beverleyh]

The highlighted indicator thing is possible if you use the checkbox hack. Using your markup but with radios substituted in http://codepen.io/anon/pen/KgYzxY

But to power your whole menu and site content this way possibly isn’t the best approach.

As Paulie said, incorporating JavaScript into your original demo to detect the scroll position would be better.

[rbfmnpwr]

I see. I was just sure that I had seen it somewhere before, where someone used :target to do this.

Anyway, thanks for the inputs. I already have a working version (scroll and detection) with jQuery which works fine. I was just trying to move away from jQuery, mostly just for the fun of it :-)

[Shikkediel]

Not sure if there was a misunderstanding, I thought something like this was the intention:

a[id= "test1"]:target ~ .nav li:nth-of-type(1) a {
    color: red;
}

[rbfmnpwr]

That is EXACTLY what I needed! Thank you so much!

[Shikkediel]

No trouble, I hadn’t noticed the replies that were there already before I took a look at the pen to figure it out. With such reputable members, I would have likely forfeited. Must be something in the autumn air to prefer the :checkbox approach by the way because I took the same turn in a similar topic earlier this week. Using :target is a bit more appropriate here than in that thread though because the page is actually going somewhere (using translate apparently instead of scrolling).

8-)

[Beverleyh]

Using :target is a bit more appropriate here than in that thread though because the page is actually going somewhere

Agreed – better for linking from external sources too with a hash (you can’t do that with the checkbox hack unless you JavaScript).

I completely blanked on the highlights with target. I’ve got checkboxes on the brain at the moment too (currently trying to improve accessibility of a checkbox hack menu by making dropdowns tab-able with JavaScript)!

[Author]

Posts