Subscirbe to Kodhus news letter and get new tips and tutorials right in your inbox by entering your email below

Fixed vertical navigation

Fixed vertical navigation
Like & share to be notified of the new tips & tutorials:

Fixed vertical navigation

In this tutorial we are going to learn how to create a fixed vertical navigation on the right hand side of the screen. The idea is to be able to have a single page website where user can easy view different sections with a nice animating style by clicking on the navigation items.


Pretty simple markup. We define couple of sections using newly introduced html5 <section> semantic tag and then we use <nav> wrapping an unordered list for the navigation itself.

and here is navigation:

we have put a span within each nav items link for the tooltip that we want to show when the user moves the mouse over each navigation button.


For each section we defined different color and made sure our sections have a min-width. But later on in Javascript code we set the height of each section to be the full height of the screen window.

The most important part is styling the navigation.

As you can see we set the position to fixed. set the right to 0 so that it goes to the right of the screen and then made sure that it aligns center vertically using top and transform.

Now for the vertical dots and also for defining the state of the tooltips (the spans within each navigation link) we do this:

It’s all self-explanatory but if you have any question on it go ahead and comment so that I can answer.

Interactivity (Javascript)

So here is where all fun starts. We use jQuery to do this.
When clicked on each navigation circle, we want to animate the body to the top of the respective section.

First we set each sections height to be the window height.

Then we add the click handler.

Finally we want to make sure the each navigation item gets activated when the corresponding section is viewed.