Today navigation is an important part of any website. Choosing a menu system can be one of the most challenging portions when your picking out your site layout. Here are a few guidelines to help you out.

Lite use of javascript

With all the different browser compatibility problems you will most likely end up using some java script, even if it’s just to emulate the hover pseudo css class. But if you are relying on javascript too much, your going to have a problem.  Don’t misunderstand, using javascript for animations and other visual effects is fine, but you should try to avoid if for core menu functions(hiding and showing menu items). Also it is much better to set css classes then element styles. Setting classes means that you can change things easier from the css file. Setting styles means editing the javascript and that is a lot more difficult.  Also try and use existing libraries like prototype and scriptaculous to keep the code reuse high and the complications down. There’s no reason you should treat your javascript code different then you do you web app code.

CSS means Cascading

Remember the C in CSS? Make heavy use of it. If your using a list based menu system, set a style on the li that contains the width and such. This will keep the amount of CSS down, which is important if you have a complicated menu.

Degradation

It is extremely important that your menu system degrade. You can’t rely on the users’ browsers to have CSS or Javascript to be enabled. You need to make sure that you menu can still function in these cases.  As a result your SEO will be improved (because search engines can read your menu to), and everyone will be able to navigate.

Images

Like javascript, a lite use of images is ok, but your display and style should not depend on them. Different browsers render images differently, and padding, margins, positioning can all be effected. Reducing the amount of images used will help reduce these problems.

Suckerfish

There are other things that make a menu system great. But most of them I see are based on, at least in part, on the suckerfish menu technique.  Take a look at the suckerfish page for examples, demos, and an overview of how it works.

Coteyr.net Programming LLC. is about one thing. Getting your project done the way you like it. Using Agile development and management techniques, we are able to get even the most complex projects done in a short time frame and on a modest budget.

Feel free to contact me via any of the methods below. My normal hours are 10am to 10pm Eastern Standard Time. In case of emergency I am available 24/7.

Email: coteyr@coteyr.net
Phone: (813) 421-4338
GTalk: coteyr@coteyr.net
Skype: coteyr
Guru: Profile