Trendy Navigation Bars - Part 1 - Theory
Right now I'm working on a redesign of a commercial website. The old one was designed in such a way that adding a new link/area/tab to the horizontal "navigation bar" at the top of the page meant a return trip to the original "designer" who then created a set of images for the new link (one normal, one for mouse over etc). There's no excuse for using images in place of text, but holding your customer over a barrel like that is just plain wrong.
As part of the redesign I wanted to convert the links to text but also make them look really nice. Nicer in fact than the original images. To do this I took inspiration from some of the more trendy sites around at the moment. For example, the Vitamin site has a navigation bar like this:
And the Digg site has one like this:
There are loads of other sites out there using the same look. Notice the subtle grading of the background and the dividing lines that makes it appear as though there's a slight indentation between each link.
Having seen and liked this approach in the past I'd never tried doing it myself as I'd thought it would require the skills of a graphics person. Au contraire. It's really easy to do.
Tomorrow I will talk about how to create the graphics required. On Thursday I'll show you how to plug them in to the HTML using some simple CSS.
Skip to the 
You can subscribe to an individual
I use this technique all the time for internal sites. Being an internal developer means not really being able to insist on final sign-off of the design, so there are always going to be changes to menus, etc. It's much easier to just add a list item than to create a new graphic.
I use code I found here:
{Link}
I'm actually on a project right now that required like-navigation, but using "tabs" across the top of the site instead of the "bars", if that makes any sense....
Awesome look, and it really is very simple to do - the only possible *gotcha* was setting the active state of a single tab from the multiple tabs. Not the end of the world by any means, but it did require (for my implementation anyways) two javascript functions and some applied logic to the onload event - but like you said: It's really easy to do.
"Not sharing" because I don't want to step on toes (and I'm really curious to see how you did it to see if I'm even close to how a Web Developer would accomplish the same feat), but if you're interested in the way that I did it - lemme know!
-Chris
Not looked at the sites, just the clips, and not wanting to second guess - but I'd do this by having a 2px wide graduated band as the background image for the bar?
I'd skip the images and go pure CSS, personally. Pure-css means a smaller footprint, usually, and a smaller footprint means better performance. Better performing websites, content being generally equal, keep users happy. For a way to do tabbed navigation with CSS, check this out: {Link} It's an oldie but a goodie. Cheers!
rhb. The footprint of the required images for this technique is so small I'd go as far as saying it was negligible.
@Jake: The images may be small, but they also cost you in server requests, and besides why use images if you don't have to? Well, maybe you do, but most of the time CSS can do wonders... :-)
Jim Fricker had this on lock down. I think I used this on NCC's CAS IIRC. Holy acronyms, Batman...
Server requests? So what!? We live in the age of broadband.
CSS may well be able to do wonders but it can't do enough. Take two website. One pure CSS and one with a couple of tiny background GIFs thrown in. Put them side by side and ask somebody to pick out the professional-looking one. What's the chances of them going for the CSS site.
@minimalist / rhb
CSS's greatest strength is its ability to utilize and place graphics where ever you want. Without a little .png or .gif here and there, CSS is just lines and blocks. Granted, you can do some amazing things with Javascript and CSS, but even then the best designers out there employ wee gpx as suits the look they are going for.
In many cases, though, a 7 byte png is going to be slimmer than equivalent CSS (think rounded corners).
Lol, @minimalist and cost of server requests - that must be one of the most anal optimization remarks I've ever heard. No offense. ;-)
Of course you need some gifs or other graphics on a professional looking sites. Who wants to look at boring sites in 2006. They can have minimalistic design, but shouldn't be boring. And keep in mind what Jake said: never 'hard-draw' the navigation. Sooner or later the customer will want something new or changed (even if they promise they won't - it happened to me a couple of times) and then you need to go and bother with designers and their anal remarks about breaking their original layout design. Ah, I beter go find a consultant job ;-)
There are plenty of people (and companies, including the one I work for) that don't have broadband speed/bandwidth available.
Satellite WANs, for example, have very high latency, so many small downloads is worse than one larger download. Specifically, if I needed 8 tiny graphics to generate rounded corners, but I could get the same effect with some js/css that added up to even 3-4 times the size of all the graphics, the js/css design would perform better (leaving aside the point that wasting bandwidth on rounded corners is a terrible idea on as satellite WAN). In this case, considering the cost of server requests (on the network, not the server) isn't even a remotely anal optimization remark: it's mandatory.
I'm not suggesting that Jake's technique should be modified to handle a type of network he doesn't have to deal with. But minimalist and rhb have made valid points that apply for some of us, so mocking them seems uncalled for...
Rob. Even on dial-up the images we're talking about are measured in bytes rather than kilobytes. They'e tiny! Consider also that most browsers on dialup will have cacheing enabled and it becomes even less of an issue.
I find it hard to believe any company forces their developers to design graphicless websites for the benefit of the network.
Jake. I'm not on dialup. I wish I were. I'm on satellite. Totally different ballgame. Very high latency. Each server request, tiny though it might be, is carefully considered and weighed before being approved. It is absolutely faster for me to download a single 50k file to a store than it is for me to download 8 1k files.
I totally agree that caching the images will make this issue go away after the first visit to the page. But the JS/CSS routines are cached as well, so there's no advantage to the graphics approach that way.
In any event, trust me, the issue is relevant. I suffer through it every day. I *wish* I was wrong. I'm glad for you that you work in a world where this issue is inconceivable, but some of us aren't so lucky.
As I said earlier, I'm not complaining about the technique you're describing; I'm looking forward to the rest of the details. I'm just pointing out that blithely disregarding the network isn't an option for everyone.
And http1.1 images and html doc can be transmitted over the same connection which is kept open.
I think the network latency of little images in http1.0 stems much more from the 1 ressource - 1 client-server http connection approach, right?
Interesting article, again btw.