vertical fixed navigation
July 14, 2014 | 8 Feedbacks

Vertical Fixed Navigation

A side navigation which allows users to easily browse the page, selecting one of its sections and smoothly scrolling to it. It doesn't necessarily replace the main website navigation, but comes in handy for pages packed with content.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

If your website pages have lots of content, users can have a hard time finding exactly what they are looking for. This vertical navigation provides a complete overview of the page content, reducing browsing time and making navigation easier.
Navigation labels are hidden and shown only on hover in order to make the navigation less distracting while browsing,

Creating the structure

We wrapped our navigation in a <nav> element and created a section for each navigation item. We added a navigation “trigger”  to access navigation on touch devices.

Adding style

We use Modernizr (.touch and .no-touch classes) to detect touch and no-touch devices, and deliver 2 custom navigation experiences. That is why if you resize the browser to test the snippet, you’ll still get the same effect with the dots. But if you test the demo on a touch device, you see this:

vertical fixed navigation mobile preview

On no-touch devices, we hid the navigation “trigger” and set position: fixed to the <nav> element.

As default, we assigned a scale-down transformation to the navigation items (both dots and labels), and scaled them up on hover.

On touch devices, we set a position: fixed for the .cd-nav-trigger and <nav> and  placed them at the bottom right. This way, it should not conflict with an additional navigation, in case your website requires one.

When user clicks on the .cd-nav-trigger element, we give the .open class to the navigation to change its CSS3 scale value from 0 to 1 , with a CSS3 transition to achieve a smooth animation.

Events handling

When user scrolls through the sections, the updateNavigation() function evaluates which section is currently being viewed and assigns the .is-selected class to the corresponding navigation item (based on the data-number attribute of the navigation items).

Changelog

July 14, 2014
  • Resource released by CodyHouse

Claudia Romano

Web developer, fan of The Big Bang Theory and good food. Co-founder of CodyHouse. You can follow her on Twitter.

  • Patrik Illy

    Keyboard navigation would be great :)

    • Claudia Romano

      Good suggestion! We will update the resource soon ;)

      • Patrik Illy

        (y)

  • http://colinr.com Colin Rotherham

    Perhaps add an event listener during the scroll animation to allow mouse-wheel/touch events to cancel scrolling? For deep pages especially, it allows you to “cancel” the animation without fighting with the browser to go the other way.

    I usually listen out for these:
    https://gist.github.com/colinrotherham/6a589ec2ce00b27e6338

  • jean-claude

    Groovy Claudia! The color scheme is sublime. Your attention to details second to none. Thank you.

  • Mirko

    First of all, thanks for the great piece of code! But unfortunately, the modernizr and touch stuff doesn’t work on Windows phone 8.1 with IE11.
    I get the same navigation as on the desktop. Any ideas how to remedy this ?

    • Claudia Romano

      Hey Mirko, glad you liked it! Thanks for the heads-up, we’ll fix that. In the meanwhile, you may try using media queries rather than .touch/.no touch classes. (e.g., when viewport is larger than 1170px use the style we have used for no-touch devices; for smaller viewport, instead, use the style we have used for touch devices).

      • Mirko

        Hi Claudia, thanks for the reply. I already did that with media queries, I think I will leave the initial navigation for tablets also.

        Regarding Modernizr, I’ve read that Modernizr.touch has been renamed to Modernizr.touchevents. Didn’t try it, cause I used media queries, but I think that is the reason.