In an ongoing effort to squeeze the most flexibility out of nested-list navigation menus, I developed this two-line version. Unlike the traditional OS-style dropdown menus, this one sacrifices horizontal space to save on vertical space, which is usually preferable in a small website. The menus can easily be aligned to the left or right instead of to the center.
CSS makes it easy to highlight special links across your entire site. For instance, many of our sites indicate when a link points to a PDF or external website by labeling it with a special icon.
In the bad old days, web developers added “(PDF)” to each and every PDF link in your site by hand. This is doable but tedious, especially if someone else is making changes to the site after you’ve finished building it. This is where CSS generated content comes in handy.
As usual, I didn’t design this one, I just built it. A little bit of jQuery, a lot of CSS, a splash of embPerl and Google Maps API on the contact page, all built on top of an HTML5 template (with Modernizr providing the shiv for older browsers). The homepage uses a variation on my simple slideshow which interacts with the main navigation tabs.
However, sometimes you just want something so simple that even a few KB worth of plugin is more trouble than it’s worth. With that in mind, I’ve written my “world’s easiest slideshow” script — just ten lines of jQuery and ten lines of CSS. I’ve used this three times in the last month alone, and it’s about as simple as I can imagine.