Vertical Dot Navigation Styles with a One Page Scroll

on

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
vertical2

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

combo

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.

  • deepak

    hello! I am a bit new to HTML and was trying your project out..could you please tell me how you managed to make the dots vertical? was it in the css or in the js? your help would be much appreciated! thank you!

    • Robaum

      Hi deepak!

      So the dots. For the dots I used an HTML element called Unordered list and each dot in that list is a list item . By default list items are vertical so you don’t have to add anything.

      But if you wanted them horizontally you just need to add the float:left attribute to the CSS for the list items.

      Hope this helps.

      • deepak

        aahh! ok! i get it! the concept of floats can take some getting used to! thank you so much for the help!

  • Rob

    Hi Nick, I can’t get links to work with this plugin with both your adaptation and the original made by Mary Lou. I can click the buttons and they animate, but the page does not scroll down to the anchors. Someone in her comments mentioned swapping all of the li and a tags in the html and in the css as well, but this did not work for me. Do you have an actualy working demonstration of this anywhere?

    • Robaum
      • Rob

        Will this work without using the one page scroll? I only need the functionality for the vertical dot navigation. Seems kinda odd to me that so many of the articles over on codrops have absolutely no guidance on functionality and the demos don’t actually do work, they just show the visuals, and there’s many comments asking about how to actually hook it up that go unanswered… much of the connectivity is quite non-trivial such as progress bars, form elements, etc. Anyways thanks for the reply.

        • Robaum

          By functionality do you mean something like this? http://robaum.github.io/Vertical-Dot-Navigation/ You should be able to just copy and paste the navigation you want to use. Just look at the code in the Github page so you see what is required and how to call them. If you need further assistance I can help you.

          Also I see Codrops as a great site for inspiration and awesome resources but you are expected to put the extra effort if you want to use the resources. Which in my case I find ok. They invest a lot of time on each demo and they give them away for free. But don’t worry, the more you code the easier it gets. And you learn a lot from tweaking with their projects.

  • sivan

    hi, i want to do something similar in my website using the tool-tip style, but when i look at the html code i can’t find in the ul tag, why is that?

    • Robaum

      Hi Sivan,
      For the scroll I use this plugin made by Peter R. https://github.com/peachananr/onepage-scroll
      I just made some slight modifications so it could work with the styles Mary Lou showcased.
      The ul tags are made by Peter’s plugin depending on the number of sections you have in your html code.

      Try running the demo on the github I set up and look at the html after
      https://github.com/Robaum/Vertical-Dot-Navigation
      (It even comes with some instructions)