Javascript Free menus (in CSS)

I was just visiting the msnbc web site and I couldn’t understand why a simple menu like the one used on the top navigation bar would be so “glitchy” and slow. It’s the same in Mozilla and IE7. As If big portals aren’t already bloated and full of junk markup, it seems the simpler the outward layout “appears” the more complex it is on the HTML end.

I mean, I understand they have to make it all fancy with dropshadows and other stuff, but does it have to be so elaborate code-wise?

To prove once again that a bad experience is the root of motivation, I decided to put together a menu similar in function (if not form) to the msnbc menus. I didn’t try to duplicate the whole thing exactly for obvious copyright issues, but I think it gets the point across. If something can be done simpler, it should be.

Granted mine isn’t as fancy, but at least it’s a lot faster. It hasn’t been styled that much either (the whole thing took about 10 minutes so sue me).

It uses no JavaScript whatsoever and works in IE7 and Mozilla. I haven’t tested in any other browser, but should function the same.

Feel free to use it for whatever project you have in mind. I didn’t do it just as a possible alternative for the msnbc menus, but just to make it clear that there are alternatives to JavaScript if all you’re looking for is a menu (regardless of complexity).

Often times, the simplest JS menu is far more complex and cumbersome compared to the most complex pure CSS menu. Plus it will work even if a visitor has JavaScript disabled.

Dummy text courtesy of Lipsum.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s