Vertical Dot Navigation Styles with a One Page Scroll

So sometime ago a was lurking some Mary Lou posts for inspiration (as everyone should) and I made some changes to her post about Dot Navigation Styles so I could learn more about CSS3. What I did was change every style to a vertical dot navigation style.

You can see the final product here

Looking at the code and learning was really fun, but I felt something was missing. Thats when I remembered another awesome project from Peter R. called One Page Scroll. So I put myself to the task of combining both of them and here is the result

I encountered some problems when combining both projects, mainly the tooltip and dotmove have some problems when working with the one page scroll so they don’t work as intended and the drawcircle needs some extra code involving the svg circle so it doesn’t work off the bat.

I hope you like the final combo-project. You can download the code from Github. Please use the code I provide since I changed both projects quite a bit. You can find more information about the usage in the Github Readme and you can find the full demo at the “Scroll-Demo” folder.

But if you want a push in the right direction you just need to copy all the .css and .js files in “Scroll-Demo” folder and add this javascript to your file where you want to initialize the navigation component.

$(document).ready(function(){
      $(".main").onepage_scroll({
        dotstyle: "fillup",
        sectionContainer: "section",
        responsiveFallback: 600,
        loop: true
      });
});

Is super easy! Just remmember to use section as your view delimiter since it is what I used for this example. If you have more questions you can always look at the index.html in the “Demo-Scroll” folder.

Finally I must say that all of this is thanks to Mary Lou and Peter R. So give them a follow and check the original projects.