A web design trend that I have started noticing more frequently are ‘sticky menus’ where the navigation sticks to part of the page while the content scrolls. This great feature for websites with lots of scrolling and allows users to easily navigate from page to page without having to scroll back to the top to get to another section.
We have see this done at the top of the page for a while now, and its starting to become more common in left hand side of a page. However an advancement on this which I have seen, which has the extra ‘wow’ factor, is to have the navigation not at the top initially but as you scroll down it catches on the top of the browser and sticks there.
Here are some sample sites with a great use of sticky navs:
Facebook.com– Top sticking
A simple but effective with blue panel sticking to the top of the page as you scroll.
Teean + Lax Blog – Left side sticking & collapsible
The nav sticks to the left of the page as you scroll with the added benefit of being able to collapse the nav if its in your way.
The Lounge – Top stick & single page
This takes to stick to top menu but is a single paged design. As you scroll the current section is highlighted in the nav – a great feature.
Tabspresso – Top Stick with fade in
A nice touch here, the top nav isn’t shown initially but as soon as you start scrolling it fades in.
LESS CSS – Catch & Stick Style
Here the nav bar appears below the main logo and then as you scroll down it catches on the top of the page applies some transparency.