Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS scrolling and active menu item indicator

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #247056
    rbfmnpwr
    Participant

    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!

    #247057
    Paulie_D
    Member

    Is it even possible with pure css?

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

    #247059
    Beverleyh
    Participant

    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.

    #247060
    rbfmnpwr
    Participant

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

    #247078
    Shikkediel
    Participant

    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;
    }
    
    #247113
    rbfmnpwr
    Participant

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

    #247115
    Shikkediel
    Participant

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

    #247120
    Beverleyh
    Participant

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.