Crazy Responsive Sticky Menu

The fixed navigation UI pattern that puts content first, works (mostly) everywhere, and needs no jQuery!

Sticky menus are a design pattern that fix the navigation to the top of the page. While I won't go so far as saying scrolling back to top is a problem, sticky menus certainly make navigation faster. This makes them especially good for long-form pages especially those trendy single-page websites (like the one for your artisanal mustache wax startup.)

While sticky menus make navigation quicker, they also present a new problem: They take up screen real estate. That might not be a problem for the six percent of you with 30 inch monster displays, but for the rest of us with 13" notebooks, it's annoying. We solve the problem by moving the navigation out of the way out of the content. Go ahead, scroll down this page and you'll see what I mean.

On most displays, the menu is in the gutter or sidebar. I say most because this thing is crazy responsive. It works on all display widths, down to 320px. Yes, in all widths, the menu remains fixed to the top and readily accessible. On phones we cheat a little by using the popular iOS sliding menu style, but it's cool because we keep a navigation icon pinned to the top.

There are no dependencies. Aside from a little bit of JavaScript to append a class name on scroll, all the magic happens in CSS. This keeps your page load time low, and let's us sleep better knowing we're not using abusing jQuery.

Cross Browser Compatibility
This is tested and working in:

  1. Chrome 33
  2. FireFox 27
  3. iOS7
  4. Safari 7
  5. IE 9 (IE 10 for snazzy animations)

Not saying it won't work in other browsers, we're only listing what we tested.

Download it

You dig it? It's yours.

Crazy Responsive Sticky Menu is distributed under a Do What You Want to Public License. Everyone is permitted to copy and distribute verbatim or modified copies of this document, and changing it is allowed as long as the name is changed. You just do what you want to.


What next?

Follow @PaulReda and tell me how you used the Sticky Menu


And now we bring you some extra content we had to add in order show off the hot scrolling action

Along the shore the cloud waves break,
The twin suns sink beneath the lake,
The shadows lengthen
In Carcosa.

Strange is the night where black stars rise,
And strange moons circle through the skies
But stranger still is
Lost Carcosa.

Songs that the Hyades shall sing,
Where flap the tatters of the King,
Must die unheard in
Dim Carcosa.

Song of my soul, my voice is dead;
Die thou, unsung, as tears unshed
Shall dry and die in
Lost Carcosa.

© 2014 Ethercycle LLC. All up in the Twitter.