Creating a CSS Menu Bar with Listamatic

I'm working on a relaunch of Wargames.Com, the wargaming site that attorney Wade Duchene and I successfully defended from a UDRP arbitration challenge by MGM Studios two years ago. The site began as a wargame store, but sales and traffic weren't enough to justify the aggravation of running an online storefront, so I retreated from ecommerce after 18 months. (I was the entire customer service department. You'd be surprised at the number of people who order from one web site, then call a completely different site to complain when they're unhappy with the product.)

As someone who has played wargames and role-playing games since the '70s, I'd like Wargames.Com to become a site for wargame enthusiasts that's worthy of its killer domain. For the relaunch, I'm rolling out features over time, beginning with a wargame store locator and convention calendar. The site's database currently contains 960 stores and 34 conventions. After these features are done, I'll add community forums, product news and perhaps blogs.

Although I've been publishing on the web for more than a decade, I suck at web design. Yesterday it took me six hours to create a vertical menu bar for the site using Cascading Style Sheets (CSS). The Wargames.Com main menu is defined in HTML as a simple list:

<div id="navcontainer">
<ul id="navlist">
<li><a href="/">Home</a></li>
<li><a href="/add-store">Add a Store</a></li>
<li><a href="/conventions">Conventions</a></li>
</ul>
</div>

CSS can transform a list like this into a row of graphical menu buttons. Instead of using cut-and-paste to swipe somebody else's design, I decided to learn all of the CSS that goes into the creation of a menu bar and develop it one step at a time.

Huge mistake.

You'd be surprised at all the different styles that have to be set to make a simple row of buttons light up when a mouse hovers over them. Changing one style like float, width or display can dramatically hose a bunch of other styles -- style sheets, like nuclear power plants, are susceptible to cascading failure.

With the help of A List Apart, I learned just enough CSS to understand that it was hopeless for me to go on and I'd never be able to create a row of three rat bastard blue buttons with goat-humping shiny blue hover effects.

I was ready to choose another profession when I discovered Listamatic, a site that contains several dozen example CSS lists with the HTML and CSS required to create them. You can preview lists, find the one that's closest to your desired effect and boom. I chose Russ Weakley's rollover horizontal list.

Css · Publishing · Gaming · 2009/02/20 · 4 COMMENTS · Link

Comments

Here's hoping you can find me a copy of "Secret Weapons of the Luftwaffe" that will run in Windows XP.
-Sam

#1 · Sam · 2009/02/20

Listamatic has saved my ass so many times. Find one that is close to what you want, and then tweak it until it fits exactly. Good luck with getting the most out of that domain. I'll pass this thread on to my many gamer threads.

#2 · scully · 2009/02/21

I'd recommend Sams Teach Yourself CSS in 10 minutes to anyone getting started with CSS. Or HTML for that matter. Super simple but will take you far.

Good luck with wargames.com, looking forward to it.

#3 · kristian · 2009/02/23

Really great and helpful information. Thanks for cool CSS websites. I'm building a new website and sure enough examples of CSS would be very useful. I don't know about CSS much, but I'm learning it now. Hopefully, everything goes well, and my website will go live real soon.

#4 · Jonathan · 2009/09/17