- This topic is empty.
-
AuthorPosts
-
October 26, 2016 at 2:27 am #247056rbfmnpwrParticipant
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!
October 26, 2016 at 3:02 am #247057Paulie_DMemberIs it even possible with pure css?
No…scrolling is not detectable by CSS. You’d need javascript.
October 26, 2016 at 3:28 am #247059BeverleyhParticipantThe 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.
October 26, 2016 at 3:55 am #247060rbfmnpwrParticipantI 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 :-)
October 26, 2016 at 12:10 pm #247078ShikkedielParticipantNot 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; }
October 27, 2016 at 9:32 am #247113rbfmnpwrParticipantThat is EXACTLY what I needed! Thank you so much!
October 27, 2016 at 10:15 am #247115ShikkedielParticipantNo 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 (usingtranslate
apparently instead of scrolling).8-)
October 27, 2016 at 12:23 pm #247120BeverleyhParticipantUsing :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)!
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.