Single page website navigation selected states

Question

New to SO! Please suggest a better way to phrase this question :)

I have a single page, vertical scrolling website with a fixed navigation bar located in the footer. I am using local.scroll and anchors to link the navigation to divs on the page.

I would like the user to be able to click on one link and have it change to a selected state. I'm just not sure how to style/code the links for a single page (instead of using class="select" for each active link as in multiple page sites.)

This site has an example of what I'd like to accomplish: http://www.kristaganelon.com/#portfolio-section

Answer 1

The example you referenced is using Javascript (in the form of the popular library JQuery) to create the selected state on the navigation as well as scroll the page.

JQuery

This library is very popular for creating the kind of event handlers you are looking for, as it easily binds events using simple CSS selectors familiar to anyone who has styled a page with CSS. The conventions of IDs, classes and attributes are used to find elements and bind events or change their states.

The JQuery site has plenty of helpful tutorials, but a simple click event looks something like this:

    $(document).ready(function(){
      $('.button').click(function(){
        alert('You clicked me!');
    });
});

You could utilize JQuery's .addClass to make clicking the element give it certain visual state:

$(document).ready(function(){
      $('.button').click(function(){
        $(this).addClass('clicked');
    });
});

I suggest you look over the libraries documentation and learn how to first include it on your page, and then look over some basic event binding, toggling (since you'll need this to remove the active state), etc. Learning these things will help you create interactive elements much easier.

Answer 2

Have a look at JQuerys .toggleClass(classname) . You could provide a fallback via css' pseudo-classes (not equal to the javascript solution since it is temporary).