Design Notes - 10 Minute CSS Menus
Jun 29th, 07 | 10 remarksIn an ongoing effort to improve Design Adaptations, I’d like to introduce the premiere of a series called Design Notes. Published once weekly, it will highlight free software, online apps, or various widgets of interest to designers and developers. I’m a test junkie, and an open source fan-girl, so you could think of Notes as a growing collection of utilities. Hopefully, you’ll find something worth adding to the toolbox you’re always reaching for.
Also appearing center stage in Notes each week will be Destinations - a spotlight on remarkable or inspiring design, selected from a running list of Stumbles, or a favorite picked from submissions to the most popular CSS galleries. Notes will not only be a fun series to write, it gives me the chance to feature the projects, designs and tools which have a hand (directly or indirectly) in shaping this site.
Kicking things off, here’s a lightweight application called CSS Tab Designer. It’s a simple interface for visually creating horizontal or vertical CSS menus. They have a about 60 pre-made menus you can drop into a preview, then generate the HTML with a single click, or c/p (from code view) into your favorite editor and customize to your heart’s content! With so many styles to choose from, you’re sure to find one close enough to the look you want, and without all the heavy lifting. :)
This is a quick way to create a beautiful CSS driven navigation, literally in about 10 minutes. The only problem I have with it - the code generated is a tiny bit convoluted, depending on which menu you choose, and of course you’ll have to modify the background graphics to suit your needs. Not a big deal, but worth mentioning. Interestingly enough, some of the contributors for this app some menus are based on the work of Eric Meyer, Dan Cedarholm, et al.
Destinations
To appear as the first destination, I chose the lovely Pixel House. The layout is quite simple, but that’s what makes it so nice. The clever tie-in between the top portion of the background graphic and the nav was a nice touch as well. Since this is not meant to be a critiquing system or review in any way, I’ll say no more - however your comments are welcome!
If readers would like to hear more specifics on the designs I select or why, I can include this on future Notes. I’d be keen to hearing your feedback or ideas which would add further interest to this new feature. With that, this concludes the first ever Design Notes. Hope you enjoyed it. Have a great weekend!
Thanks for sharing your find on the css menu! I get overwhelmed with css, being that I’m more of a designer rather than developer, so I definitely appreciate anything that makes the process simpler!
Also, I love the site you chose to feature in Destinations! It’s so simple, clean, and beautiful.
What a cool idea Design Notes/Destinations is! I will definitely check this out on a regular basis, thanks!
Jun 29, 07 | 5:38 pmThanks Joci, glad you think so! CSS can be overwhelming when you’re starting out, but it’s so worth it. You’ll be amazed at how it can open doors for a style you never knew you had. :)
Jun 29, 07 | 6:42 pmExcellent concept (and naming) for your new series - I look forward to the gems you find! ;)
CSS Tab Designer is pretty cool. I’m sure I’ll have a practical use for that at some point in the near future.
Pixel House is nice - but it reminds me of the latest Microsoft Windows site.
Jun 29, 07 | 6:43 pmThanks Paul - the brainstorming that went on for the name selections was an all day process let me tell ya! :) I noticed you’ve added a similar scope to Reflections. I guess great minds think alike!
I see what you mean about the Windows site. I haven’t visited any of Microsoft’s sites in a loong time, but I like that one too. Although, it reminds me in turn of Apple’s site before their redesign. The reflective black nav, the rounded corners… inspiration is circular eh? ;)
Jun 29, 07 | 9:05 pmThe more time I spend in this industry, the more I realise that nothing’s ever really original… ;)
Jun 29, 07 | 9:08 pm“Interestingly enough, some of the contributors for this app include Eric Meyer and Dan Cedarholm.”
That is interesting, given that your mention of this application is the first I’ve heard of it. Actually, in reading the “Credits” page, I think it’s more accurate to say that the application’s output is based on work done by a number of people, Dan and I among them. Not that it really matters a whole lot, but “contributor” sounds like “worked directly with those who wrote the application”, and that’s not the case. Looks like a great little tool, though!
Jun 30, 07 | 8:40 amBlimey! All bow to Charity for getting a blog comment from a guru! We are not worthy! ;)
A sincere doffing of my cap to Mr Meyer. :)
Jun 30, 07 | 8:58 amThanks for pointing out the discrepancy Eric. Duly noted! Honored to have you stop by as well. :)
Jun 30, 07 | 9:51 amThe CSS menu designer looks like it could be a big help for me. I think it could be helpful for me so I can look at the code and see how it makes them. Thanks. I wish it was for Mac too, I will have to download on my laptop.
Jul 3, 07 | 3:01 amWow! They’re so fast build, and very useful. I’m following your Design Notes :) Thanks!
Apr 6, 08 | 9:02 pm