Try these resources to help you design Web site menus

by Les Hamilton | Aug 27, 2001 7:00:00 AM

Takeaway: A Web site without menus is like a three-story house that lacks stairs: It makes it difficult to get around. Learn how developers use Dynamic HTML and JavaScript to place menus on a Web site.

Editor’s note: This article originally appeared in TechRepublic’s Web Development Zone TechMail. Subscribe, and you’ll receive information on Web development-related projects and trends.

As any good Web developer would (or at least should) tell you, among the most critical elements of any site design are menus. Menus directly determine how easily and intuitively users can navigate a Web site and manage its content.

A wide variety of menu styles are employed today, most of which fall into two categories that are worthy of review.

The first and simplest menu style consists of static text hyperlinks that replace the current page or targeted frame. This behavior can be duplicated with an image-mapped graphic.

The second prevalent style, dynamic menus, is much more interesting, both for the developer and the users. Among the most popular examples of these are sites that make use of DHTML to display drop-down, cascading menus, which employ text arrays rather than graphics.

Of course, forward-thinking developers design Web pages in the same fashion as any other client/server application—with extreme consideration toward how much network traffic the program is expected to generate. Don’t employ server-intensive DHTML assets on a system already burdened by a high hit rate.

Rather than bore you with various theories on user interface design and presentation, here are a few Web sites with tutorials and reusable code that will enable you to see some examples and pick a menu method that appeals to your own sense of style and functionality.

In order to understand how menus work, you need an understanding of Dynamic HTML (DHTML) and client-side scripting. A great introduction to these technologies can be found at the Web Developer's Virtual Library.

Every other week, Dynamic HTML Lab shows you how to add DHTML to your Web site, with step-by-step tutorials, source code, working examples, plus full background materials.

After reading the tutorials, you'll be able to create your own sophisticated client-side Web-based applications while maintaining full backwards compatibility. DHTML Lab uses Cascading Style Sheets, positioning, and JavaScript as the "glue" that holds it all together. They also have online code generation tools that will make customized menus for you.

Ken Ward's Java Script Tutorial has some nice rollover and drop-down style examples. The JavaScript Source is also an excellent resource, with tons of "cut-and-paste" JavaScript examples for your Web pages. The site's navigation section has over 50 examples of menus to choose from as well.

For our readers that don't develop .asp pages but use Apache or WebSphere with Java to write .jsp pages, you haven’t been forgotten. IBM developerWorks is a great source for information on Apache, Linux Web servers, and Java development.

Share your invaluable links with us
Are there sites like the ones we’ve mentioned here that help you with your development work? Share them with us, and we’ll compile them in future articles.

4 comment(s)