Little details: the menu bar
One of the things I find most satisfying while designing/developing a website is implementing those small, almost imperceptible details that can mean Quality, the Web equivalent of sophisticated stitching in clothing, and which to me feels like a particularly nice click must feel to a master watchmaker. So today, as I made a few small tweaks to this website (meaning this one, Tumblr-folk) - including better-looking YouTube embeds, fixing lightbox weirdness in pages containing embedded videos, etc - I started thinking how proud I was of the site’s navigation bar. Granted, is not as if I invented the wheel or something, and you can see the same kind of navigation in lots of other places out there. But still, I’m really pleased with the result - and with the implementation, which I think is rather clever:
As you can see, scrolling down the page will summon a fixed navigation bar, and scrolling to the very top will make it disappear under the site’s heading (which also contains navigation links). The real trick here is that everything is done with CSS, no Javascript is required to render the fixed navigation bar once you scroll past some Y coordinate:
header {
display: block;
position: relative;
background: url("header-bg.png") repeat-x;
width: 980px;
height: 150px;
z-index: 100;
}
#header_fixed {
display: block;
position: fixed;
background: url("header-fixed-bg.png") no-repeat;
width: 100%;
z-index: 50;
top: 0; left: 0;
}
I do cut some corners in the above code, but you’re free to figure it out on your own or View Source. The gist of it is that the fixed header element (#header_fixed) is sandwhiched between the main page div and its header (which I wrote using the HTML5 element of the same name): just look at their z-index! As you scroll past the header, the fixed element is revealed underneath. Some clever PNG transparencies and you get the ‘dissolve’ effect you can see here. I found that a clean transparency gradient made that transition a bit weird so I made use of some stripes.
Another detail I added to the fixed navigation bar is that it’ll scroll you back to the top of the page if you click on it, à lá Google+. For that, I did need some simple jQuery:
$('#header_fixed').click(function(ev) {
$('html,body').animate({scrollTop: 0}, 800);
});
$('#header_fixed a').click(function(ev) {
ev.stopPropagation();
});
The only subtlety to it is that you don’t want any scrolling to happen when the visitor actually clicked a link in the navigation bar, and that’s where that stopPropagation() event method comes in: it’ll block the event from being activated further up in the DOM, effectively overriding that first function. A useful thing that’s good to know.
