Grow your CSS skills. Land your dream job.

Highlight selected navigation item (anchor link same page)

  • # March 8, 2012 at 7:29 pm

    Hi, i’m trying to highlight the selected navigation item based on links within the same page. Here’s what i did so far: http://jsfiddle.net/4D3bH/ . But now, I can’t seem to make the highlight work..

    Would appreciate any help!

    Thank you.

    # March 8, 2012 at 7:55 pm

    Here you go: http://jsfiddle.net/joshnh/YxRqp/

    # March 8, 2012 at 8:01 pm

    http://jsfiddle.net/senff/4D3bH/3/

    # March 8, 2012 at 8:01 pm

    …or what @joshuanhibbert said. ;)

    # March 9, 2012 at 7:10 pm

    thank you! it worked and i applied the active on the first nav item so that when the page opens it’s already selected.

    now, i’m trying to make it active based on where I’m on the page using the mouse-scroll. because, if I scroll with the mouse down or up, the last nav that i clicked is still selected. no matter section i’m on. i want to achieve something like http://nikebetterworld.com/about or http://www.neotokio.it/. any ideas?

    # March 9, 2012 at 7:50 pm

    Ah, you are after this: http://imakewebthings.com/jquery-waypoints/

    # March 10, 2012 at 10:48 am

    wow, yes! you’re fast.. thank you, joshua! :)

    # March 10, 2012 at 6:00 pm

    No worries :)

    # October 9, 2012 at 1:49 pm

    Hey guys. This is exactly what I am looking for. I tried hardly to test it on my computer but it doesn’t seem to work.

    What I might be doing wrong? I added jquery-1.3.2.min.js
    I don’t see the scrolling fx (not bodering about it) and the ‘active’ class change doesn’t work on my pc :(

    Thanks a lot in advance.

    # January 16, 2013 at 11:04 am

    Hi Juliane

    I am creating a site very similar to your fiddle. I realise now I need waypoints to get it to work the same as you needed it to. Could you please create a fiddle of it working with waypoints.

    Would be appreciated :)

    # March 15, 2013 at 11:57 am

    Waypoints is awesome. Really helped me out on the thing I’m doing now. I was able to get it to apply the active state to my anchor tags based on what was at the top of the page… but then I broke it. When I apply overflow:hidden to the container div, Waypoints will one fire once, when the page is loaded.

    Here’s the code I wrote to make the Waypoints work:

    $(document).ready(function(){
    // Make navbtn active when page is scrolled down to slide
    $(‘#slide1′).waypoint(function(down){
    $(‘#main .active’).removeClass(‘active’); // remove the class from the currently selected
    $(‘#main a.navbtn1′).addClass(‘active’); // add the class to the newly clicked link
    });

    $(‘#slide2′).waypoint(function(down){
    $(‘#main .active’).removeClass(‘active’); // remove the class from the currently selected
    $(‘#main a.navbtn2′).addClass(‘active’); // add the class to the newly clicked link
    });

    $(‘#slide3′).waypoint(function(down){
    $(‘#main .active’).removeClass(‘active’); // remove the class from the currently selected
    $(‘#main a.navbtn3′).addClass(‘active’); // add the class to the newly clicked link
    });
    });
    $(document).ready(function(){
    // Make navbtn active when page is scrolled up to slide
    $(‘#slide1′).waypoint(function(up){
    $(‘#main .active’).removeClass(‘active’); // remove the class from the currently selected
    $(‘#main a.navbtn1′).addClass(‘active’); // add the class to the newly clicked link
    }, {offset: -1});

    $(‘#slide2′).waypoint(function(up){
    $(‘#main .active’).removeClass(‘active’); // remove the class from the currently selected
    $(‘#main a.navbtn2′).addClass(‘active’); // add the class to the newly clicked link
    }, {offset: -1});

    $(‘#slide3′).waypoint(function(up){
    $(‘#main .active’).removeClass(‘active’); // remove the class from the currently selected
    $(‘#main a.navbtn3′).addClass(‘active’); // add the class to the newly clicked link
    }, {offset: -1});
    });

    I would love to know why overflow:hidden is keeping this from working. It should still be firing off when I get #slide2 or #slide3 hits the top of the viewport, but it’s not, and I can’t see why.

    EDIT:

    Here’s a jsfiddle with the HTML and CSS.

    # July 8, 2013 at 5:27 am

    Hello,

    How would I add easing to

    Senff

    http://jsfiddle.net/senff/4D3bH/3/

    thank you

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".